bootstrap导航、导航条及导航翻页相关详解

一，导航

导航条都需要.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="#">&laquo;</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="#">&raquo;</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>