1杨伙、導(dǎo)航（基礎(chǔ)樣式）
導(dǎo)航對(duì)于一位前端人員來說并不陌生◎救茫可以說導(dǎo)航是一個(gè)網(wǎng)站重要的元素組件之一乾忱，可以便于用戶查找網(wǎng)站所提供的各項(xiàng)功能服務(wù)。導(dǎo)航的制作方法也是千奇百怪历极，五花八門窄瘟。在這一節(jié)中將向大家介紹如何使用Bootstrap框架制作各式各樣的導(dǎo)航。
Bootstrap框架中制作導(dǎo)航條主要通過“.nav”樣式趟卸。默認(rèn)的“.nav”樣式不提供默認(rèn)的導(dǎo)航樣式蹄葱，必須附加另外一個(gè)樣式才會(huì)有效，比如“nav-tabs”衰腌、“nav-pills”之類新蟆。比如一個(gè)tab導(dǎo)航條的例子，他的實(shí)現(xiàn)方法就是為ul標(biāo)簽加入.nav和nav-tabs兩個(gè)類樣式右蕊。
2琼稻、導(dǎo)航（標(biāo)簽形tab導(dǎo)航）
標(biāo)簽形導(dǎo)航，也稱為選項(xiàng)卡導(dǎo)航饶囚。特別是在很多內(nèi)容分塊顯示的時(shí)帕翻，使用這種選項(xiàng)卡來分組十分適合。
標(biāo)簽形導(dǎo)航是通過“nav-tabs”樣式來實(shí)現(xiàn)萝风。在制作標(biāo)簽形導(dǎo)航時(shí)需要在原導(dǎo)航“nav”上追加此類名
3嘀掸、導(dǎo)航（膠囊形(pills)導(dǎo)航）
膠囊形（pills）導(dǎo)航聽起來有點(diǎn)別扭，因?yàn)槠渫庑慰雌饋碛悬c(diǎn)像膠囊形狀规惰。但其更像我們平時(shí)看到的大眾形導(dǎo)航睬塌。當(dāng)前項(xiàng)高亮顯示，并帶有圓角效果。其實(shí)現(xiàn)方法和“nav-tabs”類似揩晴，同樣的結(jié)構(gòu)勋陪，只需要把類名“nav-tabs”換成“nav-pills”
4、導(dǎo)航（垂直堆疊的導(dǎo)航）
在實(shí)際運(yùn)用當(dāng)中硫兰，除了水平導(dǎo)航之外诅愚，還有垂直導(dǎo)航，就類似前面介紹的垂直排列按鈕一樣劫映。制作垂直堆疊導(dǎo)航只需要在“nav-pills”的基礎(chǔ)上添加一個(gè)“nav-stacked”類名即可
5违孝、導(dǎo)航加下拉菜單（二級(jí)導(dǎo)航）
很多時(shí)候，在Web頁(yè)面中是離不開二級(jí)導(dǎo)航的效果泳赋。那么在Bootstrap框架中制作二級(jí)導(dǎo)航就更容易了雌桑。只需要將li當(dāng)作父容器，使類名“dropdown”祖今，同時(shí)在li中嵌套另一個(gè)列表ul筹燕。
下拉菜單的標(biāo)簽頁(yè)：
<ul class="nav nav-tabs">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">dropdwn
<span class=""></span></a>
<ul class=dropdown-menu>......</ul>
折疊菜單：標(biāo)記可以在<a href="id">也可以在<button data-toggle="collapse" data-target="id">
<div class="nav-collapse collapse" id="">
6、響應(yīng)式導(dǎo)航
<div class="navbar navbar-inverse " role="navigation">
<div class="container">
<!-- 導(dǎo)航條頭部 -->
<div class="navbar-header">
<a class="navbar-brand"></a>
<!-- 折疊菜單觸發(fā)按鈕 -->
<button data-toggle="collapse" data-target="#item1" class="navbar-toggle type=" button >
<span class="glyphicon glyphicon-list"></span>
</button>
</div>
<a href="#" class="navbar-link navbar-right navbar-text">注冊(cè)</a>
<span class="navbar-text navbar-right"> | </span>
<button type="button" class="btn btn-success navbar-btn navbar-right">登錄</button>
<form class="navbar-form navbar-right">
<div class="form-group has-feedback">
<label class="sr-only" for="kw">搜索：</label>
<input class="form-control" type="text" id="kw">
<span class="form-control-feedback glyphicon glyphicon-search"></span>
</div>
</form>
<!-- 導(dǎo)航條折疊部分 -->
<div id="item1" class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">豬老板</a>
</li>
<li class="active">
<a href="#">屎老板</a>
</li>
<li>
<a href="#">黃老板</a>
</li>
</ul>
</div>
</div>
</div>
