默认分页
<nav><ul class="pagination">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></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="#" aria-label="Next"><span aria-hidden="true">»</span> </a>
</li></ul></nav>
禁用和激活状态
链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。
<nav><ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul></nav>
你还可以将 active 或 disabled 状态应用于 标签,或者在向前/向后的箭头处省略<a> 标记,即替换<a> 标签,这样就可以让其保持需要的样式而不能被点击。
<nav><ul class="pagination">
<li class="disabled">
<span><span aria-hidden="true">«</span>
</span></li><li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>...
</ul></nav>
分页的大小尺寸
想要更小或更大的分页?.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。
<ul class="pagination pagination-lg">
<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><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><ul class="pagination pagination-sm">
<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>
翻页
用简单的标记和样式,就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。与分页链接一样,翻页也是无序列表。
默认的翻页
在默认的翻页中,链接居中对齐。
<nav><ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul></nav>
对齐的链接
你还可以把链接向两端对齐:
<nav><ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul></nav>
翻页的状态
.disabled 类也可用于翻页中的链接。
<nav><ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul></nav>
