首頁 > web前端 > js教程 > Bootstrap實作下拉選單效果_javascript技巧

Bootstrap實作下拉選單效果_javascript技巧

WBOY
發布: 2016-05-16 15:02:51
原創
1930 人瀏覽過

下拉式選單用於顯示連結清單的可切換、有上下文的選單。

1、案例

將下拉式選單觸發器和下拉式選單都包裹在.dropdown裡,然後加入組成選單的HTML程式碼。

 <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

登入後複製

可以透過上面的程式碼發現,裡面可能有很多陌生的樣式類別或屬性。

一個Dropdown按鈕和右邊有個小圖示caret,當然這個小圖示和按鈕的文字是平級的。

首先看button按鈕中有個dropdown-toggle,還有一個data-toggle屬性,根據這個屬性來彈出列表。

緊接著ul標籤的dropdown-menu應該是和上面button按鈕的樣式類dropdown-toggle聯合使用,在透過aria-labelledby綁定上面的button按鈕。

下來第四個li標籤中有個divider其實是一個分割線的樣式類別。

大概我理解的就這個樣子,理解的肯定不到位。

2、對齊選項

給下拉式選單.dropdown-menu加上.text-right 讓文字右對齊。

 <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>
登入後複製

只是在上面的程式碼中的ul標籤上新增了一個text-right的樣式類別。

3、標題

在任何下拉式選單中均可透過新增標題來標明一組動作。

 <h1>下拉菜单</h1>
  <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>
登入後複製

主要是增加了

   裡面有個.dropdown-header的樣式類別。

4、停用的選單項目

給下拉式選單中的

  • 加上.disabled禁用連結。

    繼續修改上面的程式碼將Something else here行的程式碼進行替換

    複製程式碼 程式碼如下:

  • 主要是在li標籤中加入.disabled的樣式類別。

    你運行之後可以查看效果,其實效果和上面的標題樣式差不多,當你點擊的時候會有一個禁用的圖標顯示。

    5、基本案例

    1)、按鈕式下拉式選單
    把任何按鈕放入.btn-group然後加入正確的選單標記,就可以做成下拉式選單觸發器。

    單按鈕下拉式選單

    只要改變一些基本的標記,就能把按鈕變成下拉式選單開關。

    <div class="btn-group">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     Action <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" role="menu">
     <li><a href="#">Action</a></li>
     <li><a href="#">Another action</a></li>
     <li><a href="#">Something else here</a></li>
     <li class="divider"></li>
     <li><a href="#">Separated link</a></li>
     </ul>
    </div>
    
    
    登入後複製

    分裂式按鈕下拉式選單

    相似地,分裂式按鈕下拉式選單也需要同樣的改變標記,但只要多一個分開的按鈕。

    <div class="btn-group">
       <button type="button" class="btn btn-danger">Action</button>
       <div class="dropdown">
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        </ul>
       </div>
      </div
    
    登入後複製

    只能點選小圖示才能出現下來選單額。

    2)、尺寸

    下拉式選單按鈕適用所有尺寸的按鈕。

    <div class="btn-group">
     <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
     Large button <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">
     ...
     </ul>
    </div>
    
    <!-- Small button group -->
    <div class="btn-group">
     <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
     Small button <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">
     ...
     </ul>
    </div>
    
    <!-- Extra small button group -->
    <div class="btn-group">
     <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
     Extra small button <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">
     ...
     </ul>
    </div>
    
    
    登入後複製

    透過樣式類別.btn-lg、 .btn-sm、.btn-xs來控制按鈕的大小。

    3)、向上彈出式選單

    為父元素添加.dropup就能使觸發的下拉式選單在元素上方。

    <div class="btn-group dropup">
     <button type="button" class="btn btn-default">Dropup</button>
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     <span class="caret"></span>
     <span class="sr-only">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
     <!-- Dropdown menu links -->
     </ul>
    </div>
    
    
    登入後複製

    更多內容請參考:Bootstrap學習教學

    總結:

     本文主要介紹了下拉式選單的相關內容,然後介紹了按鈕和下拉式選單的組合,變化還是蠻多的,樣式也不錯,希望大家喜歡。

    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門推薦
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板