Bootstrap 分页组件

解决方案简述

Bootstrap 提供了非常便捷的分页组件，可以快速实现美观且功能完善的分页效果。通过使用 Bootstrap 的内置类，开发者能够轻松创建响应式的分页导航栏，同时根据实际需求进行样式调整和功能扩展。

1. 基础分页实现

最简单的分页实现方式如下：

html</p>

<nav aria-label="Page navigation">
  <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 active"><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>

<p>

这段代码创建了一个基本的分页导航条，其中active类用于高亮显示当前页面。

2. 响应式分页优化

对于移动设备或屏幕较小的情况，可以添加响应式设计：

html</p>

<nav aria-label="Page navigation">
  <ul class="pagination justify-content-center">
    <!-- 分页项 -->
  </ul>
</nav>

<p>

justify-content-center类可以让分页居中显示，适合小屏幕布局。

3. 使用JavaScript增强功能

如果需要动态生成分页，可以结合JavaScript:

``javascript
function generatePagination(totalPages, currentPage) {
let paginationHTML =