分页(Pagination)
分页(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="#">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>
禁用和激活状态
可根据不同情况对分页链接(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">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>
你可以通过将激活(active)或禁用(disabled)的链接替换为 <span>
标签,或者如果是 上一页/下一页 箭头的话,可以去掉 <a>
标签,从而删除该链接对单击功能的支持并防止获得键盘焦点,同时还能保留需要的样式。
<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>