bootstrap分页组件仅提供样式和结构，需手动实现点击响应、url更新、状态同步及可访问性属性；html结构须规范，语义正确，交互逻辑必须自行编写。
Bootstrap 的 pagination 组件只负责样式和结构，不带任何跳转或数据加载逻辑。要让它真正可用，得手动补全点击响应、URL 更新、状态同步和可访问性属性。
基础 HTML 结构必须规范
分页容器必须是 <ul class="pagination"></ul>，每个页码项用 <li class="page-item"> 包裹，链接用 <a class="page-link"></a>（不能用 <button></button> 或 <span></span> 代替，否则语义和键盘导航会出问题）。
- 当前页的
<li>必须加class="active"，同时在内部<a></a>上添加aria-current="page" - 禁用项（如首页不可点、上一页在第 1 页时）应在
<li>上加class="disabled"，并在<a></a>上加aria-disabled="true"—— 光加disabled属性无效，HTML 规范不支持该属性在<a></a>上生效 - 外层推荐用
<nav aria-label="Page navigation"></nav>包裹，提升屏幕阅读器识别度
尺寸与对齐要写对位置
所有尺寸类（pagination-sm、pagination-lg）和对齐类（如 justify-content-center）都必须加在 <ul></ul> 标签上，不是 <nav></nav> 或 <li>。
-
pagination-sm会缩小字体和内边距，但可能让移动端点击热区变小，建议额外加min-width: 36px或padding: .375rem .75rem保证触控友好 -
justify-content-center是 Flex 布局居中，不是text-center；若需响应式居中，可用justify-content-md-center - IE11 不支持 rem 单位下的紧凑缩放，如需兼容，需为
pagination-sm补充 px 回退值
交互逻辑必须自己实现
点击没反应？页面跳到顶部？后退键失效？这些都不是 Bootstrap 的 bug，而是你还没写 JS。
- 不要给分页链接写
href="#"，它会导致页面滚动到顶；应设为href="?page=2"或href="/posts/3/"，便于 SEO 和直接访问 - 监听点击事件时，推荐用事件委托绑定到
<nav></nav>或<ul></ul>，避免重复绑定：document.querySelector('.pagination').addEventListener('click', e => { if (e.target.classList.contains('page-link')) { e.preventDefault(); handlePageClick(e.target); } }) - 切换页码后，记得同步更新：当前页的
aria-current、禁用项的disabled和aria-disabled、浏览器地址栏（用history.pushState()）、以及页面数据（发 AJAX 或重新渲染） - 监听
popstate事件，确保用户点浏览器后退/前进时，分页 UI 和内容能正确响应
服务端分页和前端分页选一种明确策略
Bootstrap 不区分这两种模式，但你的实现方式完全不同。
- 服务端分页：每次换页都刷新整页，
<a></a>的href指向真实 URL（如/articles?page=3），无需 JS 也能工作，适合简单场景 - 前端分页：数据已全部加载，只需切换显示范围，这时建议把
<a></a>改成<button type="button" class="page-link"></button>，避免默认跳转，并用 JS 控制 DOM 渲染 - 无论哪种，都建议加上
rel="prev"/rel="next"属性（如第 3 页的“上一页”加rel="prev"），对搜索引擎友好，Bootstrap 不自动生成，需手动加
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
