Bootstrap每天必學(xué)之下拉菜單
一、下拉菜單（基本用法）
小伙伴們注意，在Bootstrap框架中的下拉菜單組件是一個獨立的組件，根據(jù)不同的版本，它對應(yīng)的文件：
☑ LESS版本：對應(yīng)的源碼文件為 dropdowns.less
☑ Sass版本：對應(yīng)的源碼文件為 _dropdowns.sass
☑ 編譯后的Bootstrap版本：查看bootstrap.css文件第3004行～第3130行
在使用Bootstrap框架的下拉菜單時，必須調(diào)用Bootstrap框架提供的bootstrap.js文件。當(dāng)然，如果你使用的是未編譯版本，在js文件夾下你能找到一個名為“dropdown.js”的文件。你也可以調(diào)用這個js文件。不過在我們的教程中，我們統(tǒng)一調(diào)用壓縮好的“bootstrap.min.js”文件：
特別聲明：因為Bootstrap的組件交互效果都是依賴于jQuery庫寫的插件，所以在使用bootstrap.min.js之前一定要先加載jquery.min.js才會生效果。
我們先來看官網(wǎng)上一個簡單的示例：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> … <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> </ul> </div>
使用方法：
在使用Bootstrap框架中的下拉菜單組件時，其結(jié)構(gòu)運用的正確與否非常的重要，如果結(jié)構(gòu)和類名未使用正確，直接影響組件是否能正常運用。我們來簡單的看看：
1、使用一個名為“dropdown”的容器包裹了整個下拉菜單元素，示例中為:
2、使用了一個<button>按鈕做為父菜單，并且定義類名“dropdown-toggle”和自定義“data-toggle”屬性，且值必須和最外容器類名一致，此示例為:
data-toggle="dropdown"
3、下拉菜單項使用一個ul列表，并且定義一個類名為“dropdown-menu”，此示例為:
<ul class="dropdown-menu">
示例
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>下拉菜單</title> <link rel="stylesheet" > </head> <body> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 選擇你喜歡的水果 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">蘋果</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li> </ul> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
二、下拉菜單（原理分析）
Bootstrap框架中的下拉菜單組件，其下拉菜單項默認(rèn)是隱藏的，如下所示：
因為“dropdown-menu”默認(rèn)樣式設(shè)置了“display:none”，其詳細源碼請查看bootstrap.css文件第3010行～第3029行：
.dropdown-menu {
position: absolute;/*設(shè)置絕對定位，相對于父元素div.dropdown*/
top: 100%;/*讓下拉菜單項在父菜單項底部，如果父元素不設(shè)置相對定位，該元素相對于body元素*/
left: 0;
z-index: 1000;/*讓下拉菜單項不被其他元素遮蓋住*/
display: none;/*默認(rèn)隱藏下拉菜單項*/
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
當(dāng)用戶點擊父菜單項時，下拉菜單將會被顯示出來，當(dāng)用戶再次點擊時，下拉菜單將繼續(xù)隱藏。
原理分析：
現(xiàn)在我們來分析一下實現(xiàn)原理，非常簡單，通過js技術(shù)手段，給父容器“div.dropdown”添加或移除類名“open”來控制下拉菜單顯示或隱藏。也就是說，默認(rèn)情況，“div.dropdown”沒有類名“open”，當(dāng)用戶第一次點擊時，“div.dropdown”會添加類名“open”；當(dāng)用戶再次點擊時，“div.dropdown”容器中的類名“open”又會被移除。我們可以通過瀏覽器的firebug查看整個過程：
默認(rèn)情況：
用戶第一次點擊：
用戶再次點擊：
在bootstrap.css文件第3076行～第3078行，我們可以很容易發(fā)現(xiàn)：
.open > .dropdown-menu {
display: block;
}
三、下拉菜單（下拉分隔線）
在Bootstrap框架中的下拉菜單還提供了下拉分隔線，假設(shè)下拉菜單有兩個組，那么組與組之間可以通過添加一個空的<li>，并且給這個<li>添加類名“divider”來實現(xiàn)添加下拉分隔線的功能。對應(yīng)的樣式代碼：
/源碼bootstrap.css文件第3034行～第3039行/
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
示例：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>下拉分隔線</title> <link rel="stylesheet" > <link rel="stylesheet" href="style.css"> </head> <body> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 食物 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">蘿卜</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">茄子</a></li> <li role="presentation" class ="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">米飯</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">饅頭</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">面條</a></li> </ul> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
效果如下：
四、下拉菜單（菜單標(biāo)題）
上一小節(jié)講解通過添加“divider”可以將下拉菜單分組，為了讓這個分組更明顯，還可以給每個組添加一個頭部（標(biāo)題）。如下：
對應(yīng)的樣式如下：
/查看bootstrap.css文件第3090行～第3096行/
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #999;
}
示例
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 食物 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">蔬菜</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">蘿卜</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">茄子</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">主食</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">米飯</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">饅頭</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">面條</a></li> </ul> </div>
運行效果如下：
五、下拉菜單（對齊方式）
實現(xiàn)右對齊方法：
Bootstrap框架中下拉菜單默認(rèn)是左對齊，如果你想讓下拉菜單相對于父容器右對齊時，可以在“dropdown-menu”上添加一個“pull-right”或者“dropdown-menu-right”類名，如下所示：
上面代碼中的“pull-right”類可以用“dropdown-menu-right”代替，兩個類的作用是一樣的，可從下面的源代碼中看出。
實現(xiàn)原理：
對應(yīng)的樣式如下：
/源碼請查看bootstrap.css文件第3030行～第3033行和3082行～第3085行/
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
同時一定要為.dropdown添加float:leftcss樣式。
.dropdown{
float: left;
}
運行效果如下所示：
下拉菜單與父容器左邊對齊:
與此同時，還有一個類名剛好與“dropdown-menu-right”相反的類名“dropdown-menu-left”，其效果就是讓下拉菜單與父容器左邊對齊，其實就是默認(rèn)效果。
/請查看bootstrap.css文件第3086行～第3089行/
.dropdown-menu-left {
right: auto;
left: 0;
}
六、下拉菜單（菜單項狀態(tài)）
下拉菜單項的默認(rèn)的狀態(tài)（不用設(shè)置）有懸浮狀態(tài)（:hover）和焦點狀態(tài)（:focus）：
/查看bootstrap.css文件第3049行～第3054行/
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
下拉菜單項除了上面兩種狀態(tài)，還有當(dāng)前狀態(tài)（.active）和禁用狀態(tài)（.disabled）。這兩種狀態(tài)使用方法只需要在對應(yīng)的菜單項上添加對應(yīng)的類名：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> …. <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> </ul> </div>
運行效果如下：
對應(yīng)的樣式代碼也非常簡單：
/請查看bootstrap.css文件第3055行～第3075行/
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #fff;
text-decoration: none;
background-color: #428bca;
outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: #999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
如果大家還想深入學(xué)習(xí)，可以點擊這里進行學(xué)習(xí)，再為大家附兩個精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程
本文系列教程整理到：Bootstrap基礎(chǔ)教程 專題中，歡迎點擊學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
- BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴展
- Bootstrap select多選下拉框?qū)崿F(xiàn)代碼
- bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整
- Bootstrap模塊dropdown實現(xiàn)下拉框響應(yīng)
- Bootstrap框架下下拉框select搜索功能
- Bootstrap Table 在指定列中添加下拉框控件并獲取所選值
- Bootstrap每天必學(xué)之級聯(lián)下拉菜單
- bootstrap中selectpicker下拉框使用方法實例
- Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)
- IE11下CKEditor在Bootstrap Modal中下拉問題的解決
相關(guān)文章
JS Array.slice 截取數(shù)組的實現(xiàn)方法
這篇文章主要介紹了JS Array.slice 截取數(shù)組的實現(xiàn)方法,因為我們需要控制一下長度，需要的朋友可以參考下2016-01-01
每天一篇javascript學(xué)習(xí)小結(jié)（Function對象）
這篇文章主要介紹了javascript中的Function對象知識點，對Function對象的基本使用方法，以及各種方法進行整理，感興趣的小伙伴們可以參考一下2015-11-11
本文主要介紹了js常用的DOM方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
關(guān)于在IE下的一個安全BUG --可用于跟蹤用戶的系統(tǒng)鼠標(biāo)位置
本篇文章小編將為大家介紹，關(guān)于在IE下的一個安全BUG --可用于跟蹤用戶的系統(tǒng)鼠標(biāo)位置。需要的朋友可以參考一下2013-04-04
下面小編就為大家?guī)硪黄猨s處理包含中文的字符串實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
利用webpack理解CommonJS和ES Modules的差異區(qū)別
這篇文章主要介紹了利用webpack理解CommonJS和ES Modules的差異區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
javascript的console.log()用法小結(jié)
console.log 原先是 Firefox 的 專利 ，嚴(yán)格說是安裝了 Firebugs 之后的 Firefox 所獨有的調(diào)試 絕招2012-05-05
JavaScript限制在客戶區(qū)可見范圍的拖拽(解決scrollLeft和scrollTop的問題)（2）
這篇文章主要介紹了JavaScript限制在客戶區(qū)可見范圍的拖拽，解決scrollLeft和scrollTop的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
javascript監(jiān)聽頁面刷新和頁面關(guān)閉事件方法詳解
本文主要介紹了javascript監(jiān)聽頁面刷新和頁面關(guān)閉事件的方法，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家介紹了jsonpath做接口封裝使用技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05