Bootstrap分页Pagination组件 Bootstrap如何实现页面分页

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

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

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

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

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

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

容易踩的坑：pagination-sm 在 iOS Safari 下可能让 <a> 标签点击反馈变弱，建议测试真机。

兼容性影响：IE11 不支持 rem 单位下的紧凑缩放，若需兼容，要额外加 px 回退不要混用 pagination-sm 和自定义 font-size，CSS 优先级容易冲突示例中常见写法：<nav><ul class="pagination pagination-sm">…</ul></nav> —— 注意是 <ul> 上加类，不是 <nav>

服务端分页 vs 前端分页：Bootstrap 分页组件本身不做区分

它不管你是发 AJAX 拿新数据，还是刷新整个页面。但 URL 结构决定你后续怎么写逻辑：用 ?page=3 还是 /posts/3/，会影响 href 怎么拼、历史记录怎么管理。

常见错误现象：点了第 2 页后按浏览器后退，页面没回到第 1 页——因为你没监听 popstate 或没更新 URL。

如果用 history.pushState()，记得同步更新 aria-current 和禁用状态（disabled）服务端分页时，<a href="?page=2">2</a> 是最简方案，但会整页刷新；想无刷新就得换 <button type="button"> 并手写请求注意 rel="next"/rel="prev" 属性可选，对 SEO 有帮助，但 Bootstrap 不自动生成

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

只加 disabled 对 <a> 标签无效（HTML 规范里 <a> 没这个属性），必须靠 CSS + aria-disabled 配合才能正确传达状态。

容易被忽略的地方：屏幕阅读器可能读出 “link” 而不是 “disabled link”，除非你同时设了 aria-disabled="true" 和 tabindex="-1"。

正确写法：<a class="page-link" href="#" aria-disabled="true" tabindex="-1">Previous</a>别只依赖 opacity: .5 来表示禁用，视觉障碍用户看不到透明度变化JS 动态启用/禁用时，记得同步切换两个属性，不然可访问性检测工具会报错事情说清了就结束。分页最难的从来不是画几个按钮，而是把 URL、状态、焦点、无障碍、服务端响应这几条线同时拉直。