Bootstrap/docs/4.5/components/pagination

在GitHub上查看

分页

用于显示分页以指示一系列相关内容的文档和示例跨越多个页面。

概观

我们使用大量的连接链接进行分页,从而使链接不易丢失且易于扩展,同时又能提供较大的点击范围。 分页是使用列表HTML元素构建的,因此屏幕阅读器可以宣布可用链接的数量。 使用包装纸 <nav> 元素,将其标识为屏幕阅读器和其他辅助技术的导航部分。

另外,由于页面可能包含多个导航部分,因此建议您提供描述性的 aria-label 为了 <nav> 反映其目的。 例如,如果使用分页组件在一组搜索结果之间导航,则可以使用适当的标签 aria-label="Search results pages".

• 以前
• 1
• 2
• 3
• Next

<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="#"> Next </a></li>
</ul>
</nav>

使用图标

想要在某些分页链接中使用图标或符号代替文本？ 确保提供适当的屏幕阅读器支持 aria 属性。

• «
• 1
• 2
• 3
• »

<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a aria-label="Previous" class="page-link" href="#">
<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 aria-label="Next" class="page-link" href="#">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>

禁用和活动状态

分页链接可针对不同情况进行定制。 Use .disabled 用于显示无法点击的链接,以及 .active 指示当前页面。

而 .disabled 课堂使用 pointer-events: none to try 禁用链接功能 <a> ,则CSS属性尚未标准化,也无法说明键盘导航。 因此,您应始终添加 tabindex="-1" 禁用链接,并使用自定义JavaScript完全禁用其功能。

• 以前
• 1
• 2(current)
• 3
• Next

<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a aria-disabled="true" class="page-link" href="#" tabindex="-1"> 以前 </a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li aria-current="page" class="page-item active">
<a class="page-link" href="#">2<span class="sr-only">(current)</span></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> ,或者在上一个/下一个箭头的情况下省略锚点,以删除单击功能并防止键盘聚焦,同时保留预期的样式。

• Previous
• 1
• 2 (current)
• 3
• 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 aria-current="page" class="page-item active">
<span class="page-link">
        2
        <span class="sr-only">(current)</span>
</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>

浆纱

喜欢更大或更小的分页吗？ Add .pagination-lg or .pagination-sm 以获得其他尺寸。

• 1 (current)
• 2
• 3

<nav aria-label="...">
<ul class="pagination pagination-lg">
<li aria-current="page" class="page-item active">
<span class="page-link">
        1
        <span class="sr-only">(current)</span>
</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>

• 1 (current)
• 2
• 3

<nav aria-label="...">
<ul class="pagination pagination-sm">
<li aria-current="page" class="page-item active">
<span class="page-link">
        1
        <span class="sr-only">(current)</span>
</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实用程序 .

• 以前
• 1
• 2
• 3
• Next

<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a aria-disabled="true" class="page-link" href="#" tabindex="-1"> 以前 </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>

• 以前
• 1
• 2
• 3
• Next

<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a aria-disabled="true" class="page-link" href="#" tabindex="-1"> 以前 </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>