Bootstrap 分页

问题

Bootstrap 中如何设置分页？需要使用哪些 class？

解答

Bootstrap 提供了 .pagination 类来创建分页组件，配合 .page-item 和 .page-link 实现完整的分页效果。

基础分页

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

分页状态

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

分页尺寸

<!-- 大尺寸 -->
<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>

<!-- 小尺寸 -->
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>

分页对齐

<!-- 居中 -->
<ul class="pagination justify-content-center">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>

<!-- 右对齐 -->
<ul class="pagination justify-content-end">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>

关键点

• .pagination 添加在 <ul> 上，是分页的容器类
• .page-item 添加在 <li> 上，表示每个分页项
• .page-link 添加在 <a> 上，设置链接样式
• .active 表示当前页，.disabled 表示禁用状态
• .pagination-lg / .pagination-sm 控制分页大小