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

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

下拉菜單是一種非常常見的效果，用于展示可切換、有關(guān)聯(lián)的一組鏈接，它可以節(jié)省網(wǎng)頁(yè)排版空間，使網(wǎng)頁(yè)布局簡(jiǎn)潔有序。

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

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

創(chuàng)建下拉菜單

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

為 <ul> 或 <ol> 添加 .dropdown-menu 類，即可創(chuàng)建一個(gè)下拉菜單。如：

<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 下拉菜單

通常情況下，需要將下拉菜單默認(rèn)隱藏起來(lái)，只有當(dāng)用戶點(diǎn)擊某個(gè)按鈕或鏈接時(shí)，才讓它顯示出來(lái)。因此，你需要把超鏈接或按鈕以及下拉菜單全部包裹在一個(gè) class="dropdown" 或 position: relative; 的容器中，并為按鈕或鏈接添加 data-toggle="dropdown" 屬性。這就可以讓下拉菜單默認(rèn)隱藏，只有在點(diǎn)擊按鈕或鏈接時(shí)，它才被激活并顯示出來(lái)。如：

<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>

此時(shí)，在瀏覽器中預(yù)覽，可以看到一個(gè)按鈕。如果點(diǎn)擊按鈕，下拉菜單才會(huì)被激活，并顯示出來(lái)。效果如圖 3?9所示：

圖3-9 激活下拉菜單

默認(rèn)情況下，子菜單以下拉形式彈出。如果希望以上拉形式彈出，只需把整個(gè)下拉菜單包裹在 .dropup 的容器中即可：

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

效果如圖 3?10所示：

圖3-10 上拉菜單

以上是“Bootstrap中下拉菜單類的使用方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！