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

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

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的鳳陽網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

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

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

創(chuàng)建下拉菜單

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

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

）。

為

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

  
Action
  
Another action
  
Something else here

效果如圖 3?8所示：


圖3-8 下拉菜單

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

  
    Dropdown
    
  
  
    
Action
    
Another action
    
Something else here
    
    
Separated link