Bootstrap系列 -- 44. 分页导航

　　带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。平时很多同学喜欢用

div>a

和

div>span

结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是

ul>li>a

这样的结构，在ul标签上加入pagination方法。

<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></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>

　　在Bootstrap框架中，也可以通过几个不同的情况来设置分页按钮大小。

　　1、通过“pagination-lg”让分页导航变大；

　　2、通过“pagination-sm”让分页导航变小

<ul class="pagination pagination-lg">
…
</ul>
<ul class="pagination">
…
</ul>
<ul class="pagination pagination-sm">
…
</ul>

　　Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。

　　在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入

pager

类。

<ul class="pager">
<li><a href="#">«上一页</a></li>
<li><a href="#">下一页»</a></li>
</ul>

　　默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式

　　previous：让“上一步”按钮居左

　　 next：让“下一步”按钮居右

<ul class="pager">
<li class="previous"><a href="#">«上一页</a></li>
<li class="next"><a href="#">下一页»</a></li>
</ul>