bootstrap分页与翻页

最新推荐文章于 2023-12-07 17:16:59 发布

weixin_34392843

最新推荐文章于 2023-12-07 17:16:59 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/witchgogogo/p/5552089.html

本文介绍如何使用Bootstrap实现分页与翻页功能，并通过CSS浮动技巧将三个块元素显示在同一列，包括分页、翻页及内容展示部分。详细展示了HTML结构与CSS样式应用，适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap分页在ul中添加pagination可显示如下效果：

bootstrap翻页在ul中添加pager类可显示如下效果；

结合分页与翻页可显示如下效果：

因此，需要3个块元素xian显示在同一列，解决办法：

为第一个和最后一个ul设置float分别为left和right

代码如下：

 1 <div class="col-sm-offset-4 col-sm-3">
 2     <ul id="previous" class="pager">
 3         <li><a href="#">&larr;上一页</a><>
 4     </ul>
 5     <ul id="pages" class="pagination">
 6         <li><a href="#">1</a><li>
 7         <li><a href="#">2</a><li>
 8     <li><a href="#">3</a><li>
 9     <li><a href="#">4</a><li>
10     <li><a href="#">5</a><li>
11     </ul>
12     <ul id="next" class="pager">
13         <li><a href="#">下一页&rarr;</a><li>
14     </ul>
15 </div>

css设置如下：

 1 ul {
 2     display: inline-block;
 3 }
 4 #previous {
 5     float: left;
 6 }
 7 #next {
 8     float: right;
 9 }
10 #pages {
11     padding-left: 25px;
12 }