## 下拉菜單 用于顯示鏈接列表的可切換、有上下文的菜單。如果要實現下拉菜單的交互性， 要使用JavaScript 。 **實例** 將下拉菜單按鈕觸發器和下拉菜單都包裹在`.dropdown`里，或者另一個添加了`position: relative;`的元素。然后加入組成菜單的 HTML 代碼。 為下拉菜單的父元素設置`.dropdown`類，菜單向下彈出: ```html <div class="dropdown"> <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="menu1"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul> </div> ```  為下拉菜單的父元素設置`.dropup`類，菜單向上彈出（默認是向下彈出的）： ```html <div class="dropup"> <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="menu1"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul> </div> ```  ***** **對齊** 默認情況下，下拉菜單自動沿著父元素的上沿和左側被定位為 100% 寬度。給`.dropdown-menu`添加`.dropdown-menu-right`類可以讓菜單右對齊。 ```html <div class="dropdown"> <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="menu1"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul> </div> ```  ***** **標題** 如果在下拉菜單中有幾組不同的動作，可以通過添加標題（也就是在需要設為標題的標簽上添加類 .dropdown-header ）來區分一組動作。 ```html <div class="dropdown"> <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="menu1"> <li class="dropdown-header">第一部分</li> <li>two</li> <li>three</li> <li>four</li> <li class="dropdown-header">第二部分</li> <li>two</li> <li>three</li> <li>four</li> </ul> </div> ```  ***** **分割線** 為下拉菜單添加一條分割線，也就是在需要分割的標簽之前添加類 .divider ，還需要添加role="separator"這個屬性，用于將多個鏈接分組。它的作用跟標題差不多。 ```html <div class="dropdown"> <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="menu1"> <li>two</li> <li>three</li> <li>four</li> <li class="divider" role="separator"></li> <li>two</li> <li>three</li> <li>four</li> </ul> </div> ```  ***** **禁用菜單選項** 為下拉菜單中的`<li>`元素添加`.disabled`類，從而禁用相應的菜單項，讓該菜單項的鏈接變灰并失去鼠標懸停效果。 ```html <div class="dropdown"> <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="menu1"> <li><a href="#">常規鏈接</a></li> <li class="disabled"><a href="#">禁用鏈接</a></li> <li><a href="#">其他鏈接</a></li> </ul> </div> ```  注意：被禁用的鏈接仍然可以點擊，除非你去掉鏈接的 href 屬性，或者使用JavaScript代碼阻止用戶點擊鏈接。