Bootstrap 5 Pagination仅渲染样式，不处理跳转逻辑，需手动绑定点击事件、更新URL和加载数据，并正确设置aria-current、disabled与aria-disabled等可访问性属性。

Bootstrap 5 的 Pagination 组件不自动处理跳转逻辑

它只负责渲染页码样式，点击事件、url 更新、数据加载全得你自己写。很多人以为加个 <nav aria-label="page navigation">...</nav> 就能翻页，结果点不动——因为没绑定任何 js 行为。

常见错误现象：click 事件没监听到、href="#" 导致页面跳顶、分页按钮点击后无响应。

VPS Bootstrap

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

下载

• 使用场景：配合前端框架（如 Vue/React）时，建议用原生 click + preventDefault()；纯 HTML + JS 则直接监听 document.addEventListener("click", ...)
• 参数差异：aria-current="page" 必须手动加在当前页按钮上，否则无障碍支持失效
• 性能影响：不要在每次渲染分页时重新绑定事件，应委托到父容器（如 <nav></nav>）

pagination-sm 和 pagination-lg 只改尺寸，不改交互

这两个类仅控制字体大小和 padding，不影响点击区域或键盘导航能力。有人加了 pagination-sm 后发现手机点不准，其实是触摸热区太小，得自己补 min-width 或 padding。

容易踩的坑：pagination-sm 在 iOS Safari 下可能让 @#@#@#@#@#@#@#@#@#@0 是最简方案，但会整页刷新；想无刷新就得换 <button type="button"></button> 并手写请求

注意 rel="next"/rel="prev" 属性可选，对 SEO 有帮助，但 Bootstrap 不自动生成

禁用状态 disabled 和 aria-disabled="true" 要一起用

只加 disabled 对 @#@#@#@#@#@#@#@#@#@1

别只依赖 opacity: .5 来表示禁用，视觉障碍用户看不到透明度变化

JS 动态启用/禁用时，记得同步切换两个属性，不然可访问性检测工具会报错

事情说清了就结束。分页最难的从来不是画几个按钮，而是把 URL、状态、焦点、无障碍、服务端响应这几条线同时拉直。