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