Bootstrap分页组件仅提供样式和结构，需手动实现点击响应、URL更新、状态同步及可访问性属性；HTML结构须规范，语义正确，交互逻辑必须自行编写。
Bootstrap 的 pagination 组件只负责样式和结构，不带任何跳转或数据加载逻辑。要让它真正可用，得手动补全点击响应、URL 更新、状态同步和可访问性属性。
基础 HTML 结构必须规范
分页容器必须是 <ul class="pagination">，每个页码项用 <li class="page-item"> 包裹，链接用 <a class="page-link">（不能用 <button> 或 <span> 代替，否则语义和键盘导航会出问题）。
- 当前页的
<li>必须加class="active"，同时在内部<a>上添加aria-current="page" - 禁用项（如首页不可点、上一页在第 1 页时）应在
<li>上加class="disabled"，并在<a>上加aria-disabled="true"—— 光加disabled属性无效，HTML 规范不支持该属性在<a>上生效 - 外层推荐用
<nav aria-label="Page navigation">包裹，提升屏幕阅读器识别度
尺寸与对齐要写对位置
所有尺寸类（pagination-sm、pagination-lg）和对齐类（如 justify-content-center）都必须加在 <ul> 标签上，不是 <nav> 或 <li>。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
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>或<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>的href指向真实 URL（如/articles?page=3），无需 JS 也能工作，适合简单场景 - 前端分页：数据已全部加载，只需切换显示范围，这时建议把
<a>改成<button type="button" class="page-link">，避免默认跳转，并用 JS 控制 DOM 渲染 - 无论哪种，都建议加上
rel="prev"/rel="next"属性（如第 3 页的“上一页”加rel="prev"），对搜索引擎友好，Bootstrap 不自动生成，需手动加
