Bootstrap5 分页
Bootstrap 5分页技术文档
概述
分页是一项常见的前端技术，它经常用于处理大量数据的方式，并在网站和应用中广泛使用。Bootstrap 5提供了一个内置的分页组件，它是一个简单、灵活和可定制的分页工具。
如何使用
Bootstrap 5的分页工具使用的示例代码如下：
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>
如上所示，分页组件是由一个<nav>元素、一个<ul>元素和若干个<li>元素（包含页码的按钮）组成的。
请注意，这个示例代码中的组件符合较为普遍的设计方案，但仍有多种可能的变体。
组件样式
Bootstrap 5为分页组件提供了5种预定义的样式（variant）：
pagination：基本样式pagination-lg：增大版pagination-sm：缩小版pagination-borderless：去边框模式pagination-rounded：圆角按钮
这些样式可以在<ul>元素上通过class属性指定，如下所示：
<ul class="pagination pagination-lg">
<!-- ...分页按钮... -->
</ul>
除了预定义的样式，用户还可以定义自己的样式。只需要首先定义需要的样式类（如pagination-custom），然后指定它为自定义的样式：
.pagination-custom .page-link {
color: #5063f0;
background-color: #e9ecef;
border-color: #dee2e6;
}
.pagination-custom .page-item.active .page-link {
z-index: 3;
color: #fff;
background-color: #5063f0;
border-color: #5063f0;
}
组件行为
Bootstrap 5的分页组件可以动态切换当前页，响应页面上设置的事件监听器和处理器。
使用jQuery，可以捕获页面中传入分页器的自定义事件（如page-changed），并相应地更新样式和分页状态。
例如，假设你有以下HTML片段，其中包含一个分页组件：
<nav aria-label="Page navigation example">
<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>
<!-- ...other pages... -->
</ul>
</nav>
您可以使用以下代码来捕获传入事件并更新分页状态：
$('.pagination').on('click', '.page-link', function() {
var $this = $(this);
if ($this.hasClass('disabled') || $this.hasClass('active')) {
return;
}
$this.trigger('page-changed');
$this.parent().siblings().children('.page-link').removeClass('active');
$this.addClass('active');
});
在这个示例中，首先检查当前是否处于不可用状态或已经处于活动状态。如果是，则停止进一步处理；否则，触发page-changed事件，并添加或删除所需的active类，以反映当前页面状态。