一，导航
导航条都需要.nav,基础样式为相对定位、块级显示、padding、active、disabled状态下的颜色等
1.选项卡导航
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>//第一个高亮
<li class="disabled"><a href="#">SVN</a></li>//第二个禁用
</ul>
2.胶囊式选项卡导航
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li class="disable"><a href="#">SVN</a></li>
</ul>
3.堆叠式导航
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
</ul>
4.自适应导航
在ul上添加.nav-justified样式
5.二级导航实现
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">VB.Net</a></li>
<li class="dropdown">
<a data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
</ul>
二，导航条
1.基础导航条
<nav class="navbar navbar-default"> //2.在外包装父元素容器上应用.navbar .navbar-default样式
<div class="navbar-header">
<a href="##" class="navbar-brand">啦啦啦</a>
</div>
<ul class="nav navbar-nav"> //1.在ul上设置.nav .navbar-nav样式
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
</ul>
</nav>
其中.nav .navbar .navbar-nav等控制大小、内外边距、行距等方面的样式
颜色是由.narbar-default和navbar-inverse控制
2.导航条中的表格
在.navbar容器内放置form元素，然后在form元素上应用.navbar-form样式，并用.navbar-left和.navbar-right实现左右浮动样式
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</nav>
3.导航条中的按钮、文本和链接
导航条中的按钮navbar-btn
导航条中的文本navbar-text
导航条中的普通链接navbar-link
4.顶部固定或底部固定
使用.navbar-fixed-top和.navbar-fixed-bottom进行固定，为了不阻挡其他元素，要设置body{padding-top:70px;}或body{padding-bottom:70px;}
5.响应式导航条
<nav class="navbar navbar-default">
<div class="navbar-header">//.navbar-header。该类不仅会使头部的文字看起来大一些，而且也是导航栏的头部，当小屏幕上时是唯一能够显示的导航栏内容之一。
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<!--1.navbar-toggle样式效果是：相对定位，右浮动，内容居中，焦点时取消轮廓，在大于768px时display:none，且.icon-bar图标要包在其中。2.data-toggle指以什么事件触发，在这里指折叠。3.data-target指事件的目标，在这里指折叠的对象，内容可以用class或id表示，在这里指class为navbar-responsive-collapse的div。4.-->
<span class="sr-only">Toggle Navigation</span> //隐藏
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<!--.icon-bar在.navbar-toggle中时，样式为块级显示，高度限制为3个，垂直间距为4px-->
</button>
<a href="##" class="navbar-brand">慕课网</a> //.navbar-brand规定了颜色和样式
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<!--1.collapse样式为默认隐藏,2.navbar-collapse样式为大于768px时，强制显示，块级等。3.navbar-responsive-collapse表示事件目标。4.点击时，添加class=in,显示为块-->
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
</nav>
6.反向导航条
.navbar-inverse颜色设置不同
7.面包屑导航
分层次显示
<ol class="breadcrumb">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">2013</a></li>
<li >十一月</li>
</ol>
三，分页导航
1.页码分页
带有多个页码
用法：在ul上设置.pagination样式，li上设置页码链接
<ul class="pagination">
<li><a href="#">«</a>
<li class='active'><a href="#">1</a></li>
<li class='disabled'><a href="#">2</a></li>
</li> <li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li> </ul>
2.翻页
<ul class="pager">
<li class='previous'><a href="#">Previous</a></li>
<li class='pull-right'><a href="#">Next</a></li>
</ul>
