Bootstrap5 分页(Pagination)

半兽人 发表于: 2020-07-13   最后更新时间: 2021-11-20 00:06:54  
{{totalSubscript}} 订阅, 3,373 游览

概述(Overview)

我们在分页中使用了大量的连接链接,使链接不易丢失且易于扩展 - 同时还提供了较大的点击范围。 分页是使用列表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>

在线运行

使用图标(icons)

想要在某些分页链接中使用图标或符号代替文本? 只要确保提供具有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 <span class="visually-hidden">(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>,或者在上一个/下一个箭头的情况下省略该锚,以删除单击功能并在保留预期样式的同时防止键盘聚焦。

<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 class="visually-hidden">(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 active" aria-current="page">
      <span class="page-link">
        1
        <span class="visually-hidden">(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>

在线运行

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        1
        <span class="visually-hidden">(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工具改变对齐方式。

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

在线运行

更新于 2021-11-20

查看bootstrap5更多相关的文章或提一个关于bootstrap5的问题,也可以与我们一起分享文章