Bootstrap 下拉選單

基本下拉選單

下拉選單是一個可切換的選單，允許使用者從預定義列表中選擇一個值

示例解釋

`.dropdown` 類表示一個下拉選單。

要開啟下拉選單，請使用帶有 .dropdown-toggle 類和 data-toggle="dropdown" 屬性的按鈕或連結。

.caret 類建立一個caret箭頭圖示（），這表明該按鈕是下拉選單。

將 .dropdown-menu 類新增到 <ul> 元素以實際構建下拉選單。

下拉分隔線

.divider 類用於在下拉選單中的連結之間新增一條細的水平分隔線

下拉標題

`.dropdown-header` 類用於在下拉選單中新增標題

停用和啟用項

使用 .active 類突出顯示特定的下拉選單項（新增藍色背景色）。

要停用下拉選單中的一項，請使用 `.disabled` 類（滑鼠懸停時顯示淺灰色文字顏色和“禁止通行”圖示）。

下拉選單位置

要使下拉選單右對齊，請將 .dropdown-menu-right 類新增到帶有 .dropdown-menu 的元素上

下拉選單

如果您希望下拉菜單向上展開而不是向下展開，請將類為 `"dropdown"` 的 `<div>` 元素更改為 `"dropup"`。

下拉選單可訪問性

為了提高螢幕閱讀器使用者的可訪問性，在建立下拉選單時，您應該包含以下 role 和 aria-* 屬性

<div class="">
  <button 
  class="btn btn-primary ">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

完整的 Bootstrap 下拉選單參考

有關所有下拉選單選項、方法和事件的完整參考，請訪問我們的 Bootstrap JS 下拉選單參考。