Bootstrap4 分页学习笔记

1. 概述

Bootstrap是一套由Twitter开发的前端框架，用于快速构建响应式网站和Web应用程序。Bootstrap提供了大量的组件和工具，其中包括分页（pagination）组件，可用于将网站内容分为多个页面，以便用户在浏览时进行导航。

2. 基本用法

使用Bootstrap的分页组件非常简单。只需应用正确的类名和HTML标记即可。以下是一个基本的分页示例：

htmlCopy Code
<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">上一页</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"><a class="page-link" href="#">下一页</a></li>
</ul>

在此示例中，我们使用了一个无序列表（ul）和五个列表项（li）。每个列表项包含一个链接（a）元素，用于导航到不同的页面。第一个和最后一个链接分别用于导航到上一页和下一页。

请注意，我们还使用了“active”类名来指示当前选中的页面。这将高亮显示当前页面的链接。

3. 高级用法

Bootstrap的分页组件还提供了许多其他选项，可用于自定义其外观和行为。以下是一些常见的选项：

3.1 大小

可以使用“pagination-lg”或“pagination-sm”类名来调整分页组件的大小。例如：

htmlCopy Code
<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">上一页</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"><a class="page-link" href="#">下一页</a></li>
</ul>

3.2 对齐方式

可以使用“justify-content-center”或“justify-content-end”来调整分页组件中链接的对齐方式。例如：

htmlCopy Code
<ul class="pagination justify-content-center">
  <li class="page-item"><a class="page-link" href="#">上一页</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"><a class="page-link" href="#">下一页</a></li>
</ul>

3.3 禁用链接

可以使用“disabled”类名来禁用分页组件中的某些链接。例如：

htmlCopy Code
<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">上一页</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"><a class="page-link" href="#">下一页</a></li>
</ul>

3.4 自定义颜色

可以使用自定义CSS样式来修改分页组件的颜色。以下是一个示例CSS规则：

cssCopy Code
.pagination .page-link {
  background-color: #f5f5f5;
  border-color: #ddd;
  color: #333;
}

4. 实例

下面是一个完整的分页示例，显示了如何将所有选项组合在一起：

htmlCopy Code
<ul class="pagination pagination-lg justify-content-end">
  <li class="page-item disabled"><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 active"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">4</a></li>
  <li class="page-item"><a class="page-link" href="#">5</a></li>
  <li class="page-item"><a class="page-link" href="#">下一页</a></li>
</ul>

<style>
.pagination .page-link {
  background-color: #f5f5f5;
  border-color: #ddd;
  color: #333;
}
</style>