Bootstrap下拉選單的實例教程

本章將說明如何使用 Bootstrap class 為按鈕新增下拉式選單。若要為按鈕新增下拉式選單，只需要簡單地在一個 .btn-group 中放置按鈕和下拉式選單。您也可以使用 來指示按鈕作為下拉式選單。

下面的實例示範了一個基本的簡單的按鈕下拉選單：

實例

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul></div><div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul></div>

基本用法

　　在使用Bootstrap框架中的下拉式選單組件時，其結構運用的正確與否非常的重要，如果結構和類別名稱未使用正確，直接影響組件是否能正常運用

　　1、使用一個名為“dropdown”的容器包裹了整個下拉選單元素

<div class="dropdown"></div>

　　2、使用了一個按鈕做為父選單，並且定義類別名稱「dropdown-toggle」和自訂「data-toggle」屬性，且值必須和最外容器類別名稱一致

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">

登入後複製

　　3、下拉式選單項目使用一個ul列表，並且定義一個類別名為「dropdown-menu」

<ul class="dropdown-menu" role="menu">

登入後複製

  
  
  ActionAnother actionSomething else here

登入後複製

　　4、透過為下拉式選單的父元素設定 ##　　4、透過為下拉式選單的父元素設定 

.dropup

 類，可以讓選單向上彈出（默認是向下彈出的）

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropup<span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li>
  </ul></div>

登入後複製

 

原理分析

　　Bootstrap框架中的下拉式選單元件，其下拉式選單項目預設是隱藏的，因為「dropdown-menu」預設樣式設定了「display:none」；當使用者點擊父選單項目時，下拉式選單將會被顯示出來；當使用者再次點擊時，下拉式選單將繼續隱藏

.dropdown-menu {
  position: absolute;/*设置绝对定位，相对于父元素div.dropdown*/
  top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/
  left: 0;
  z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/
  display: none;/*默认隐藏下拉菜单项*/
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

登入後複製

　　現在我們來分析一下實作原理，非常簡單，透過js技術手段，給父容器「div.dropdown」新增或移除類別名稱「open」來控制下拉式選單顯示或隱藏。也就是說，預設情況，“div.dropdown”沒有類別名稱“open”，當使用者第一次點擊時，“div.dropdown”會新增類別名稱“open”；當使用者再次點擊時，“div.dropdown 」容器中的類別名稱「open」又會被移除

.open > .dropdown-menu {
  display: block;
}

登入後複製

 

擴充用法

【分隔線】

　　在Bootstrap框架中的下拉選單提供了下拉分隔線，假設下拉選單有兩個群組，那麼群組與群組之間可以透過新增一個空的

，並且給這個

新增類別名稱「 divider」來實現新增下拉分隔線的功能

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

登入後複製

<li role="separator" class="divider"></li>

登入後複製

Dropdown

• Action
• Another action
• Something else here
<li role="separator" class="divider"></li>
• Separated link