Bootstrap 分页导航

分页导航

当列表内容较多时，分页显示可以降低带宽使用，提高访问速度。分页导航可以为网站或应用提供带有分页功能的导航。

Bootstrap提供了两种类型的分页导航组件，一种是带有多个页码的分页组件（pagination），一种是只有上一页和下一页的翻页组件（pager）。

分页组件

Bootstrap 中，分页组件的中间是页码，两头是上一页和下一页的链接。可以使用无序列表或有序列表来定义分页组件，暂不支持描述列表。只需为列表应用 .pagination 类，并在 <li> 元素中定义页码链接即可。如：

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

效果如图 3‑57所示：

图3-57 分页组件

1、禁用和活动状态

对于分页组件，当前页一般会高亮显示，并且链接不能点击。如果当前页是第一页，则上一页的链接不能点击；如果当前页是最后一页，则下一页的链接不能点击。

Bootstrap中，使用 .active 类表示活动的状态，使用 .disabled 类表示禁用的状态。活动的链接显示为白色文本和浅蓝色背景，禁用的链接显示为灰色背景并禁用鼠标。可以为分页组件中的链接添加 .active 类表示当前页，添加 .disabled 类表示不能点击。如：

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

效果如图 3‑58所示：

图3-58 禁用和活动状态

事实上，即便使用 .active 和 .disabled 类，也只能禁用CSS交互行为，而无法禁用链接的默认行为。要禁用链接的默认行为，还需要借助JavaScript脚本。

由于Bootstrap的分页组件中，既支持 <a>标签，也支持标签，因此一个完美的解决方案是，将 .active 和 .disabled 状态的链接替换为标签，这样既能保持需要的样式又不可点击。如：

<ul class="pagination">
<li class="disabled">«</li>
<li class="active">1</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>

2、组件的尺寸

需要更大或更小的分页组件吗？.pagination-lg或.pagination-sm类提供了额外可供选择的尺寸。如果希望比默认尺寸大一些，使用 .pagination-lg 类；如果希望比默认尺寸小一些，使用 .pagination-sm 类。如：

<ul class="pagination pagination-lg">
...
</ul>
<ul class="pagination">
...
</ul>
<ul class="pagination pagination-sm">
...
</ul>

效果如图 3‑59所示：

图3-59 分页组件的尺寸

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。