基本下拉
一個下拉菜單是一個可切換菜單，允許用戶選擇從預定義列表中的一個值：
例
<div class="dropdown">
<button class="btn btn-primary
dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
Example
<span class="caret"></span></button>
<ul
class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div> 試一試» 例子解釋：
該.dropdown類表示一個下拉菜單。
要打開下拉菜單，使用按鈕或一類的鏈接.dropdown-toggle和data-toggle="dropdown"屬性。
該.caret類創建一個插入符號箭頭圖標( ) ( ) ( ) ，這表明該按鈕是一個下拉菜單。
添加.dropdown-menu類將<ul>元素實際構建的下拉菜單。
下拉分頻器
該.divider類用於用薄水平邊框的下拉菜單裡單獨的鏈接：
下拉頭
該.dropdown-header類是用來添加下拉菜單裡面的頭：
禁用項目
要禁用在下拉菜單中的項目，使用.disabled類：
下拉位置
為了右對齊下拉列表中，添加.dropdown-menu-right級與.dropdown菜單中的元素：
放棄
如果你想在下拉菜單中向上拓展，而不是向下，改變<div>與元素class="dropdown"到"dropup"
下拉無障礙
為了幫助改善輔助功能使用屏幕閱讀器的人，你應該包括以下role和aria-*創建一個下拉菜單中的屬性時，：
例
<div class="dropdown">
<button class="btn btn-default
dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu"
role="menu" aria-labelledby="menu1">
<li
role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li
role="presentation"><a role="menuitem" href="#">About
Us</a></li>
</ul>
</div> 試一試» 自測練習用！
完成引導下拉參考
對於所有的下拉選項，方法和事件的完整參考，請訪問我們的引導JS下拉參考 。