Bootstrap菜單按鈕及導(dǎo)航實(shí)例解析
下拉菜單
特別聲明：因?yàn)锽ootstrap的組件交互效果都是依賴(lài)于jQuery庫(kù)寫(xiě)的插件，所以在使用bootstrap.min.js之前一定要先加載jquery.min.js才會(huì)生效果。
<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"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li> </ul> </div> <!--jquery一定要在bootstrap之前導(dǎo)入,后者是在前者的基礎(chǔ)上面實(shí)現(xiàn)的--> <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>
效果圖:
實(shí)現(xiàn)原理:
在剛開(kāi)始的時(shí)候 ,其中class中有一個(gè)display:none;下面看一下css
.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);
}
然后利用點(diǎn)擊事件,控制標(biāo)簽class的移除和添加,用來(lái)實(shí)現(xiàn)顯示和隱藏
通過(guò)js技術(shù)手段，給父容器“div.dropdown”添加或移除類(lèi)名“open”來(lái)控制下拉菜單顯示或隱藏。也就是說(shuō)，默認(rèn)情況，
“div.dropdown”沒(méi)有類(lèi)名“open”，當(dāng)用戶第一次點(diǎn)擊時(shí)，“div.dropdown”會(huì)添加類(lèi)名“open”；當(dāng)用戶再次點(diǎn)擊時(shí)，“div.dropdown”容器中的類(lèi)名“open”又會(huì)被移除。我們可以通過(guò)瀏覽器的firebug查看整個(gè)過(guò)程：
默認(rèn)情況：
用戶第一次點(diǎn)擊：
用戶再次點(diǎn)擊：
open的css
.open > .dropdown-menu {
display: block;
}
下拉菜單分割線
還是上面的例子,再貼上代碼!看看效果,還是要引入js文件!后面就不多少了!
<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"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a> </li> <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í)際上就多了這么一行代碼
<li role="presentation" class="divider"></li>
下拉菜單 菜單標(biāo)題
直接上代碼
<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="#">下拉菜單項(xiàng)</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a> </li> <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">第二部分菜單頭部</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a> </li> </ul> </div>
效果圖:
其實(shí)也就增加了一個(gè)代碼:
<li role="presentation" class="dropdown-header">第二部分菜單頭部</li>
下拉菜單 對(duì)齊方式
<h4>使用pull-right類(lèi)使下拉菜單與父容器右邊對(duì)齊</h4> <div class="dropdown" style="float: left;"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span class="caret"></span> </button> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a> </li> <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> <br /> <br /> <h4>使用dropdown-menu-right類(lèi)使下拉菜單與父容器右邊對(duì)齊</h4> <div class="dropdown" style="float: left;"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a> </li> <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> <br /> <br /> <h4>下拉菜單與父容器左邊對(duì)齊</h4> <div class="dropdown" style="float: left;"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a> </li> <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í)際上是在“dropdown-menu”上添加一個(gè)“pull-right”或者“dropdown-menu-right”類(lèi)名,其中css的樣式代碼
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
下拉菜單（菜單項(xiàng)狀態(tài)）
下拉菜單項(xiàng)的默認(rèn)的狀態(tài)（不用設(shè)置）有懸浮狀態(tài)（:hover）和焦點(diǎn)狀態(tài)（:focus）
下拉菜單項(xiàng)除了上面兩種狀態(tài)，還有當(dāng)前狀態(tài)（.active）和禁用狀態(tài)（.disabled）。
<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> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li> </ul> </div>
鼠標(biāo)放上去,在禁用的上面會(huì)顯示一個(gè)禁止的標(biāo)志,截圖不能截進(jìn)去!
按鈕（按鈕組）
單個(gè)按鈕在Web頁(yè)面中的運(yùn)用有時(shí)候并不能滿足我們的業(yè)務(wù)需求，常常會(huì)看到將多個(gè)按鈕組合在一起使用，比如富文本編輯器里的一組小圖標(biāo)按鈕等
<div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button> </div>
效果圖:
在這里可以根據(jù)不同的圖標(biāo)生成不同的圖標(biāo)按鈕!可以在此網(wǎng)址查看:http://getbootstrap.com/components/#glyphicons
按鈕（按鈕工具欄）
在富文本編輯器中，將按鈕組分組排列在一起，比如說(shuō)復(fù)制、剪切和粘貼一組；左對(duì)齊、中間對(duì)齊、右對(duì)齊和兩端對(duì)齊一組，如下圖所示：
那么Bootstrap框架按鈕工具欄也提供了這樣的制作方法，你只需要將按鈕組“btn-group”按組放在一個(gè)大的容器“btn-toolbar”中，如下所示：
<div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button> </div> </div>
效果圖:
圖上的第二組圖圖標(biāo)是加上了一個(gè)class:
btn-group-lg:大按鈕組
btn-group-sm:小按鈕組
btn-group-xs:超小按鈕組
只需要在“.btn-group”類(lèi)名上追加對(duì)應(yīng)的類(lèi)名，就可以得到不同大小的按鈕組。
按鈕（嵌套分組）
很多時(shí)候，我們常把下拉菜單和普通的按鈕組排列在一起，實(shí)現(xiàn)類(lèi)似于導(dǎo)航菜單的效果
使用的時(shí)候，只需要把當(dāng)初制作下拉菜單的“dropdown”的容器換成“btn-group”，并且和普通的按鈕放在同一級(jí)。
<div class="btn-group"> <button type="button" class="btn btn-default">首頁(yè)</button> <button type="button" class="btn btn-default">產(chǎn)品展示</button> <button type="button" class="btn btn-default">案例分析</button> <button type="button" class="btn btn-default">聯(lián)系我們</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">關(guān)于我們<span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-left"> <li><a href="##">公司簡(jiǎn)介</a></li> <li><a href="##">企業(yè)文化</a></li> <li><a href="##">組織結(jié)構(gòu)</a></li> <li><a href="##">客服服務(wù)</a></li> </ul> </div> </div>
效果圖:
按鈕（垂直分組）
前面看到的示例，按鈕組都是水平顯示的。但在實(shí)際運(yùn)用當(dāng)中，總會(huì)碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風(fēng)格。我們只需要把水平分組的“btn-group”類(lèi)名換成“btn-group-vertical”即可
<div class="btn-group-vertical"> <button class="btn btn-default" type="button">首頁(yè)</button> <button class="btn btn-default" type="button">產(chǎn)品展示</button> <button class="btn btn-default" type="button">案例分析</button> <button class="btn btn-default" type="button">聯(lián)系我們</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">關(guān)于我們<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司簡(jiǎn)介</a></li> <li><a href="##">企業(yè)文化</a></li> <li><a href="##">組織結(jié)構(gòu)</a></li> <li><a href="##">客服服務(wù)</a></li> </ul> </div> </div>
效果圖:
按鈕（等分按鈕）
等分按鈕的效果在移動(dòng)端上特別的實(shí)用。整個(gè)按鈕組寬度是容器的100%，而按鈕組里面的每個(gè)按鈕平分整個(gè)容器寬度。例如，如果你按鈕組里面有五個(gè)按鈕，那么每個(gè)按鈕是20%的寬度，如果有四個(gè)按鈕，那么每個(gè)按鈕是25%寬度，以此類(lèi)推。
等分按鈕也常被稱(chēng)為是自適應(yīng)分組按鈕，其實(shí)現(xiàn)方法也非常的簡(jiǎn)單，只需要在按鈕組“btn-group”上追加一個(gè)“btn-group-justified”類(lèi)名，如下所示：
<div class="btn-wrap"> <div class="btn-group btn-group-justified"> <a class="btn btn-default" href="#">首頁(yè)</a> <a class="btn btn-default" href="#">產(chǎn)品展示</a> <a class="btn btn-default" href="#">案例分析</a> <a class="btn btn-default" href="#">聯(lián)系我們</a> </div> </div>
修改一下屏幕的寬度
特別聲明：在制作等分按鈕組時(shí)，請(qǐng)盡量使用<a>標(biāo)簽元素來(lái)制作按鈕，因?yàn)槭褂?lt;button>標(biāo)簽元素時(shí)，使用display:table在部分瀏覽器下支持并不友好。
按鈕的向下向上三角形
按鈕的向下三角形，我們是通過(guò)在標(biāo)簽中添加一個(gè)“”標(biāo)簽元素，并且命名為“caret”:
有的時(shí)候我們的下拉菜單會(huì)向上彈起（接下來(lái)一個(gè)小節(jié)會(huì)介紹），這個(gè)時(shí)候我們的三角方向需要朝上顯示，實(shí)現(xiàn)方法：需要在“.btn-group”類(lèi)上追加“dropup”類(lèi)名（這也是做向上彈起下拉菜單要用的類(lèi)名）。
<div class="btn-group dropup"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">按鈕下拉菜單項(xiàng)</a></li> <li><a href="##">按鈕下拉菜單項(xiàng)</a></li> <li><a href="##">按鈕下拉菜單項(xiàng)</a></li> <li><a href="##">按鈕下拉菜單項(xiàng)</a></li> </ul> </div>
效果圖:
導(dǎo)航（基礎(chǔ)樣式）
導(dǎo)航對(duì)于一位前端人員來(lái)說(shuō)并不陌生?？梢哉f(shuō)導(dǎo)航是一個(gè)網(wǎng)站重要的元素組件之一，可以便于用戶查找網(wǎng)站所提供的各項(xiàng)功能服務(wù)。導(dǎo)航的制作方法也是千奇百怪，五花八門(mén)。
Bootstrap框架中制作導(dǎo)航條主要通過(guò)“.nav”樣式。默認(rèn)的“.nav”樣式不提供默認(rèn)的導(dǎo)航樣式，必須附加另外一個(gè)樣式才會(huì)有效，比如“nav-tabs”、“nav-pills”之類(lèi)。比如右側(cè)代碼編輯器中就有一個(gè)tab導(dǎo)航條的例子，他的實(shí)現(xiàn)方法就是為ul標(biāo)簽加入.nav和nav-tabs兩個(gè)類(lèi)樣式。
<ul class="nav nav-tabs"> <li><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>
導(dǎo)航（標(biāo)簽形tab導(dǎo)航）
標(biāo)簽形導(dǎo)航，也稱(chēng)為選項(xiàng)卡導(dǎo)航。特別是在很多內(nèi)容分塊顯示的時(shí)，使用這種選項(xiàng)卡來(lái)分組十分適合。
標(biāo)簽形導(dǎo)航是通過(guò)“nav-tabs”樣式來(lái)實(shí)現(xiàn)。在制作標(biāo)簽形導(dǎo)航時(shí)需要在原導(dǎo)航“nav”上追加此類(lèi)名
<ul class="nav nav-tabs"> <li><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>
其實(shí)上例的效果和我們平時(shí)看到的選項(xiàng)卡效果并不一致。一般情況之下，選項(xiàng)卡教會(huì)有一個(gè)當(dāng)前選中項(xiàng)。其實(shí)在Bootstrap框架也相應(yīng)提供了。假設(shè)我們想讓“Home”項(xiàng)為當(dāng)前選中項(xiàng)，只需要在其標(biāo)簽上添加類(lèi)名“class=”active””即可
<ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>
效果圖:
除了當(dāng)前項(xiàng)之外，有的選項(xiàng)卡還帶有禁用狀態(tài)，實(shí)現(xiàn)這樣的效果，只需要在標(biāo)簽項(xiàng)上添加“class=”disabled””即可：
<ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
效果圖:
導(dǎo)航（膠囊形(pills)導(dǎo)航）
膠囊形（pills）導(dǎo)航聽(tīng)起來(lái)有點(diǎn)別扭，因?yàn)槠渫庑慰雌饋?lái)有點(diǎn)像膠囊形狀。但其更像我們平時(shí)看到的大眾形導(dǎo)航。當(dāng)前項(xiàng)高亮顯示，并帶有圓角效果。其實(shí)現(xiàn)方法和“nav-tabs”類(lèi)似，同樣的結(jié)構(gòu)，只需要把類(lèi)名“nav-tabs”換成“nav-pills”即可：
<ul class="nav nav-pills"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
效果圖:
和上面說(shuō)的是一樣的!
導(dǎo)航（垂直堆疊的導(dǎo)航）
在實(shí)際運(yùn)用當(dāng)中，除了水平導(dǎo)航之外，還有垂直導(dǎo)航，就類(lèi)似前面介紹的垂直排列按鈕一樣。制作垂直堆疊導(dǎo)航只需要在“nav-pills”的基礎(chǔ)上添加一個(gè)“nav-stacked”類(lèi)名即可
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
效果圖:
在下拉菜單一節(jié)中，下拉菜單組與組之間有一個(gè)分隔線。其實(shí)在垂直堆疊導(dǎo)航也具有這樣的效果，只需要添加在導(dǎo)航項(xiàng)之間添加“
”即可：
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="nav-divider"></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
效果圖:
自適應(yīng)導(dǎo)航（使用）
自適應(yīng)導(dǎo)航指的是導(dǎo)航占據(jù)容器全部寬度，而且菜單項(xiàng)可以像表格的單元格一樣自適應(yīng)寬度。自適應(yīng)導(dǎo)航和前面使用“btn-group-justified”制作的自適應(yīng)按鈕組是一樣的。只不過(guò)在制作自適應(yīng)導(dǎo)航時(shí)更換了另一個(gè)類(lèi)名“nav-justified”。當(dāng)然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。如：
<ul class="nav nav-tabs nav-justified"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>
效果圖:
這是不同屏幕
導(dǎo)航加下拉菜單（二級(jí)導(dǎo)航）
前面介紹的都是使用Bootstrap框架制作一級(jí)導(dǎo)航，但很多時(shí)候，在Web頁(yè)面中是離不開(kāi)二級(jí)導(dǎo)航的效果。那么在Bootstrap框架中制作二級(jí)導(dǎo)航就更容易了。只需要將li當(dāng)作父容器，使用類(lèi)名“dropdown”，同時(shí)在li中嵌套另一個(gè)列表ul，使用前面介紹下拉菜單的方法就可以：
<ul class="nav nav-pills "> <li class="active"><a href="##">首頁(yè)</a></li> <li class="dropdown"> <a href="##" class="dropdown-toggle " data-toggle="dropdown">教程<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul> </li> <li><a href="##">關(guān)于我們</a></li> </ul>
效果圖:
通過(guò)瀏覽器調(diào)試工具，不難發(fā)現(xiàn)，點(diǎn)擊有二級(jí)導(dǎo)航的菜單項(xiàng)，會(huì)自動(dòng)添加“open”類(lèi)名，再次點(diǎn)擊就會(huì)刪除添加的“open”類(lèi)名和那個(gè)下拉菜單的實(shí)現(xiàn)原理是一樣的!
那么在二級(jí)導(dǎo)航中使用分割線,只需要添加“<li class=”nav-divider”></li>”這樣的一個(gè)空標(biāo)簽就可以了。
面包屑式導(dǎo)航
面包屑(Breadcrumb)一般用于導(dǎo)航，主要是起的作用是告訴用戶現(xiàn)在所處頁(yè)面的位置（當(dāng)前位置）
<ol class="breadcrumb"> <li><a href="#">首頁(yè)</a></li> <li><a href="#">我的書(shū)</a></li> <li class="active">《圖解CSS3》</li> </ol>
效果圖:
相關(guān)文章
自動(dòng)完成的搜索框javascript實(shí)現(xiàn)
這篇文章主要介紹了自動(dòng)完成的搜索框javascript實(shí)現(xiàn)代碼，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了詳解JWT token心得與使用實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家介紹了Javascript File和Blob，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
js獲取RadioButtonList的Value/Text及選中值等信息實(shí)現(xiàn)代碼
RadioButtonList的Value,Text及選中值等信息想必有很多的朋友都想獲取到，接下來(lái)將為你介紹下如何使用js獲取，代碼很詳細(xì)，感興趣的你可以參考下，或許對(duì)你有所幫助2013-03-03
這篇文章主要介紹了JavaScript中字符串的常用操作方法及js特殊字符,需要的朋友可以參考下2018-03-03
JS判斷兩個(gè)對(duì)象內(nèi)容是否相等的方法示例
這篇文章主要介紹了JS判斷兩個(gè)對(duì)象內(nèi)容是否相等的方法,結(jié)合具體實(shí)例形式分析了javascript針對(duì)字符串、數(shù)組及對(duì)象的相關(guān)判斷技巧,需要的朋友可以參考下2017-04-04
兼容IE/Firefox/Opera/Safari的檢測(cè)頁(yè)面裝載完畢的腳本Ext.onReady的實(shí)現(xiàn)
其中對(duì)于IE的檢測(cè)很有意思。 以上代碼，整理自Extjs的腳本，完全可以代替 Ext.onReady使用。2009-07-07
js中string和number類(lèi)型互轉(zhuǎn)換技巧(分享)
下面小編就為大家?guī)?lái)一篇js中string和number類(lèi)型互轉(zhuǎn)換技巧(分享)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
這篇文章主要幫助大家理解學(xué)習(xí)javascript封裝，通過(guò)封裝可以強(qiáng)制實(shí)施信息隱藏，本文為大家分析了封裝的利弊，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了詳解javascript數(shù)組去重問(wèn)題，根據(jù)面試時(shí)做的一道數(shù)組去重問(wèn)題的解題思路整理的，分享給大家。2015-11-11