分页

用于显示分页，显示跨越多页面的一系列文档或者实例。

更新于: 2023-04-30 14:28:21 查看: 526

发布于: 2021-9-6 15:30 发布者: 大米

概述 

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

另外，由于页面可能具有多个这样的导航部分，因此建议为 <nav> 提供一个描述性的 aria-label ，以反映其目的。 例如，如果使用分页组件在一组搜索结果之间导航，则适当的标签可以是 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">&laquo;</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">&raquo;</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" href="#" tabindex="-1" aria-disabled="true">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>，或者在上一个/下一个箭头的情况下忽略该锚，以删除单击功能并在保留预期样式的同时防止键盘聚焦。

<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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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>

扫描二维码，手机查看
声明：部分数据/图片来源互联网，不代表Hluse Doc.,真实性请妥善甄别。
收藏 邀请