Bootstrap中下拉菜單類的使用方法

這篇文章主要介紹Bootstrap中下拉菜單類的使用方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

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

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

下拉菜單的交互行為還需要 下拉菜單插件（dropdown.js）的支持，因此使用下拉菜單組件時，還必須引入 dropdown.js 文件。

創建下拉菜單

Bootstrap中的下拉菜單都是基于列表實現的，可以使用無序列表（<ul>）或有序列表（<ol>），暫不支持描述列表（<dl>）。

為 <ul> 或 <ol> 添加 .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中下拉菜單類的使用方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！