bootstrap——組件（一、下拉菜單）

1、dropdown基本用法

<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" >
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

---

2、對齊

.dropdown-menu-left
.dropdown-menu-right
dropdownmenu會跟最外層的div進行對齊

<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

---

3、標題

<li class="dropdown-header"></li>

在任何下拉菜單中均可通過添加標題來標明一組動作

<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-">
        <li class="dropdown-header">item1</li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="dropdown-header">item2</li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

---

4、分割線

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

爲下拉菜單添加一條分割線，用於將多個鏈接分組。

<div class="dropdown">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       Dropdown
       <span class="caret"></span>
   </button>
   <ul class="dropdown-menu dropdown-menu-">
       <li class="dropdown-header">item1</li>
       <li><a href="#">1</a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>
       <li class="divider"></li>
       <li class="dropdown-header">item2</li>
       <li><a href="#">1</a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>
   </ul>
</div>

---

5、禁用的菜單項

爲下拉菜單中的

元素添加 .disabled 類，從而禁用相應的菜單項。

<li class="disabled"><a href="#">Disabled link</a></li>

---

6、下拉菜單的事件

事件名稱	描述
show.bs.dropdown	在下拉菜單的show事件發生後立即觸發這個事件
shown.bs.dropdown	在下拉菜單顯示完成之後觸發這個事件
hide.bs.dropdown	在下拉菜單的hide事件發生後立即觸發這個事件
hidden.bs.dropdown	在下拉菜單消失完成之後觸發這個事件

例子：

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})