Bootstrap實現下拉菜單效果_javascript技巧

1、案例

將下拉菜單觸發器和下拉菜單都包裹在.dropdown里，然后添加組成菜單的HTML代碼。

 
 
 Dropdown
 
 
 
 
Action
 
Another action
 
Something else here
 

 
Separated link
 
 

可以通過上面的代碼發現，里面可能有很多陌生的樣式類或者屬性。

一個Dropdown按鈕和右側有個小圖標caret，當然這個小圖標和按鈕的文本是平級的。

首先看button按鈕中有個dropdown-toggle，還有一個data-toggle屬性，根據這個屬性來彈出下來列表。

緊接著ul標簽的dropdown-menu應該是和上面button按鈕的樣式類dropdown-toggle聯合使用，在通過aria-labelledby綁定上面的button按鈕。

下來第四個li標簽中有個divider其實是一個分割線的樣式類。

大概我理解的就這個樣子，理解的肯定不到位。

2、對齊選項

給下拉菜單.dropdown-menu加上.text-right 使文字右對齊。

 
 
 Dropdown
 
 
 
 
Action
 
Another action
 
Something else here
 

 
Separated link
 
 

只是在上面的代碼中的ul標簽上添加了一個text-right的樣式類。

3、標題

在任何下拉菜單中均可通過添加標題來標明一組動作。

 
下拉菜單
 
 
 Dropdown
 
 
 
 
Dropdown header
 
Action
 
Another action
 
Something else here
 

 
Dropdown header
 
Separated link
 
 

主要是添加了

4、禁用的菜單項

給下拉菜單中的

你運行之后可以查看效果，其實效果和上面的標題樣式差不多，當你點擊的時候會有一個禁用的圖標顯示。

5、基本案例

1）、按鈕式下拉菜單
把任何按鈕放入.btn-group然后加入正確的菜單標記，就可以做成下拉菜單觸發器。

單按鈕下拉菜單

只要改變一些基本的標記，就能把按鈕變成下拉菜單開關。

 
 Action 
 
 
 
Action
 
Another action
 
Something else here
 

 
Separated link
 

分裂式按鈕下拉菜單

相似地，分裂式按鈕下拉菜單也需要同樣的改變標記，但只要多一個分開的按鈕。

 Action
 
 
 
 Toggle Dropdown
 
 
 
Action
 
Another action
 
Something else here
 

 
Separated link
 
 
 

只能點擊小圖標才能出現下來菜單額。

2）、尺寸

下拉菜單按鈕適用所有尺寸的按鈕。

 
 Large button 
 
 
 ...
 




 
 Small button 
 
 
 ...
 




 
 Extra small button 
 
 
 ...
 

通過樣式類.btn-lg、 .btn-sm、.btn-xs來控制按鈕的大小。

3）、向上彈出式菜單

給父元素添加.dropup就能使觸發的下拉菜單在元素上方。

 Dropup
 
 
 Toggle Dropdown
 
 
 
 

更多內容請參考：Bootstrap學習教程

總結：

本文主要介紹了下拉菜單的相關內容，然后介紹了按鈕和下拉菜單的組合，變化還是蠻多的，樣式也不錯，希望大家喜歡。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com