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></div>

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

<button></button>

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

  
  
  ActionAnother actionSomething else here

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

.dropup

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

<div>
  <button>Dropup<span></span>
  </button>
  <ul>
<li><a>Action</a></li>
<li><a>Another action</a></li>
<li><a>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;
}

<div>
  <button>Dropdown<span></span>
  </button>
  <ul>
<li><a>Action</a></li>
<li><a>Another action</a></li>
<li><a>Something else here</a></li>
<li>
<li><a>Separated link</a></li>
  </ul>
</div>

#【選單標題】

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

Dropdown header

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}

<div>
  <button>Dropdown<span></span>
  </button>
  <ul>
<li>第一部分菜单头部</li>
<li><a>下拉菜单项</a></li>
<li><a>下拉菜单项</a></li>
<li>
<li>第二部分菜单头部</li>
<li><a>下拉菜单项</a></li>
  </ul>
</div>

【對齊方式】

　　Bootstrap框架中下拉選單預設為左對齊，如果想要讓下拉式選單相對於父容器右對齊時，可以在「dropdown-menu」上新增一個「dropdown-menu-right」類別名稱 

.dropdown-menu-right {
  right: 0;
  left: auto;
}

　　由於

預設是區塊級元素，撐滿父級寬度。這裡，需要為此元素設定inline-block和margin-left，使其內容撐開寬度，且距離左側有一定距離

    display: inline-block;
    margin-left: 60px;

<div>
  <button>Dropdown<span></span>
  </button>
  <ul>
<li><a>下拉菜单项</a></li>
<li><a>下拉菜单项</a></li>
<li><a>下拉菜单项</a></li>
<li>
<li><a>下拉菜单项</a></li>
  </ul>
</div>

【選單項目狀態】

　　下拉選單項目的預設的狀態有懸浮狀態（:hover）和焦點狀態（:focus）

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

　　下拉選單項目除了上面兩種狀態，還有當前狀態（.active）和停用狀態（.disabled）。這兩種狀態使用方法只需要在對應的選單項目上新增對應的類別名稱

<div>
  <button>Dropdown<span></span>
  </button>
  <ul>
<li><a>下拉菜单项</a></li>
<li><a>下拉菜单项</a></li>
<li><a>下拉菜单项</a></li>
<li>
<li><a>下拉菜单项</a></li>
  </ul>
</div>

###

以上是Bootstrap下拉選單的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！