分页（pagination）是用于指示一系列相关的内容存在于多个页面中的组件。本文档和示例用于讲解该分页（pagination）组件。
概述
我们让分页（pagination）占据了一大块区域来放置相互关联的链接，这让链接更醒目并且易于扩充，除了这些好处，还为链接提供了较大的点击区域。分页（Pagination）是利用 HTML 的列表元素构建的，因此屏幕阅读器可以识别并读出链接的数量。并且列表元素外面还用 <nav> 元素进行了包裹，以便让屏幕阅读器和其他辅助技术能够将其识别为导航区域。
此外，由于页面上可能会有多个这样的导航区域，因此建议为 <nav> 设置一个用于描述其用途的 aria-label 属性。例如，如果分页（pagination）组件用于链接一组搜索结果，则设置 aria-label="Search results pages" 比较合适。
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">上一页</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="#">下一页</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>
禁用和激活状态
可根据不同情况对分页链接（pagination links）进行自定义。使用 .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">上一页</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="#">下一页</a>
</li>
</ul>
</nav>
你可以通过将激活（active）或禁用（disabled）的链接替换为 <span> 标签，或者如果是 上一页/下一页 箭头的话，可以去掉 <a> 标签,从而删除该链接对单击功能的支持并防止获得键盘焦点，同时还能保留需要的样式。
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">上一页</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="#">下一页</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">上一页</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="#">下一页</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">上一页</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="#">下一页</a>
</li>
</ul>
</nav>