分页导航（带页码的分页导航）

<ul class="pagination">
   <li><a href=http://www.mamicode.com/"#">«>
运行效果：
实现原理：
从效果中可以看出，当前状态页码会高亮显示，而且不能点击。而最后一页是禁用状态，也不能点击。实现样式：
/*bootstrap.css文件第4170行~第4192行*/
.pagination> .active > a,
.pagination> .active > span,
.pagination> .active >a:hover,
.pagination> .active >span:hover,
.pagination> .active >a:focus,
.pagination> .active >span:focus {
z-index: 2;
color: #fff;
cursor: default;
background-color: #428bca;
border-color: #428bca;
}
.pagination> .disabled > span,
.pagination> .disabled >span:hover,
.pagination> .disabled >span:focus,
.pagination> .disabled > a,
.pagination> .disabled >a:hover,
.pagination> .disabled >a:focus {
color: #999;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}
注意：要禁用当前状态和禁用状态不能点击，我们还要依靠js来实现，或者将这两状态下的a标签换成span标签。
大小设置：
在Bootstrap框架中，也可以通过几个不同的情况来设置其大小。类似于按钮一样：
1、通过“pagination-lg”让分页导航变大；
2、通过“pagination-sm”让分页导航变小：
<ul class="pagination pagination-lg">
 …
</ul>
<ul class="pagination">
 …
</ul>
<ul class="pagination pagination-sm">
 …
</ul>
运行效果查看最右侧结果窗口。
大小设置实现原理：
其实就是通增加相应的padding大小、font-size大小和圆角大小，源码查看bootstrap.css文件第4193行～第4222行，这30行代码已从原文中节取出来，放在右侧代码顶部“bootstrap.css”文件中，小伙伴们可以查看。
 

<!--代码-->
<ul class="pagination pagination-lg">
  <li><a href=http://www.mamicode.com/"#">«第一页>
分页导航（翻页分页导航）
Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。
Bootstrap框架将其独立成一个单独的部分：
  ?   LESS版本：对应源文件为pager.less
  ?  Sass版本：对应源文件为_pager.scss
  ?  编译后版本：对应bootstrap.css文件第4223行～第4260行
使用方法：
在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类：
<ul class="pager">
   <li><a href=http://www.mamicode.com/"#">«上一页>
运行效果见右侧结果窗口。
实现原理：
对应样式代码：
/*bootstrap.css文件第4223行～第4244行*/
.pager {
padding-left: 0;
margin: 20px 0;
text-align: center;
list-style: none;
}
.pager li {
display: inline;
}
.pager li > a,
.pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;
}
.pager li >a:hover,
.pager li >a:focus {
text-decoration: none;
background-color: #eee;
}
对齐样式设置：
默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式：
   ?   previous：让“上一步”按钮居左
   ?   next：让“下一步”按钮居右
具体使用的时候，只需要在li标签上添加对应类名即可：
<ul class="pager">
   <li class="previous"><a href=http://www.mamicode.com/"#">«上一页"color:rgb(178,34,34)">next"><a href=http://www.mamicode.com/"#">下一页»>
运行效果见右侧结果窗口。
实现原理：
实现原理很简单，就是一个进行了左浮动，一个进行了右浮动：
/*bootstrap.css文件第4245行～第4252行*/
.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}
状态样式设置：
和带页码分页导航一样，如果在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，但同样不能禁止其点击功能。你可以通过js来处理，或将a标签换成span标签。
<ul class="pager">
  <li class="disabled"><span>&laquo;上一页</span></li>
  <li><a href=http://www.mamicode.com/"#">下一页»>
运行效果见右侧结果窗口。
状态样式实现原理：
/*bootstrap.css文件第4253行～第4260行*/
.pager .disabled > a,
.pager .disabled >a:hover,
.pager .disabled >a:focus,
.pager .disabled > span {
  color: #999;
  cursor: not-allowed;
  background-color: #fff;
}
<!--代码-->
<ul class="pager">
  <li><a href=http://www.mamicode.com/"#">«上一页>

Bootstarp学习（十二）分页导航