分页

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

概述

我们使用大量连接链接进行分页,使链接难以错过并且易于扩展 - 同时提供大量命中区域。分页是使用列表HTML元素构建的,因此屏幕阅读器可以宣布可用链接的数量。 使用包装 <nav> 元素将其识别为屏幕阅读器和其他辅助技术的导航部分。

此外,由于页面可能具有多个此类导航部分,因此建议提供描述性的部分 aria-label 为了 <nav> 反映其目的。 例如,如果分页组件用于在一组搜索结果之间导航,则可以使用适当的标签 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 属性和 .sr-only 工具。

<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>
        <span class="sr-only">Previous</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>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

禁用和活动状态

分页链接可根据不同情况进行复制。对于显示为不可点击的链接,使用 .disabled 和使用 .active 来指示当前页面。

.disabled 使用 pointer-events: none 來禁用 <a> 的链接功能,但该 CSS 属性尚未标准化。此外,即使在支持 pointer-events: none 的浏览器中,键盘导览仍然不受影响,这意味著键盘使用者和辅助性技术的使用者仍然可以启动这些链接。为了安全起见,在这些链接上添加一个 tabindex="-1" 属性防止他们应用 focus,并使用自定义的 JavaScript 来禁用它们的功能。

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li 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> 替换的活动或禁用的链接,或者在上一个/下一个箭头的情况下省略链接以删除点击功能,并在保留预期样式的同时防止键盘 focus。

<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">
      <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>

尺寸

加入 .pagination-lg.pagination-sm 应用其他尺寸。

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </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">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">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>