Bootstrap分页需用标准HTML结构：包裹在内，每项为；必须同时设class="active"和aria-current="page"以满足可访问性要求。
直接用 Bootstrap 的 .pagination 类就行，不用自己写布局逻辑
Bootstrap 5+ 自带的 .pagination 已经处理好了间距、对齐、禁用状态和响应式缩放，只要结构正确，样式立刻生效。关键不是“怎么写 CSS”，而是“怎么组织 HTML”。
常见错误是把 直接塞进 class="page-item" 和 class="page-link" —— 这会导致按钮无边框、无 hover 效果、点击区域异常小。
- 每个分页项必须是
包裹 -
必须有href（哪怕用#或javascript:void(0)），否则.page-link的 focus 样式不触发 - 当前页要用
aria-current="page"+class="active"，不能只靠active
Bootstrap 分页的 aria-current 不是可选项，是可访问性刚需
光加 class="active" 只影响视觉，屏幕阅读器无法识别“这是当前页”。必须同时写 aria-current="page"，否则 WCAG 2.1 AA 算失败。
例如下面这个写法才是合规的：
立即学习“前端免费学习笔记（深入）”；
如果用 JS 动态切换当前页，记得同步设置/移除 aria-current 属性，不要只操作 class。
自定义颜色或大小？优先用 Bootstrap 内置变体，别硬覆盖 CSS
想改颜色，直接用 .pagination-lg / .pagination-sm 控制尺寸，用 .pagination-dark 换背景色，比自己写 .pagination .page-link:hover 更稳。
若必须定制（比如主品牌蓝），推荐通过 Sass 变量重定义 $pagination-color、$pagination-active-bg，而不是用 !important 覆盖。否则升级 Bootstrap 版本时极易失效。
分页组件没对齐？检查父容器是否漏了 role="navigation"
Bootstrap 官方文档强调：分页应包裹在 中，并添加 aria-label="Page navigation"。这不是装饰——没有它，某些读屏软件会把分页当普通列表朗读，丢失导航语义。
标准结构长这样：
漏掉 或 aria-label，不仅影响可访问性，还可能让 Flex 布局在旧版 Safari 里错位——因为 .pagination 默认依赖 display: flex，而 提供了可靠的块级上下文。
