Bootstrap4 分页组件

分页组件的重要性

分页是Web应用中的重要组成部分，特别是在数据列表、文章列表等场景中：

  • 提高页面加载速度，减少单次加载数据量
  • 提升用户体验，便于用户浏览和定位内容
  • 改善SEO，分散页面权重
  • 提供清晰的导航结构

基本分页

Bootstrap 4 提供了简单易用的分页组件，使用 .pagination 类创建分页导航。

基本分页示例
<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>
使用图标的分页

可以使用Font Awesome图标替代文字，创建更现代的分页样式：

<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">上一页</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">下一页</span>
      </a>
    </li>
  </ul>
</nav>

分页状态

Bootstrap 4 提供了多种分页状态，包括激活状态和禁用状态。

激活状态

使用 .active 类表示当前页面：

<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 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="#">下一页</a></li>
</ul>
禁用状态

使用 .disabled 类禁用分页链接：

<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</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>

分页尺寸

Bootstrap 4 提供了不同尺寸的分页组件，以适应不同的设计需求。

分页尺寸示例
<!-- 大尺寸分页 -->
<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>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

<!-- 默认尺寸分页 -->
<ul class="pagination">
  <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>
</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>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

分页对齐方式

可以使用Flexbox工具类调整分页组件的对齐方式。

分页对齐示例
<!-- 左对齐 -->
<ul class="pagination justify-content-start">
  <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>
</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>
  <li class="page-item"><a class="page-link" href="#">3</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>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

自定义分页样式

通过自定义CSS，您可以创建独特的分页样式，以适应您的设计需求。

自定义颜色分页
<style>
.custom-pagination .page-link {
  color: #6f42c1;
  border: 1px solid #6f42c1;
}

.custom-pagination .page-item.active .page-link {
  background-color: #6f42c1;
  border-color: #6f42c1;
  color: white;
}

.custom-pagination .page-link:hover {
  background-color: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}
</style>

<ul class="pagination custom-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 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="#">下一页</a></li>
</ul>
圆形分页
<style>
.pagination-circle .page-link {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
}
</style>

<ul class="pagination pagination-circle">
  <li class="page-item"><a class="page-link" href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
扁平化分页
<style>
.pagination-flat .page-link {
  border: none;
  background-color: transparent;
  color: #6c757d;
}

.pagination-flat .page-item.active .page-link {
  background-color: #6f42c1;
  color: white;
  border-radius: 4px;
}

.pagination-flat .page-link:hover {
  background-color: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}
</style>

<ul class="pagination pagination-flat">
  <li class="page-item"><a class="page-link" href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

最佳实践

使用分页组件的建议
  • 保持一致性 - 在整个应用中使用一致的分页样式
  • 提供清晰的导航 - 确保用户能够轻松理解如何浏览页面
  • 考虑可访问性 - 使用适当的ARIA属性，确保屏幕阅读器用户可以理解分页结构
  • 响应式设计 - 确保分页在不同设备上都能良好显示
  • 限制页面数量 - 对于大量页面，考虑使用省略号或"更多"选项

学习完成！

您已经学会了Bootstrap 4中的分页组件使用方法。现在可以尝试在自己的项目中使用这些技术了。

继续学习下一章：Bootstrap 4 组件

上一章:Bootstrap4 加载效果 下一章:Bootstrap4 列表组