Bootstrap分页使用方法

默认Bootstrap分页样式

这是默认的Bootstrap分页组件样式，效果简洁直观，如果想要符合自己的项目需求，可以将高亮颜色改为自己想要的颜色，其他样式直接引用即可，编写代码如下：<ul class="pagination">  <li><a href="#">&laquo;</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="#">&raquo;</a></li></ul>

当前页面选项高亮与禁用状态

通过引入disabled样式与active样式，可以将当前你的页面选项高亮，并且禁用已经无法翻页的标签，效果很不错：<ul class="pagination">  <li class="disabled"><a href="#">&laquo;</a></li>  <li class="active"><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="#">&raquo;</a></li></ul>

分页组件尺寸设置

和按钮元素调用一样，分页组件也同样可以通过样式引用来设定大小，用起来也非常简单：<ul class="pagination pagination-lg">...</ul><ul class="pagination">...</ul><ul class="pagination pagination-sm">...</ul>以上样式由大到小进行显示。

Bootstrap翻页组件

如果你需要在文章中调用上一篇下一篇的功能，那么可以直接采用这个翻页组件即可。
这个组件的引用也非常容易，按照以下代码进行引用：<ul class="pager">  <li class="previous"><a href="#">上一篇</a></li>  <li class="next"><a href="#">下一篇</a></li></ul>同样，如果想要调用禁用样式，直接引入disabled样式即可：<ul class="pager">  <li class="previous disabled"><a href="#">上一篇</a></li>  <li class="next"><a href="#">下一篇</a></li></ul>