分页 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 示例