Bootstrap源碼解讀下拉菜單(4)
源碼解讀Bootstrap下拉菜單
基本用法
在使用Bootstrap框架的下拉菜單時,必須調(diào)用Bootstrap框架提供的bootstrap.js文件。因?yàn)锽ootstrap的組件交互效果都是依賴于jQuery庫寫的插件,所以在使用bootstrap.min.js之前一定要先加載jquery.min.js才會生效果。
使用方法如下:
1. 使用一個名為“dropdown”的容器包裹了整個下拉菜單元素:<div class="dropdown"></div>
2. 使用一個<button>按鈕做為父菜單,并且定義類名“dropdown-toggle”和自定義“data-toggle”屬性,且值必須和最外容器類名一致:data-toggle=”dropdown”
3. 下拉菜單項(xiàng)使用一個ul列表,并且定義一個類名為“dropdown-menu”:<ul class="dropdown-menu">
完整如下:
<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>
實(shí)現(xiàn)原理
Bootstrap框架中的下拉菜單組件,其下拉菜單項(xiàng)默認(rèn)是隱藏的,因?yàn)椤癲ropdown-menu”默認(rèn)樣式設(shè)置了“display:none”。實(shí)現(xiàn)源碼如下:
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; 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)時,下拉菜單將會被顯示出來,再次點(diǎn)擊時,下拉菜單將繼續(xù)隱藏。實(shí)現(xiàn)原理非常簡單,通過js,給父容器“div.dropdown”添加或移除類名“open”來控制下拉菜單顯示或隱藏。也就是說,默認(rèn)情況,“div.dropdown”沒有類名“open”,當(dāng)用戶第一次點(diǎn)擊時,“div.dropdown”會添加類名“open”;當(dāng)用戶再次點(diǎn)擊時,“div.dropdown”容器中的類名“open”又會被移除。實(shí)現(xiàn)源碼如下:
.open > .dropdown-menu { display: block; }
下拉分隔線
下拉菜單還提供了下拉分隔線,假設(shè)下拉菜單有兩個組,那么組與組之間可以通過添加一個空的<li>,并且給這個<li>添加類名“divider”來實(shí)現(xiàn)添加下拉分隔線的功能。
例如: <li role="presentation" class="divider"></li>
實(shí)現(xiàn)源碼如下:
.dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; }
菜單標(biāo)題
組與組之間可以添加一個<li>,并添加類名“dropdown-header”可以給每個組添加一個頭部(標(biāo)題)。
例如:<li role="presentation" class="dropdown-header">第一部分菜單頭部</li>
實(shí)現(xiàn)源碼:
.dropdown-header { display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; color: #999; }
對齊方式
下拉菜單默認(rèn)是左對齊,如果你想讓下拉菜單相對于父容器右對齊時,可以在“dropdown-menu”上添加一個“pull-right”或者“dropdown-menu-right”類名,
例如:<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
實(shí)現(xiàn)源碼:
.dropdown-menu.pull-right { right: 0; left: auto; } .dropdown-menu-right { right: 0; left: auto; }
不過這樣的話,下拉列表會跑到頁面的最右邊去,我們顯然不希望這樣,所以一定要為.dropdown添加float:left的css樣式:
.dropdown{ float: left; }
另外,還有個類名“dropdown-menu-left”,其實(shí)就是下拉菜單與父容器左邊對齊的默認(rèn)效果,
實(shí)現(xiàn)源碼:
.dropdown-menu-left { right: auto; left: 0; }
菜單項(xiàng)狀態(tài)
下拉菜單項(xiàng)的默認(rèn)的狀態(tài)有懸浮狀態(tài)(:hover)和焦點(diǎn)狀態(tài)(:focus),實(shí)現(xiàn)源碼如下:
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #262626; text-decoration: none; background-color: #f5f5f5; }
另外還有當(dāng)前狀態(tài)(.active)和禁用狀態(tài)(.disabled)。這兩種狀態(tài)使用方法只需要在對應(yīng)的菜單項(xiàng)<li>上添加對應(yīng)的類名“active”或“disabled”。
實(shí)現(xiàn)源碼如下:
.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); }
本文系列教程整理到:Bootstrap基礎(chǔ)教程 專題中,歡迎點(diǎn)擊學(xué)習(xí)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
移動端Ionic App 資訊上下循環(huán)滾動的實(shí)現(xiàn)代碼(跑馬燈效果)
這篇文章主要介紹了移動端Ionic App 資訊上下循環(huán)滾動的實(shí)現(xiàn)代碼,實(shí)現(xiàn)方法需要借助jQuery庫的選擇器和動畫函數(shù),并且把jquery的操作封裝到指令里,具體指令代碼大家通過本文學(xué)習(xí)吧2017-08-08微信小程序?qū)崿F(xiàn)默認(rèn)第一個選中變色效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)默認(rèn)第一個選中變色效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07js 將json字符串轉(zhuǎn)換為json對象的方法解析
將json字符串轉(zhuǎn)換為json對象的方法。在數(shù)據(jù)傳輸過程中,json是以文本,即字符串的形式傳遞的,而JS操作的是JSON對象,所以,JSON對象和JSON字符串之間的相互轉(zhuǎn)換是關(guān)鍵2013-11-11頁面間固定參數(shù),通過cookie傳值的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄撁骈g固定參數(shù),通過cookie傳值的實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05setinterval()與clearInterval()JS函數(shù)的調(diào)用方法
這篇文章主要介紹了setinterval()與clearInterval()JS函數(shù)的調(diào)用方法,實(shí)例分析了setinterval()與clearInterval()的語法結(jié)構(gòu)及使用技巧,需要的朋友可以參考下2015-01-01JavaScript實(shí)現(xiàn)圖片懶加載的三種方案詳解
圖片懶加載,當(dāng)圖片出現(xiàn)在可視區(qū)域再進(jìn)行加載,提升用戶的體驗(yàn),這篇文章主要為大家整理了三個常用的圖片懶加載實(shí)現(xiàn)方法,希望對大家有所幫助2023-12-12用JS實(shí)現(xiàn)HTML標(biāo)簽替換效果
用JS實(shí)現(xiàn)HTML標(biāo)簽替換效果...2007-06-06