以下是以资深软件开发工程师的视角，对“Bootstrap 4 分页（Pagination）”的专业回答。我将详细讲解 Bootstrap 4 中的分页组件，包括基础用法、高级配置和动态应用，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 Bootstrap 4 的最新版本（4.6.x）为参考。

Bootstrap 4 分页（Pagination）

目录

  1. 引言
  2. 分页概述
  1. 实现基础分页
  1. 高级分页配置
  1. 最佳实践与注意事项
  1. 结论

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 可选，用于动态交互）。

3.2 创建基础分页

  • 方法：使用 <nav> 包裹 .pagination 类，内部添加 .page-item 和 .page-link 表示页码。
  • 示例：
1
2
3
4
5
6
7
8
9
<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 实例：基础分页

以下是一个基础分页的完整示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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：右对齐。
  • 示例：
1
2
3
4
<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 类控制状态。
  • 示例：
1
2
3
4
5
$('.page-link').on('click', function(e) {
  e.preventDefault();
  $('.page-item').removeClass('active');
  $(this).parent().addClass('active');
});

4.3 实例：带交互的动态分页

以下是一个动态生成并带交互的分页示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!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 资源）。