Bootstrap 5 分页组件详解
从零开始学习分页组件，包含详细知识点与实际应用
适合初学者
详细注释
实战示例
响应式设计
分页组件介绍
分页(Pagination)组件用于将大量内容分成多个页面显示，让用户可以轻松地在不同页面之间导航。
使用场景：
博客文章列表、商品列表、后台管理系统数据表格等需要分页展示内容的场景
Bootstrap 5的分页组件提供了多种样式和功能：
- 基本分页样式
- 激活和禁用状态
- 不同尺寸的分页
- 对齐方式控制
- 自定义外观
基础分页实现
创建一个基本的分页组件只需要两个元素：
- nav – 包裹整个分页组件的容器
- ul.pagination – 实际的分页列表
- li.page-item – 每个分页项
- a.page-link – 可点击的分页链接
代码示例：
<nav>
<ul class=”pagination”>
<li class=”page-item”><a class=”page-link” href=”#”>上一页</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>1</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>2</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>3</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>下一页</a></li>
</ul>
</nav>
<ul class=”pagination”>
<li class=”page-item”><a class=”page-link” href=”#”>上一页</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>1</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>2</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>3</a></li>
<li class=”page-item”><a class=”page-link” href=”#”>下一页</a></li>
</ul>
</nav>
实际效果：
状态管理：激活与禁用
在分页组件中，经常需要表示当前选中页面或禁用不可点击的链接：
激活状态
使用 .active 类表示当前页面：
<li class=”page-item active“>
<a class=”page-link” href=”#”>2</a>
</li>
<a class=”page-link” href=”#”>2</a>
</li>
禁用状态
使用 .disabled 类表示不可点击项：
<li class=”page-item disabled“>
<a class=”page-link” href=”#”>下一页</a>
</li>
<a class=”page-link” href=”#”>下一页</a>
</li>
实际效果：
注意：
禁用状态只是视觉上的禁用，如果需要完全禁用功能，还需要在JavaScript中处理点击事件或移除href属性
调整分页尺寸
Bootstrap 提供了两种额外的分页尺寸：
较大尺寸
添加 .pagination-lg 类：
<ul class=”pagination pagination-lg“>…</ul>
较小尺寸
添加 .pagination-sm 类：
<ul class=”pagination pagination-sm“>…</ul>
不同尺寸的对比：
对齐方式控制
使用Flex布局工具类轻松调整分页对齐方式：
居左对齐
默认情况下分页是居左的
<ul class=”pagination”>…</ul>
居中对齐
添加 .justify-content-center
<ul class=”pagination justify-content-center“>…</ul>
居右对齐
添加 .justify-content-end
<ul class=”pagination justify-content-end“>…</ul>
对齐方式演示：
居左对齐 (默认)
居中对齐
居右对齐
进阶技巧与提示
使用图标替代文字
可以使用图标代替”上一页”、”下一页”等文字：
<li class=”page-item”>
<a class=”page-link” href=”#”>
<span aria-hidden=”true”>«</span>
</a>
</li>
<a class=”page-link” href=”#”>
<span aria-hidden=”true”>«</span>
</a>
</li>
自定义样式
通过CSS自定义分页样式：
/* 自定义激活状态 */
.page-item.active .page-link {
background-color: #4dabf7;
border-color: #4dabf7;
}
/* 悬停效果 */
.page-link:hover {
background-color: #e9ecef;
}
.page-item.active .page-link {
background-color: #4dabf7;
border-color: #4dabf7;
}
/* 悬停效果 */
.page-link:hover {
background-color: #e9ecef;
}
最佳实践：
- 在移动设备上，减少显示的页码数量以提高可用性
- 提供”首页”和”末页”按钮，方便用户快速跳转
- 当只有一页内容时，隐藏分页组件
- 为每个分页链接提供明确的ARIA标签，增强可访问性