分页 Pagination

分页用一组相连的页码链接表示多页内容的位置,配合 nav 语义容器与 aria-label,屏幕阅读器可以正确播报页码数量与用途。

基础分页

外层 nav 包一个 ul.pagination,每个页码是 li.page-item 内的 a.page-link。

HTML 示例

激活与禁用状态

当前页加 active(并配 aria-current="page");不可点击的页加 disabled,建议同时加 tabindex="-1" 阻止键盘聚焦。

HTML 示例

尺寸大小

给 ul.pagination 加 pagination-lg 或 pagination-sm,即可得到更大或更小的分页尺寸。

pagination-lg 大号分页

pagination-sm 小号分页

HTML 示例

对齐方式

分页是 flex 容器,直接加 justify-content-center 居中、justify-content-end 右对齐。

justify-content-center 居中

justify-content-end 右对齐

HTML 示例

带图标箭头

把「上一页 / 下一页」文字替换为内联 SVG 箭头图标,同时保留 aria-label 与 aria-hidden="true",让屏幕阅读器仍能正确朗读。

HTML 示例