分页(Pagination)

分页(Pagination)

用于指导定义分页以及显示样式定义的一些示例和文档。

概览

我们使用大规格block块的A链接进行分页样式呈现，使链接难以忽略、易于扩展，且提供更大的点击区域使用户易于上手。分页是使用list列表元素构建的，因此屏幕阅读器可以读出链接的数量，使用<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属性和.sr-only实用程序。想要使用圖示或符號代替某些分頁連結的文字？使用 aria 屬性和 .sr-only 通用類別提供螢幕閱讀器的支援。想使用图标或符合代替分页链接中的文字（如首页、下一页），如下图设置就可以（使用 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>

禁用和活动状态定义

分页组件可以根据不同的情况进行定制，使用code class="highlighter-rouge">.disabled 显示为分页链接不可用（禁用无效），使用 .active 可指引标示当前所在的分页。

.disabled 使用 pointer-events: none 來禁用 <a>的链接功能，但该CSS属性尚未标准化（使用的时候要注意浏览器兼容性调式-译者注）。

此外，即使在支持pointer-events: none 的浏览器中，键盘导航仍然不受影响，这意味着键盘使用者和辅助技术浏览器用户仍然可以启动这些被“禁用”的链接。为了安全起见，请在这些链接上添加一个tabindex="-1"定义并使用自定义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>替换有效或禁用的链接，或者在上一页/下一页箭头替代（省略）A链接以删除点击功能，以保留原样式的同事防止键盘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">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="...">
  <ul class="pagination pagination-sm">
    <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>

对齐

使用 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>