Bootstrap實(shí)現(xiàn)下拉菜單效果_javascript技巧

1、案例

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

 
 
 Dropdown
 
 
 
 
Action
 
Another action
 
Something else here
 

 
Separated link
 
 

可以通過(guò)上面的代碼發(fā)現(xiàn)，里面可能有很多陌生的樣式類(lèi)或者屬性。

一個(gè)Dropdown按鈕和右側(cè)有個(gè)小圖標(biāo)caret，當(dāng)然這個(gè)小圖標(biāo)和按鈕的文本是平級(jí)的。

首先看button按鈕中有個(gè)dropdown-toggle，還有一個(gè)data-toggle屬性，根據(jù)這個(gè)屬性來(lái)彈出下來(lái)列表。

緊接著ul標(biāo)簽的dropdown-menu應(yīng)該是和上面button按鈕的樣式類(lèi)dropdown-toggle聯(lián)合使用，在通過(guò)aria-labelledby綁定上面的button按鈕。

下來(lái)第四個(gè)li標(biāo)簽中有個(gè)divider其實(shí)是一個(gè)分割線的樣式類(lèi)。

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

2、對(duì)齊選項(xiàng)

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

 
 
 Dropdown
 
 
 
 
Action
 
Another action
 
Something else here
 

 
Separated link
 
 

只是在上面的代碼中的ul標(biāo)簽上添加了一個(gè)text-right的樣式類(lèi)。

3、標(biāo)題

在任何下拉菜單中均可通過(guò)添加標(biāo)題來(lái)標(biāo)明一組動(dòng)作。

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

 
Dropdown header
 
Separated link
 
 

主要是添加了

4、禁用的菜單項(xiàng)

給下拉菜單中的

你運(yùn)行之后可以查看效果，其實(shí)效果和上面的標(biāo)題樣式差不多，當(dāng)你點(diǎn)擊的時(shí)候會(huì)有一個(gè)禁用的圖標(biāo)顯示。

5、基本案例

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

單按鈕下拉菜單

只要改變一些基本的標(biāo)記，就能把按鈕變成下拉菜單開(kāi)關(guān)。

 
 Action 
 
 
 
Action
 
Another action
 
Something else here
 

 
Separated link
 

分裂式按鈕下拉菜單

相似地，分裂式按鈕下拉菜單也需要同樣的改變標(biāo)記，但只要多一個(gè)分開(kāi)的按鈕。

 Action
 
 
 
 Toggle Dropdown
 
 
 
Action
 
Another action
 
Something else here
 

 
Separated link
 
 
 

只能點(diǎn)擊小圖標(biāo)才能出現(xiàn)下來(lái)菜單額。

2）、尺寸

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

 
 Large button 
 
 
 ...
 




 
 Small button 
 
 
 ...
 




 
 Extra small button 
 
 
 ...
 

通過(guò)樣式類(lèi).btn-lg、 .btn-sm、.btn-xs來(lái)控制按鈕的大小。

3）、向上彈出式菜單

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

 Dropup
 
 
 Toggle Dropdown
 
 
 
 

更多內(nèi)容請(qǐng)參考：Bootstrap學(xué)習(xí)教程

總結(jié)：

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com