Bootstrap分页需用标准HTML结构：包裹在内，每项为；必须同时设class="active"和aria-current="page"以满足可访问性要求。

直接用 Bootstrap 的 .pagination 类就行，不用自己写布局逻辑

Bootstrap 5+ 自带的 .pagination 已经处理好了间距、对齐、禁用状态和响应式缩放，只要结构正确，样式立刻生效。关键不是“怎么写 CSS”，而是“怎么组织 HTML”。

常见错误是把 <li> 直接塞进 <ul class="pagination"></ul> 却漏掉 class="page-item" 和 class="page-link" —— 这会导致按钮无边框、无 hover 效果、点击区域异常小。

• 每个分页项必须是 <li class="page-item"> 包裹 <a class="page-link"></a>
• <a></a> 必须有 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 算失败。

例如下面这个写法才是合规的：

立即学习“前端免费学习笔记（深入）”；

<li class="page-item active">
  <a class="page-link" href="#" aria-current="page">3</a>
</li>

如果用 JS 动态切换当前页，记得同步设置/移除 aria-current 属性，不要只操作 class。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

自定义颜色或大小？优先用 Bootstrap 内置变体，别硬覆盖 CSS

想改颜色，直接用 .pagination-lg / .pagination-sm 控制尺寸，用 .pagination-dark 换背景色，比自己写 .pagination .page-link:hover 更稳。

若必须定制（比如主品牌蓝），推荐通过 Sass 变量重定义 $pagination-color、$pagination-active-bg，而不是用 !important 覆盖。否则升级 Bootstrap 版本时极易失效。

• 小尺寸分页：<nav><ul class="pagination pagination-sm">…</ul></nav>
• 深色背景适配：<nav class="bg-dark"><ul class="pagination pagination-dark">…</ul></nav>
• 禁用某项：给 <a></a> 加 tabindex="-1" 并设 aria-disabled="true"，再加 class="disabled"

分页组件没对齐？检查父容器是否漏了 <nav></nav> 和 role="navigation"

Bootstrap 官方文档强调：分页应包裹在 <nav></nav> 中，并添加 aria-label="Page navigation"。这不是装饰——没有它，某些读屏软件会把分页当普通列表朗读，丢失导航语义。

标准结构长这样：

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#" aria-current="page">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

漏掉 <nav></nav> 或 aria-label，不仅影响可访问性，还可能让 Flex 布局在旧版 Safari 里错位——因为 .pagination 默认依赖 display: flex，而 <nav></nav> 提供了可靠的块级上下文。