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

Bootstrap每天必學(xué)之下拉菜單

 更新時(shí)間：2015年11月25日 09:50:01   作者：小平果118  
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文件。不過在我們的教程中，我們統(tǒng)一調(diào)用壓縮好的“bootstrap.min.js”文件：

復(fù)制代碼 代碼如下:
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

特別聲明：因?yàn)锽ootstrap的組件交互效果都是依賴于jQuery庫寫的插件，所以在使用bootstrap.min.js之前一定要先加載jquery.min.js才會(huì)生效果。

我們先來看官網(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)用。我們來簡(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="#">蘋果</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ì)被顯示出來，當(dāng)用戶再次點(diǎn)擊時(shí)，下拉菜單將繼續(xù)隱藏。

原理分析：

現(xiàn)在我們來分析一下實(shí)現(xiàn)原理，非常簡(jiǎn)單，通過js技術(shù)手段，給父容器“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ì)被移除。我們可以通過瀏覽器的firebug查看整個(gè)過程：

默認(rèn)情況：

用戶第一次點(diǎn)擊：

用戶再次點(diǎn)擊：

在bootstrap.css文件第3076行～第3078行，我們可以很容易發(fā)現(xiàn)：

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

三、下拉菜單（下拉分隔線）

在Bootstrap框架中的下拉菜單還提供了下拉分隔線，假設(shè)下拉菜單有兩個(gè)組，那么組與組之間可以通過添加一個(gè)空的<li>，并且給這個(gè)<li>添加類名“divider”來實(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é)講解通過添加“divider”可以將下拉菜單分組，為了讓這個(gè)分組更明顯，還可以給每個(gè)組添加一個(gè)頭部（標(biāo)題）。如下：

復(fù)制代碼 代碼如下:
<li role="presentation" class="dropdown-header">第一部分菜單頭部</li>

對(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”類名，如下所示：

復(fù)制代碼 代碼如下:
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">

上面代碼中的“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í)。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論