用于顯示鏈接列表的可切換、有上下文的菜單。下拉菜單的 JavaScript 插件讓它具有了交互性。

實(shí)例

將下拉菜單觸發(fā)器和下拉菜單都包裹在 .dropdown 里，或者另一個(gè)聲明了 position: relative; 的元素。然后加入組成菜單的 HTML 代碼。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <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>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

通過(guò)為下拉菜單的父元素設(shè)置 .dropup 類(lèi)，可以讓菜單向上彈出（默認(rèn)是向下彈出的）。

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

對(duì)齊

B 默認(rèn)情況下，下拉菜單自動(dòng)沿著父元素的上沿和左側(cè)被定位為 100% 寬度。 為 .dropdown-menu 添加 .dropdown-menu-right 類(lèi)可以讓菜單右對(duì)齊。

可能需要額外的定位May require additional positioning

在正常的文檔流中，通過(guò) CSS 為下拉菜單進(jìn)行定位。這就意味著下拉菜單可能會(huì)由于設(shè)置了 overflow 屬性的父元素而被部分遮擋或超出視口（viewport）的顯示范圍。如果出現(xiàn)這種問(wèn)題，請(qǐng)自行解決。

不建議使用 .pull-right

從 v3.1.0 版本開(kāi)始，我們不再建議對(duì)下拉菜單使用 .pull-right 類(lèi)。如需將菜單右對(duì)齊，請(qǐng)使用 .dropdown-menu-right 類(lèi)。導(dǎo)航條中如需添加右對(duì)齊的導(dǎo)航（nav）組件，請(qǐng)使用 .pull-right 的 mixin 版本，可以自動(dòng)對(duì)齊菜單。如需左對(duì)齊，請(qǐng)使用 .dropdown-menu-left 類(lèi)。

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

標(biāo)題

在任何下拉菜單中均可通過(guò)添加標(biāo)題來(lái)標(biāo)明一組動(dòng)作。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

分割線(xiàn)

為下拉菜單添加一條分割線(xiàn)，用于將多個(gè)鏈接分組。

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

禁用的菜單項(xiàng)

為下拉菜單中的 <li> 元素添加 .disabled 類(lèi)，從而禁用相應(yīng)的菜單項(xiàng)。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>