知識(shí)點(diǎn)：
1啃炸、導(dǎo)航
2鞍泉、導(dǎo)航條
3、面包屑導(dǎo)航
1肮帐、導(dǎo)航（標(biāo)簽） nav
1）標(biāo)簽頁(yè) nav-tabs
<ul class="nav nav-tabs">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
2）膠囊式標(biāo)簽頁(yè) nav-pills
<ul class="nav nav-pills">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
3）垂直的膠囊式標(biāo)簽頁(yè) nav-stacked
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
4）兩端對(duì)齊的標(biāo)簽頁(yè) nav-justified
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
5）禁用鏈接 disabled
<ul class="nav nav-tabs">
<li class="active"><a href="">Home</a></li>
<li class="disabled"><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
6）帶有下拉菜單的標(biāo)簽
<ul class="nav nav-tabs">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">關(guān)于</a></li>
<li><a href="">資訊</a></li>
<li><a href="">通訊</a></li>
</ul>
</li>
</ul>
7）帶下拉菜單的膠囊式標(biāo)簽
<ul class="nav nav-pills">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">關(guān)于</a></li>
<li><a href="">資訊</a></li>
<li><a href="">通訊</a></li>
</ul>
</li>
</ul>
2咖驮、導(dǎo)航條 navbar <nav>標(biāo)簽中添加 class .navbar、.navbar-default
1）默認(rèn)的導(dǎo)航欄
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="">潭州教育</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">關(guān)于</a></li>
<li><a href="">資訊</a></li>
<li><a href="">通訊</a></li>
</ul>
</li>
</ul>
</nav>
2）響應(yīng)式的導(dǎo)航欄
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">潭州教育</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">關(guān)于</a></li>
<li><a href="">資訊</a></li>
<li><a href="">通訊</a></li>
</ul>
</li>
</ul>
</div>
</nav>
3）導(dǎo)航欄中的表單
<form action="" class="navbar-form navbar-right">
<div class="form-group">
<input class="form-control" type="text" placeholder="Search"/>
</div>
<button class="btn btn-default">Search</button>
</form>
4）導(dǎo)航欄中的按鈕 navbar-btn
<button class="btn btn-default navbar-btn">Submit</button>
5）導(dǎo)航欄中的文本 navbar-text
<p class="navbar-text">Signed in as Thomas</p>
6）固定到頂部训枢、底部 navbar-fixed-top navbar-fixed-bottom
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="">潭州教育</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">關(guān)于</a></li>
<li><a href="">資訊</a></li>
<li><a href="">通訊</a></li>
</ul>
</li>
</ul>
</nav>
7）靜態(tài)的頂部 navbar-static-top
8）倒置的導(dǎo)航欄 帶有黑色背景白色文本的倒置的導(dǎo)航欄 navbar-inverse
3托修、面包屑導(dǎo)航
<ul class="breadcrumb">
<li><a href="">首頁(yè)</a></li>
<li><a href="">列表</a></li>
<li class="active">詳情</li>
</ul>