Bootstrap分页使用方法

分页功能也是在网站建设项目中经常会用到的组件,如果要自己写的话,虽然难度不大,却也需要耗费不少时间,通过调用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>

写在文章最后

默认Bootstrap分页组件用起来很方便,不过也要针对项目的相关需求进行部分定制修改,例如颜色、样式等。
但不管怎么说,还是能够为我们的前端开发节省不少时间。