淺談Bootstrap中的下拉式選單類別（dropdown-menu）

Bootstrap內建了一套完整的下拉式選單元件，以下這篇文章就來跟大家介紹一下Bootstrap中的下拉式選單類別。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

下拉菜單是一種非常常見的效果，用於展示可切換、有關聯的一組鏈接，它可以節省網頁排版空間，使網頁佈局簡潔有序。

Bootstrap內建了一套完整的下拉式選單元件，可用於不同的元素，如導航、按鈕等等。配合其他元素，還可以設計出多樣化的選單​​效果。

下拉式選單的互動行為也需要 下拉式選單外掛程式（dropdown.js）的支持，因此使用下拉式選單元件時，也必須引入 dropdown.js 檔案。

相關推薦：《bootstrap教程》

建立下拉式選單

Bootstrap中的下拉式選單都是基於列表實現的，可以使用無序列表（

）或有序列表（

），暫不支援描述列表（

）。

為

或

新增 .dropdown-menu 類，即可建立一個下拉式選單。如：

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
</ul>

效果如圖3‑8所示：


圖3-8 下拉選單

通常情況下，需要將下拉式選單預設隱藏起來，只有當使用者點擊某個按鈕或連結時，才讓它顯示出來。因此，你需要把超連結或按鈕以及下拉式選單全部包裹在一個 class="dropdown" 或 position: relative; 的容器中，並為按鈕或連結添加 data-toggle="dropdown" 屬性。這就可以讓下拉式選單預設為隱藏，只有在點擊按鈕或連結時，它才會被啟動並顯示出來。如：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    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 role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

此時，在瀏覽器中預覽，可以看到一個按鈕。如果點擊按鈕，下拉式選單才會被激活，並顯示出來。效果如圖 3‑9所示：


圖3-9 啟動下拉式選單

預設情況下，子選單以下拉形式彈出。如果希望以上拉形式彈出，只要把整個下拉式選單包裹在.dropup 的容器中即可：

<div class="dropup">
…
</div>

效果如圖3‑10所示：


圖3-10 上拉選單

更多程式相關知識，請造訪：程式設計影片！ ！

以上是淺談Bootstrap中的下拉式選單類別（dropdown-menu）的詳細內容。更多資訊請關注PHP中文網其他相關文章！