Bootstrap 5 Pagination仅渲染样式，不处理跳转逻辑，需手动绑定点击事件、更新URL和加载数据，并正确设置aria-current、disabled与aria-disabled等可访问性属性。
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 动态启用/禁用时，记得同步切换两个属性，不然可访问性检测工具会报错
