以下是以资深软件开发工程师的视角，对“Bootstrap 4 分页（Pagination）”的专业回答。我将详细讲解 Bootstrap 4 中的分页组件，包括基础用法、高级配置和动态应用，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 Bootstrap 4 的最新版本（4.6.x）为参考。
Bootstrap 4 分页（Pagination）
目录
1. 引言
Bootstrap 4 的分页（Pagination）组件是一个导航工具，用于将内容分块显示并提供页面切换功能，适用于列表、表格等场景。本教程将从基础到高级，带你掌握如何在 Bootstrap 4 中使用分页，并提供实用示例。
2. 分页概述
2.1 什么是分页？
- 定义：分页是一组链接或按钮，用于导航到不同的页面，通常包括“上一页”、“下一页”和页码。
- 实现方式：通过
.pagination类和.page-item、.page-link子元素构建。
2.2 分页的应用场景
- 数据分块：如文章列表或搜索结果的分页展示。
- 导航控制：在多页内容中快速跳转。
- 参考：Bootstrap 4 官方文档 Pagination 部分（getbootstrap.com/docs/4.6）。
3. 实现基础分页
3.1 准备工作
- 引入依赖：需要 Bootstrap 4 的 CSS 文件（JS 可选，用于动态交互）。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
3.2 创建基础分页
- 方法：使用
<nav>包裹.pagination类，内部添加.page-item和.page-link表示页码。 - 示例：
<nav aria-label="分页导航">
<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>
3.3 实例：基础分页
以下是一个基础分页的完整示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 基础分页</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<style>
body { padding: 20px; }
</style>
</head>
<body>
<div class="container">
<h2>基础分页</h2>
<nav aria-label="分页导航">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">上一页</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1 <span class="sr-only">(当前页)</span></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>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
- 运行方法：保存为 HTML 文件，在浏览器中打开。
- 效果：显示一个分页导航，包含“上一页”（禁用）、页码 1（高亮）、2、3 和“下一页”，页面链接可点击。
4. 高级分页配置
4.1 分页大小和对齐
- 大小：
.pagination-lg：大分页。.pagination-sm：小分页。- 对齐：
.justify-content-center：居中。.justify-content-end：右对齐。- 示例：
<ul class="pagination pagination-lg justify-content-center">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>
4.2 动态分页和交互
- 方法：使用 JavaScript 动态生成页码，添加
.active和.disabled类控制状态。 - 示例：
$('.page-link').on('click', function(e) {
e.preventDefault();
$('.page-item').removeClass('active');
$(this).parent().addClass('active');
});
4.3 实例：带交互的动态分页
以下是一个动态生成并带交互的分页示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 带交互的动态分页</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<style>
body { padding: 20px; }
#content { margin-top: 20px; }
</style>
</head>
<body>
<div class="container">
<h2>带交互的动态分页</h2>
<nav aria-label="动态分页导航">
<ul class="pagination justify-content-center" id="pagination"></ul>
</nav>
<div id="content">当前页内容将显示在这里</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
const totalPages = 5;
let currentPage = 1;
function renderPagination() {
const $pagination = $('#pagination');
$pagination.empty();
// 上一页
$pagination.append(`
<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
<a class="page-link" href="#" data-page="${currentPage - 1}">上一页</a>
</li>
`);
// 页码
for (let i = 1; i <= totalPages; i++) {
$pagination.append(`
<li class="page-item ${i === currentPage ? 'active' : ''}">
<a class="page-link" href="#" data-page="${i}">${i}</a>
</li>
`);
}
// 下一页
$pagination.append(`
<li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
<a class="page-link" href="#" data-page="${currentPage + 1}">下一页</a>
</li>
`);
}
function updateContent() {
$('#content').text(`当前显示第 ${currentPage} 页内容`);
}
// 初始化
renderPagination();
updateContent();
// 点击事件
$('#pagination').on('click', '.page-link', function(e) {
e.preventDefault();
const page = parseInt($(this).data('page'));
if (page >= 1 && page <= totalPages && page !== currentPage) {
currentPage = page;
renderPagination();
updateContent();
}
});
</script>
</body>
</html>
- 运行方法：保存为 HTML 文件，在浏览器中打开。
- 效果：
- 显示一个动态分页导航，包含“上一页”、页码 1-5 和“下一页”。
- 点击页码切换高亮状态，“上一页”和“下一页”在边界时禁用。
- 下方内容区域显示当前页码信息。
5. 最佳实践与注意事项
5.1 设计与实现建议
- 导航清晰：始终提供“上一页”和“下一页”，页码数量不宜过多。
- ARIA 支持：使用
aria-label描述分页功能，提升可访问性。 - 响应式：在小屏幕上考虑使用
.pagination-sm或省略部分页码。
5.2 性能优化与调试
- 性能：动态生成大量页码时，限制显示范围（如只显示当前页 ±5）。
- 调试：检查
.active和.disabled类切换是否正确，确保事件绑定生效。
6. 结论
Bootstrap 4 的分页组件通过 .pagination 类提供了灵活的导航功能，适用于内容分块展示。本文通过基础和高级示例展示了其用法，帮助你快速上手。如果需要按钮控制，可参考 Bootstrap 4 按钮 或访问官方文档（getbootstrap.com/docs/4.6）。
回答特点
- 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
- 实用性：从静态分页到动态交互，覆盖实际需求。
- 内部链接：通过
<a href="#ID">跳转，如 实现基础分页。 - 出站链接：嵌入正文，指向官方文档。
如何运行
- 直接保存为 HTML 文件，在浏览器中打开即可（需联网加载 CDN 资源）。
发表回复