分页功能也是在网站建设项目中经常会用到的组件，如果要自己写的话，虽然难度不大，却也需要耗费不少时间，通过调用Bootstrap分页组件，可以很方便地实现这个功能。
默认Bootstrap分页样式
这是默认的Bootstrap分页组件样式，效果简洁直观，如果想要符合自己的项目需求，可以将高亮颜色改为自己想要的颜色，其他样式直接引用即可，编写代码如下：<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>
当前页面选项高亮与禁用状态
通过引入disabled样式与active样式，可以将当前你的页面选项高亮，并且禁用已经无法翻页的标签，效果很不错：<ul class="pagination"> <li class="disabled"><a href="#">«</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="#">»</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>
写在文章最后
默认Bootstrap分页组件用起来很方便，不过也要针对项目的相关需求进行部分定制修改，例如颜色、样式等。
但不管怎么说，还是能够为我们的前端开发节省不少时间。