如何在CSS中使用Bootstrap制作分页组件_Bootstrap pagination类控制样式

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

在网页开发中，分页组件常用于内容列表的翻页导航。Bootstrap 提供了一套简洁、响应式的分页样式类，通过简单的 HTML 结构和 Bootstrap 内置的 pagination 类，可以快速实现美观的分页效果。

使用 Bootstrap pagination 基础结构

要创建一个基本的分页组件，需要使用 ul 元素并添加 pagination 类，每个页码用 li 包裹，内部使用 a 标签作为可点击链接。

• ：定义分页容器
• ：包裹每一个页码或按钮
• 1：页码链接

示例代码：

  
1
  
2
  
3

控制当前页与禁用状态

通过添加特定类名，可以标识当前选中页或禁用上一页/下一页按钮。

当前页高亮：给对应 li 添加 active 类。
禁用按钮：给不可点击项添加 disabled 类。

示例：

  
上一页
  
1
  
2
  
3
  
下一页

调整分页大小与对齐方式

Bootstrap 支持不同尺寸和布局的分页样式。

大号或小号分页：

• 添加 pagination-lg 使用大尺寸按钮
• 添加 pagination-sm 使用小尺寸按钮

居中或右对齐：

• 使用 justify-content-center 让分页居中（需配合 Flex 布局）
• 使用 justify-content-end 右对齐

示例（居中大号分页）：

  
1
  
2
  
3

基本上就这些。利用 Bootstrap 的 pagination 系列类，无需额外 CSS 即可实现功能完整、视觉统一的分页组件。关键是结构正确，并合理使用 active 和 disabled 状态类。不复杂但容易忽略细节。