Bootstrap分页组件仅提供样式和HTML结构，交互功能需自行实现；必须用.pagination容器和.page-item/.page-link嵌套结构，.page-link须为标签并正确使用aria-current="page"和.active类。
Bootstrap 的分页组件本身不带交互逻辑，只负责样式和基础 HTML 结构；你要的“能点、能跳、能高亮当前页”，得自己补上 JavaScript 控制或后端渲染逻辑。
用 pagination 类写基础结构
Bootstrap 5 的分页依赖 .pagination 容器和 .page-item + .page-link 嵌套结构。注意：.page-link 必须是 <a></a> 标签（否则禁用态和聚焦样式失效），如果要用 <button></button>，得额外加 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类，且内部<a></a>必须带aria-current="page"，二者缺一不可 - 上一页/下一页按钮用
<li class="page-item"><a class="page-link" aria-label="Previous">«</a></li>，别漏aria-label
让分页响应点击：后端跳转 or 前端拦截
默认所有 .page-link 都是普通链接，点一下就整页刷新。如果你用的是服务端渲染（如 Django、Rails、PHP），直接拼 href 即可；如果是 SPA 或想无刷新加载，就得阻止默认行为并调用 JS 加载数据。
- 前端拦截示例（原生 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 只用于“上一页/下一页”禁用，页码列表里的省略号（<li class="page-item disabled"><span class="page-link">…</span></li>）得你手动生成。
典型策略是：显示当前页 ±2 页，首尾各留 1 个固定页，中间用省略号隔开。例如总页数 20、当前页 12，应渲染为：1 … 10 11 <strong>12</strong> 13 14 … 20。
- 省略号项必须用
<span class="page-link">…</span>，不能用<a></a>，否则语义错误且样式错乱 - Bootstrap 5 的
.disabled类对<span></span>无效，需额外加aria-hidden="true"并设pointer-events: none（或用自定义 CSS） - 移动端小屏下，建议优先压缩页码范围（比如只显示 ±1），避免换行撑宽容器
最常被忽略的是焦点管理：用户用键盘翻页时，焦点应在点击后自动落到新加载内容区（比如 main 或列表容器），否则会卡在分页栏里。这个得你自己用 element.focus() 补上。
