Bootstrap每天必學(xué)之下拉菜單
一、下拉菜單(基本用法)
小伙伴們注意,在Bootstrap框架中的下拉菜單組件是一個(gè)獨(dú)立的組件,根據(jù)不同的版本,它對(duì)應(yīng)的文件:
☑ LESS版本:對(duì)應(yīng)的源碼文件為 dropdowns.less
☑ Sass版本:對(duì)應(yīng)的源碼文件為 _dropdowns.sass
☑ 編譯后的Bootstrap版本:查看bootstrap.css文件第3004行~第3130行
在使用Bootstrap框架的下拉菜單時(shí),必須調(diào)用Bootstrap框架提供的bootstrap.js文件。當(dāng)然,如果你使用的是未編譯版本,在js文件夾下你能找到一個(gè)名為“dropdown.js”的文件。你也可以調(diào)用這個(gè)js文件。不過(guò)在我們的教程中,我們統(tǒng)一調(diào)用壓縮好的“bootstrap.min.js”文件:
特別聲明:因?yàn)锽ootstrap的組件交互效果都是依賴于jQuery庫(kù)寫(xiě)的插件,所以在使用bootstrap.min.js之前一定要先加載jquery.min.js才會(huì)生效果。
我們先來(lái)看官網(wǎng)上一個(gè)簡(jiǎn)單的示例:
<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="#">下拉菜單項(xiàng)</a></li> … <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li> </ul> </div>
使用方法:
在使用Bootstrap框架中的下拉菜單組件時(shí),其結(jié)構(gòu)運(yùn)用的正確與否非常的重要,如果結(jié)構(gòu)和類名未使用正確,直接影響組件是否能正常運(yùn)用。我們來(lái)簡(jiǎn)單的看看:
1、使用一個(gè)名為“dropdown”的容器包裹了整個(gè)下拉菜單元素,示例中為:
2、使用了一個(gè)<button>按鈕做為父菜單,并且定義類名“dropdown-toggle”和自定義“data-toggle”屬性,且值必須和最外容器類名一致,此示例為:
data-toggle="dropdown"
3、下拉菜單項(xiàng)使用一個(gè)ul列表,并且定義一個(gè)類名為“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="#">蘋(píng)果</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框架中的下拉菜單組件,其下拉菜單項(xiàng)默認(rèn)是隱藏的,如下所示:
因?yàn)椤癲ropdown-menu”默認(rèn)樣式設(shè)置了“display:none”,其詳細(xì)源碼請(qǐng)查看bootstrap.css文件第3010行~第3029行:
.dropdown-menu { position: absolute;/*設(shè)置絕對(duì)定位,相對(duì)于父元素div.dropdown*/ top: 100%;/*讓下拉菜單項(xiàng)在父菜單項(xiàng)底部,如果父元素不設(shè)置相對(duì)定位,該元素相對(duì)于body元素*/ left: 0; z-index: 1000;/*讓下拉菜單項(xiàng)不被其他元素遮蓋住*/ display: none;/*默認(rèn)隱藏下拉菜單項(xiàng)*/ 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)用戶點(diǎn)擊父菜單項(xiàng)時(shí),下拉菜單將會(huì)被顯示出來(lái),當(dāng)用戶再次點(diǎn)擊時(shí),下拉菜單將繼續(xù)隱藏。
原理分析:
現(xiàn)在我們來(lái)分析一下實(shí)現(xiàn)原理,非常簡(jiǎn)單,通過(guò)js技術(shù)手段,給父容器“div.dropdown”添加或移除類名“open”來(lái)控制下拉菜單顯示或隱藏。也就是說(shuō),默認(rèn)情況,“div.dropdown”沒(méi)有類名“open”,當(dāng)用戶第一次點(diǎn)擊時(shí),“div.dropdown”會(huì)添加類名“open”;當(dāng)用戶再次點(diǎn)擊時(shí),“div.dropdown”容器中的類名“open”又會(huì)被移除。我們可以通過(guò)瀏覽器的firebug查看整個(gè)過(guò)程:
默認(rèn)情況:
用戶第一次點(diǎn)擊:
用戶再次點(diǎn)擊:
在bootstrap.css文件第3076行~第3078行,我們可以很容易發(fā)現(xiàn):
.open > .dropdown-menu { display: block; }
三、下拉菜單(下拉分隔線)
在Bootstrap框架中的下拉菜單還提供了下拉分隔線,假設(shè)下拉菜單有兩個(gè)組,那么組與組之間可以通過(guò)添加一個(gè)空的<li>,并且給這個(gè)<li>添加類名“divider”來(lái)實(shí)現(xiàn)添加下拉分隔線的功能。對(duì)應(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é)講解通過(guò)添加“divider”可以將下拉菜單分組,為了讓這個(gè)分組更明顯,還可以給每個(gè)組添加一個(gè)頭部(標(biāo)題)。如下:
對(duì)應(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>
運(yùn)行效果如下:
五、下拉菜單(對(duì)齊方式)
實(shí)現(xiàn)右對(duì)齊方法:
Bootstrap框架中下拉菜單默認(rèn)是左對(duì)齊,如果你想讓下拉菜單相對(duì)于父容器右對(duì)齊時(shí),可以在“dropdown-menu”上添加一個(gè)“pull-right”或者“dropdown-menu-right”類名,如下所示:
上面代碼中的“pull-right”類可以用“dropdown-menu-right”代替,兩個(gè)類的作用是一樣的,可從下面的源代碼中看出。
實(shí)現(xiàn)原理:
對(duì)應(yīng)的樣式如下:
/源碼請(qǐng)查看bootstrap.css文件第3030行~第3033行和3082行~第3085行/
.dropdown-menu.pull-right { right: 0; left: auto; } .dropdown-menu-right { right: 0; left: auto; }
同時(shí)一定要為.dropdown添加float:leftcss樣式。
.dropdown{ float: left; }
運(yùn)行效果如下所示:
下拉菜單與父容器左邊對(duì)齊:
與此同時(shí),還有一個(gè)類名剛好與“dropdown-menu-right”相反的類名“dropdown-menu-left”,其效果就是讓下拉菜單與父容器左邊對(duì)齊,其實(shí)就是默認(rèn)效果。
/請(qǐng)查看bootstrap.css文件第3086行~第3089行/
.dropdown-menu-left { right: auto; left: 0; }
六、下拉菜單(菜單項(xiàng)狀態(tài))
下拉菜單項(xiàng)的默認(rèn)的狀態(tài)(不用設(shè)置)有懸浮狀態(tài)(:hover)和焦點(diǎn)狀態(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; }
下拉菜單項(xiàng)除了上面兩種狀態(tài),還有當(dāng)前狀態(tài)(.active)和禁用狀態(tài)(.disabled)。這兩種狀態(tài)使用方法只需要在對(duì)應(yīng)的菜單項(xiàng)上添加對(duì)應(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="#">下拉菜單項(xiàng)</a></li> …. <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li> </ul> </div>
運(yùn)行效果如下:
對(duì)應(yīng)的樣式代碼也非常簡(jiǎn)單:
/請(qǐ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í),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附兩個(gè)精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
本文系列教程整理到:Bootstrap基礎(chǔ)教程 專題中,歡迎點(diǎn)擊學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴(kuò)展
- Bootstrap select多選下拉框?qū)崿F(xiàn)代碼
- bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整
- Bootstrap模塊dropdown實(shí)現(xiàn)下拉框響應(yīng)
- Bootstrap框架下下拉框select搜索功能
- Bootstrap Table 在指定列中添加下拉框控件并獲取所選值
- Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單
- bootstrap中selectpicker下拉框使用方法實(shí)例
- Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)
- IE11下CKEditor在Bootstrap Modal中下拉問(wèn)題的解決
相關(guān)文章
移動(dòng)設(shè)備手勢(shì)事件庫(kù)Touch.js使用詳解
這篇文章主要介紹了移動(dòng)設(shè)備手勢(shì)事件庫(kù)Touch.js的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08純js代碼實(shí)現(xiàn)未知寬高的元素在指定元素中垂直水平居中顯示
本章節(jié)介紹一下如何實(shí)現(xiàn)未知寬高的元素在指定元素下實(shí)現(xiàn)垂直水平居中效果,代碼簡(jiǎn)單易懂,需要的朋友可以參考下本文2015-09-09基于js disabled="false"不起作用的解決辦法
本篇文章是對(duì)js disabled="false"不起作用的解決辦法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06解決微信小程序防止無(wú)法回到主頁(yè)的問(wèn)題
這篇文章主要介紹了解決微信小程序防止無(wú)法回到主頁(yè)的問(wèn)題,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09layui 數(shù)據(jù)表格 點(diǎn)擊分頁(yè)按鈕 監(jiān)聽(tīng)事件的實(shí)例
今天小編就為大家分享一篇layui 數(shù)據(jù)表格 點(diǎn)擊分頁(yè)按鈕 監(jiān)聽(tīng)事件的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09一個(gè)XML格式數(shù)據(jù)轉(zhuǎn)換為圖表的例子
這個(gè)例子使用的是轉(zhuǎn)換為VML的語(yǔ)法,換成其他如SVG的語(yǔ)法,就可以轉(zhuǎn)換成為SVG圖形,單元數(shù)量可以任意加。2010-02-02