知识点：
1、导航
2、导航条
3、面包屑导航
1、导航（标签） nav
1）标签页 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）胶囊式标签页 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）垂直的胶囊式标签页 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）两端对齐的标签页 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）带有下拉菜单的标签
<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="">关于</a></li>
<li><a href="">资讯</a></li>
<li><a href="">通讯</a></li>
</ul>
</li>
</ul>
7）带下拉菜单的胶囊式标签
<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="">关于</a></li>
<li><a href="">资讯</a></li>
<li><a href="">通讯</a></li>
</ul>
</li>
</ul>
2、导航条 navbar <nav>标签中添加 class .navbar、.navbar-default
1）默认的导航栏
<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="">关于</a></li>
<li><a href="">资讯</a></li>
<li><a href="">通讯</a></li>
</ul>
</li>
</ul>
</nav>
2）响应式的导航栏
<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="">关于</a></li>
<li><a href="">资讯</a></li>
<li><a href="">通讯</a></li>
</ul>
</li>
</ul>
</div>
</nav>
3）导航栏中的表单
<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）导航栏中的按钮 navbar-btn
<button class="btn btn-default navbar-btn">Submit</button>
5）导航栏中的文本 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="">关于</a></li>
<li><a href="">资讯</a></li>
<li><a href="">通讯</a></li>
</ul>
</li>
</ul>
</nav>
7）静态的顶部 navbar-static-top
8）倒置的导航栏 带有黑色背景白色文本的倒置的导航栏 navbar-inverse
3、面包屑导航
<ul class="breadcrumb">
<li><a href="">首页</a></li>
<li><a href="">列表</a></li>
<li class="active">详情</li>
</ul>