编辑于 Github

分页 - 临 零件

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

概观

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

禁用和活动状态

分页链接可根据不同情况进行定制。 使用.disabled表示不可点击的链接和.active表示当前页面。

虽然.disabled类使用pointer-events：none来_try_来禁用<a>的链接功能，但CSS属性尚未标准化，并且不考虑键盘导航。 因此，您应该始终在禁用的链接上添加tabindex =“ - 1”`并使用自定义JavaScript来完全禁用其功能。

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

您可以选择交换的活动或禁用锚点，或者在prev / next箭头的情况下省略锚点，以删除单击功能并防止键盘焦点同时保留预期的样式。

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">以前</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="#">下一个</a>
    </li>
  </ul>
</nav>

对准

使用[flexbox utilities]（{{site.baseurl}} docs {{site.docs_version}} utilities flex）更改分页组件的对齐方式。

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a 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="#">下一个</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">以前</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="#">下一个</a>
    </li>
  </ul>
</nav>