Bootstrap內(nèi)置了一套完整的下拉菜單組件，下面本篇文章就來給大家介紹一下Bootstrap中的下拉菜單類。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

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

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

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

相關(guān)推薦：《bootstrap教程》

創(chuàng)建下拉菜單

Bootstrap中的下拉菜單都是基于列表實現(xiàn)的，可以使用無序列表（

）或有序列表（
），暫不支持描述列表（

）。

為

或
添加 .dropdown-menu 類，即可創(chuàng)建一個下拉菜單。如：

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

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

此時，在瀏覽器中預(yù)覽，可以看到一個按鈕。如果點擊按鈕，下拉菜單才會被激活，并顯示出來。效果如圖 3?9所示：


圖3-9 激活下拉菜單

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

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

效果如圖 3?10所示：


圖3-10 上拉菜單

更多編程相關(guān)知識，請訪問：編程視頻??！

以上是淺談Bootstrap中的下拉菜單類（dropdown-menu）的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！