Bootstrap5 分页学习笔记

什么是分页？

分页是将大的数据集合分成若干个较小的部分，每次只显示其中一部分，以避免页面过于复杂而影响用户浏览体验。

Bootstrap5 分页组件

Bootstrap5 分页组件可用于在网站或应用程序中创建分页控件。该组件提供了一种简单的方法，可以快速创建漂亮的分页控件。

分页组件的基本结构

分页组件的基本结构包括上一页、下一页、第一页和最后一页链接以及数字链接。

htmlCopy Code
<nav>
  <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>

分页组件的样式

Bootstrap5 提供了多种样式，可以让您自定义分页组件的外观。以下是一些样式：

• 基本样式：.pagination
• 圆角样式：.rounded
• 胶囊样式：.pill

你可以将上述样式与 .pagination 类一起使用，以获得更多样式效果。

使用实例

下面是一个简单的分页控件示例，其中包括了上一页、下一页、第一页和最后一页链接：

htmlCopy Code
<nav>
  <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>

如需使用其他样式，请通过添加类来自定义样式。例如，以下代码演示了如何创建一个带有圆角样式的分页控件：

htmlCopy Code
<nav>
  <ul class="pagination rounded">
    <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>

总结

通过使用 Bootstrap5 分页组件，可以轻松地创建分页控件，并为用户提供更好的浏览体验。在创建分页控件时，您可以使用多种样式来自定义外观，以满足不同的网站或应用程序需求。