使用Bootstrap的pagination类可快速创建响应式分页组件,通过ul和li构建结构,添加page-item和page-link实现页码链接,利用active高亮当前页、disabled禁用按钮,并支持lg/sm尺寸及居中对齐等布局。

在网页开发中,分页组件常用于内容列表的翻页导航。Bootstrap 提供了一套简洁、响应式的分页样式类,通过简单的 HTML 结构和 Bootstrap 内置的 pagination 类,可以快速实现美观的分页效果。
使用 Bootstrap pagination 基础结构
要创建一个基本的分页组件,需要使用 ul 元素并添加 pagination 类,每个页码用 li 包裹,内部使用 a 标签作为可点击链接。
-
:定义分页容器 -
:包裹每一个页码或按钮 -
1:页码链接
示例代码:
控制当前页与禁用状态
通过添加特定类名,可以标识当前选中页或禁用上一页/下一页按钮。
立即学习“前端免费学习笔记(深入)”;
当前页高亮:给对应li 添加 active 类。
禁用按钮:给不可点击项添加
disabled 类。
示例:
调整分页大小与对齐方式
Bootstrap 支持不同尺寸和布局的分页样式。
大号或小号分页:- 添加
pagination-lg使用大尺寸按钮 - 添加
pagination-sm使用小尺寸按钮
- 使用
justify-content-center让分页居中(需配合 Flex 布局) - 使用
justify-content-end右对齐
示例(居中大号分页):
基本上就这些。利用 Bootstrap 的 pagination 系列类,无需额外 CSS 即可实现功能完整、视觉统一的分页组件。关键是结构正确,并合理使用 active 和 disabled 状态类。不复杂但容易忽略细节。










