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
类,以反映当前页面状态。