怎么用Bootstrap制作分页条-Bootstrap教程-PHP中文网

Bootstrap分页组件仅提供样式和HTML结构，交互功能需自行实现；必须用.pagination容器和.page-item/.page-link嵌套结构，.page-link须为标签并正确使用aria-current="page"和.active类。

怎么用bootstrap制作分页条

Bootstrap 的分页组件本身不带交互逻辑，只负责样式和基础 HTML 结构；你要的“能点、能跳、能高亮当前页”，得自己补上 JavaScript 控制或后端渲染逻辑。

用 `pagination` 类写基础结构

Bootstrap 5 的分页依赖 .pagination 容器和 .page-item + .page-link 嵌套结构。注意：.page-link 必须是标签（否则禁用态和聚焦样式失效），如果要用，得额外加 role="link" 并手动处理键盘行为。

常见错误是直接把数字塞进 .page-item 里——必须包一层 .page-link：

<nav aria-label="Page navigation"><ul class="pagination">
<li class="page-item"><a class="page-link" href="?page=1">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="?page=3">3</a></li>
  </ul></nav>

aria-current="page" 是语义关键，影响屏幕阅读器和 CSS 选择器 .page-link[aria-current]
当前页项必须加 .active 类，且内部必须带 aria-current="page"，二者缺一不可
上一页/下一页按钮用
«

aria-label

让分页响应点击：后端跳转 or 前端拦截

默认所有 .page-link 都是普通链接，点一下就整页刷新。如果你用的是服务端渲染（如 Django、Rails、PHP），直接拼 href 即可；如果是 SPA 或想无刷新加载，就得阻止默认行为并调用 JS 加载数据。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

前端拦截示例（原生 JS）：document.querySelectorAll('.page-link').forEach(link => link.addEventListener('click', e => { e.preventDefault(); const page = new URL(e.target.href).searchParams.get('page'); loadPageData(page); }))
别忘了更新 URL：用 history.pushState() 或 URLSearchParams 同步地址栏，否则刷新会丢失状态
禁用链接时，不要只删 href——应保留 href="#" 并加 tabindex="-1" 和 aria-disabled="true"，否则键盘用户无法跳过

处理页码过多时的省略号逻辑

Bootstrap 不自动折叠页码，.page-item.disabled 只用于“上一页/下一页”禁用，页码列表里的省略号（

…

）得你手动生成。

典型策略是：显示当前页 ±2 页，首尾各留 1 个固定页，中间用省略号隔开。例如总页数 20、当前页 12，应渲染为：1 … 10 11 12 13 14 … 20。

省略号项必须用 …，不能用，否则语义错误且样式错乱
Bootstrap 5 的 .disabled 类对无效，需额外加 aria-hidden="true" 并设 pointer-events: none（或用自定义 CSS）
移动端小屏下，建议优先压缩页码范围（比如只显示 ±1），避免换行撑宽容器

最常被忽略的是焦点管理：用户用键盘翻页时，焦点应在点击后自动落到新加载内容区（比如 main 或列表容器），否则会卡在分页栏里。这个得你自己用 element.focus() 补上。