Bootstrap5中的Pagination（分页）组件

在 Bootstrap 5 中，Pagination 是一种用于展示数据分页的组件，它允许用户在不同的页面之间浏览内容。分页组件通常用于显示大量数据，如文章列表、产品目录等，使用户可以分批次查看和访问数据，而不必一次性加载所有数据。

基本用法

要使用 Bootstrap 5 的 Pagination 组件，你需要在 HTML 中创建一个包含分页链接的元素结构。每个分页链接都使用一个特定的类来表示其状态（如当前页、可用页或禁用页）。

HTML 结构示例：

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

类名解释

• pagination: 应用到包含分页链接的 <ul> 元素上，表示这是一个分页组件。
• page-item: 应用到包含单个分页链接的 <li> 元素上，用于标记分页项。
• page-link: 应用到实际的分页链接 <a> 元素上，用于显示链接的样式。

此外，Bootstrap 5 还提供了一些额外的类来修改分页链接的状态和外观：

• .active: 用于标记当前页码，通常与 .page-link 类一起使用。
• .disabled: 用于禁用分页链接，使其无法点击。

激活状态

要标记当前活动的页面，你可以使用 .active 类。这通常用于高亮显示用户当前正在查看的页面。

<li class="page-item active">
  <a class="page-link" href="#">1</a>
</li>

禁用状态

如果你想要禁用某些分页链接（例如，当达到数据的最后一页时），你可以使用 .disabled 类。

<li class="page-item disabled">
  <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Next</a>
</li>

自定义样式

Bootstrap 5 允许你通过自定义 CSS 来改变分页组件的默认样式。你可以覆盖默认的颜色、字体大小、边框等。

.page-link {
  color: #your-color;
  background-color: #another-color;
  border-color: #border-color;
}

.page-item.active .page-link {
  background-color: #success-color;
  border-color: #success-color;
}

.page-item.disabled .page-link {
  color: #disabled-color;
  pointer-events: none;
}

自定义链接

默认情况下，分页链接是 <a> 元素，但你也可以使用按钮（<button>）作为分页链接，只需添加 .page-link 类即可。

<li class="page-item">
  <button class="page-link" type="button">1</button>
</li>

总结

Bootstrap 5 中的 Pagination 组件提供了一种简单而优雅的方式来展示数据的分页。通过结合 HTML 和 Bootstrap 的 CSS 类，你可以轻松地创建出功能性和美观性兼备的分页组件。