Bootstrap系列 -- 44. 分页导航

最新推荐文章于 2025-06-28 12:36:45 发布

weixin_33725126

最新推荐文章于 2025-06-28 12:36:45 发布

阅读量111

点赞数

　　带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法。

<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>

　　在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="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>

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

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

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

<ul class="pager">
   <li class="previous"><a href="#">&laquo;上一页</a></li>
   <li class="next"><a href="#">下一页&raquo;</a></li>
</ul>

作者：情缘
出处：http://www.cnblogs.com/qingyuan/
关于作者：从事仓库，生产软件方面的开发，在项目管理以及企业经营方面寻求发展之路
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
联系方式: 个人QQ 821865130 ; 仓储技术QQ群 88718955,142050808 ;
吉特仓储管理系统开源地址: https://github.com/hechenqingyuan/gitwms