在 GitHub 上查看
分页
用于显示分页的文档和示例，以指示一系列相关内容存在于多个页面中。
概述
我们为分页使用一大块连接的链接，使链接难以错过且易于扩展，同时提供大面积的点击区域。分页使用列表 HTML 元素构建，以便屏幕阅读器可以播报可用链接的数量。使用包装 <nav> 元素将其标识为导航部分，以供屏幕阅读器和其他辅助技术使用。
此外，由于页面可能有多个此类导航部分，建议为 <nav> 提供描述性的 aria-label 以反映其用途。例如，如果分页组件用于在搜索结果集之间导航，则合适的标签可能是 aria-label="搜索结果页面"。
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>使用图标
想要在某些分页链接中使用图标或符号来代替文本？务必使用 aria 属性提供适当的屏幕阅读器支持。
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>禁用和激活状态
分页链接可根据不同情况进行自定义。对看起来不可点击的链接使用 .disabled，对指示当前页面的链接使用 .active。
虽然 .disabled 类使用 pointer-events: none 来尝试禁用 <a> 的链接功能，但该 CSS 属性尚未标准化，并且不适用于键盘导航。因此，您应该始终对已禁用的链接添加 tabindex="-1"，并使用自定义 JavaScript 完全禁用其功能。
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>您还可以选择将活动或禁用锚点换成 <span>，或在 prev/next 箭头的情况下省略锚点，以删除点击功能并防止键盘焦点，同时保留预期的样式。
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<span class="page-link">2</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>尺寸
想要更大或更小的分页？添加 .pagination-lg 或 .pagination-sm 以获得其他大小。
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav><nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>对齐
使用 flexbox 实用程序 更改分页组件的对齐方式。
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav><nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>