Bootstrap4 中用于分页的类

在Web开发中，分页功能通常在数据量较大、需要分批展示信息时常常使用。Bootstrap4给出了很多类用于实现分页功能。本文将介绍Bootstrap4中用于分页的类。

1. .pagination

.pagination类是用于创建分页组件的最基本样式。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <!-- 分页内容 -->
  </ul>
</nav>

2. .page-item

.page-item类是用于创建分页组件中的单个页码或按钮的样式。

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

3. .page-link

.page-link类是用于创建分页组件中的单个页码或按钮链接的样式。

<nav aria-label="Page navigation example">
  <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"><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>

4. .disabled

.disabled类是用于禁用分页组件中的某些按钮的样式。

<nav aria-label="Page navigation example">
  <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"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item disabled">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

5. .active

.active类是用于高亮分页组件中当前页码或按钮的样式。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item active"><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 disabled">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

6. .justify-content-*

.justify-content-*类是用于设置分页组件中页码或按钮的对齐方式的样式。

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <!-- 分页内容 -->
  </ul>
</nav>

其中justify-content-center可以替换为其他值，如justify-content-start、justify-content-end、justify-content-around等。

以上是Bootstrap4中用于分页的类的介绍。使用这些类，我们可以轻松地实现自己所需的分页效果。