欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap源碼解讀下拉菜單(4)

 更新時(shí)間:2016年12月23日 09:12:40   作者:藝術(shù)就是爆炸  
這篇文章主要源碼解讀了Bootstrap下拉菜單,介紹了Bootstrap各式各樣的下拉菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

源碼解讀Bootstrap下拉菜單

基本用法

在使用Bootstrap框架的下拉菜單時(shí),必須調(diào)用Bootstrap框架提供的bootstrap.js文件。因?yàn)锽ootstrap的組件交互效果都是依賴于jQuery庫(kù)寫的插件,所以在使用bootstrap.min.js之前一定要先加載jquery.min.js才會(huì)生效果。
使用方法如下:
1. 使用一個(gè)名為“dropdown”的容器包裹了整個(gè)下拉菜單元素:<div class="dropdown"></div>
2. 使用一個(gè)<button>按鈕做為父菜單,并且定義類名“dropdown-toggle”和自定義“data-toggle”屬性,且值必須和最外容器類名一致:data-toggle=”dropdown”
3. 下拉菜單項(xiàng)使用一個(gè)ul列表,并且定義一個(gè)類名為“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)時(shí),下拉菜單將會(huì)被顯示出來,再次點(diǎn)擊時(shí),下拉菜單將繼續(xù)隱藏。實(shí)現(xiàn)原理非常簡(jiǎn)單,通過js,給父容器“div.dropdown”添加或移除類名“open”來控制下拉菜單顯示或隱藏。也就是說,默認(rèn)情況,“div.dropdown”沒有類名“open”,當(dāng)用戶第一次點(diǎn)擊時(shí),“div.dropdown”會(huì)添加類名“open”;當(dāng)用戶再次點(diǎn)擊時(shí),“div.dropdown”容器中的類名“open”又會(huì)被移除。實(shí)現(xiàn)源碼如下:

.open > .dropdown-menu {
 display: block;
}

下拉分隔線

下拉菜單還提供了下拉分隔線,假設(shè)下拉菜單有兩個(gè)組,那么組與組之間可以通過添加一個(gè)空的<li>,并且給這個(gè)<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)題

組與組之間可以添加一個(gè)<li>,并添加類名“dropdown-header”可以給每個(gè)組添加一個(gè)頭部(標(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;
}

對(duì)齊方式

下拉菜單默認(rèn)是左對(duì)齊,如果你想讓下拉菜單相對(duì)于父容器右對(duì)齊時(shí),可以在“dropdown-menu”上添加一個(gè)“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;
}

不過這樣的話,下拉列表會(huì)跑到頁(yè)面的最右邊去,我們顯然不希望這樣,所以一定要為.dropdown添加float:left的css樣式:

.dropdown{
 float: left;
}

另外,還有個(gè)類名“dropdown-menu-left”,其實(shí)就是下拉菜單與父容器左邊對(duì)齊的默認(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)使用方法只需要在對(duì)應(yīng)的菜單項(xiàng)<li>上添加對(duì)應(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í)。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論