Bootstrap 5学习教程，从入门到精通， Bootstrap 5 分页（Pagination）知识点及案例代码（13）

发布于：2025-06-15 ⋅ 阅读:(18) ⋅ 点赞:(0)

Bootstrap 5 分页（Pagination）知识点及案例代码

Bootstrap 5 提供了强大的分页组件，帮助开发者轻松实现分页功能。以下是关于 Bootstrap 5 分页的详细语法知识点以及一个完整的案例代码，包含详细注释，帮助初学者快速上手。

一、分页组件概述

分页组件用于在内容较多时进行分页显示，提升用户体验。Bootstrap 5 的分页组件包含多种样式和功能，如普通分页、带有图标的分页、禁用和激活状态等。

二、分页组件的语法知识点

1. 基本结构

分页组件使用 <ul> 元素，并添加 .pagination 类。每个分页项使用 <li> 元素，并添加 .page-item 类。链接使用 <a> 元素，并添加 .page-link 类。

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">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="#">Next</a></li>
</ul>

2. 激活状态

使用 .active 类来标识当前页。

<li class="page-item active"><a class="page-link" href="#">1</a></li>

3. 禁用状态

使用 .disabled 类来禁用某个分页项。

<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>

4. 大小调整

通过添加 .pagination-lg 或 .pagination-sm 类来调整分页的大小。

<ul class="pagination pagination-lg">
  <!-- 分页项 -->
</ul>

5. 对齐方式

使用 Flexbox 工具类来调整分页的对齐方式，如居中、右对齐等。

<ul class="pagination justify-content-center">
  <!-- 分页项 -->
</ul>

6. 分页项的图标

可以在分页链接中添加图标，例如使用 Font Awesome 图标。

<li class="page-item">
  <a class="page-link" href="#" aria-label="Previous">
    <span aria-hidden="true">&laquo;</span>
  </a>
</li>

7. 响应式分页

结合 Bootstrap 的栅格系统，可以创建响应式分页。

<div class="d-flex justify-content-center">
  <ul class="pagination">
    <!-- 分页项 -->
  </ul>
</div>

三、案例代码

以下是一个完整的 Bootstrap 5 分页示例，包含详细注释，展示如何实现基本的分页功能、激活和禁用状态、调整大小以及对齐方式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 5 分页示例</title>
  <!-- 引入 Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 自定义样式（可选） */
    .pagination-example {
      margin: 20px 0;
    }
  </style>
</head>
<body>

<div class="container">
  <h2 class="mt-5">Bootstrap 5 分页示例</h2>
  
  <!-- 基本分页 -->
  <h4>1. 基本分页</h4>
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">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>

  <!-- 激活和禁用状态 -->
  <h4>2. 激活和禁用状态</h4>
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1 <span class="sr-only">(current)</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="#">Next</a></li>
  </ul>

  <!-- 大小调整 -->
  <h4>3. 大小调整</h4>
  <ul class="pagination pagination-lg">
    <li class="page-item"><a class="page-link" href="#">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>
  <br>
  <ul class="pagination pagination-sm">
    <li class="page-item"><a class="page-link" href="#">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>

  <!-- 对齐方式 -->
  <h4>4. 对齐方式</h4>
  <ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="#">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>
  <br>
  <ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="#">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>

  <!-- 分页项的图标 -->
  <h4>5. 分页项的图标</h4>
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>

  <!-- 响应式分页 -->
  <h4>6. 响应式分页</h4>
  <div class="d-flex justify-content-center">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">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>
  </div>
</div>

<!-- 引入 Bootstrap 5 JS（可选） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

代码说明

  1. 引入 Bootstrap 5 CSS 和 JS

    <!-- 引入 Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入 Bootstrap 5 JS（可选） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    使用 CDN 引入 Bootstrap 5 的 CSS 和 JS 文件，确保分页组件的样式和功能正常。

  2. 基本分页

    <ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">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>

    创建基本的分页结构，包含“Previous”和“Next”链接，以及页码。

  3. 激活和禁用状态

    <ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item active"><a class="page-link" href="#">1 <span class="sr-only">(current)</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="#">Next</a></li>
</ul>
    • .disabled 类用于禁用“Previous”链接。
    • .active 类用于标识当前页“1”，并使用 <span class="sr-only">(current)</span> 提供辅助功能支持。

  4. 大小调整

    <ul class="pagination pagination-lg">
  <!-- 分页项 -->
</ul>
<br>
<ul class="pagination pagination-sm">
  <!-- 分页项 -->
</ul>
    • .pagination-lg 类用于增大分页尺寸。
    • .pagination-sm 类用于减小分页尺寸。

  5. 对齐方式

    <ul class="pagination justify-content-center">
  <!-- 分页项 -->
</ul>
<br>
<ul class="pagination justify-content-end">
  <!-- 分页项 -->
</ul>
    • .justify-content-center 类用于将分页居中对齐。
    • .justify-content-end 类用于将分页右对齐。

  6. 分页项的图标

    <ul class="pagination">
  <li class="page-item">
    <a class="page-link" href="#" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
    </a>
  </li>
  <!-- 其他分页项 -->
  <li class="page-item">
    <a class="page-link" href="#" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
    </a>
  </li>
</ul>

    使用 Font Awesome 图标（需引入 Font Awesome）或者使用 Bootstrap 内置的符号（如 &laquo; 和 &raquo;）来添加图标。

  7. 响应式分页

    <div class="d-flex justify-content-center">
  <ul class="pagination">
    <!-- 分页项 -->
  </ul>
</div>

    使用 Flexbox 工具类 .d-flex 和 .justify-content-center 来实现响应式居中对齐。

四、扩展功能

1. 使用图标库

如果需要使用图标库（如 Font Awesome），可以在分页链接中添加图标。例如：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<ul class="pagination">
  <li class="page-item">
    <a class="page-link" href="#" aria-label="Previous">
      <i class="fas fa-arrow-left"></i>
    </a>
  </li>
  <!-- 其他分页项 -->
  <li class="page-item">
    <a class="page-link" href="#" aria-label="Next">
      <i class="fas fa-arrow-right"></i>
    </a>
  </li>
</ul>

2. 动态分页

在实际应用中，分页通常需要与后端数据结合，实现动态分页。以下是一个简单的示例，展示如何使用 JavaScript 动态生成分页项：

<!-- 示例 HTML -->
<div id="pagination-container"></div>

<!-- 示例 JavaScript -->
<script>
  const totalPages = 10;
  const currentPage = 3;
  const container = document.getElementById('pagination-container');
  const ul = document.createElement('ul');
  ul.className = 'pagination';

  for (let i = 1; i <= totalPages; i++) {
    const li = document.createElement('li');
    li.className = 'page-item';
    if (i === currentPage) {
      li.classList.add('active');
    }
    const a = document.createElement('a');
    a.className = 'page-link';
    a.href = '#';
    a.textContent = i;
    li.appendChild(a);
    ul.appendChild(li);
  }

  container.appendChild(ul);
</script>

3. 使用 JavaScript 事件处理

可以通过 JavaScript 为分页链接添加事件处理，实现页面跳转或数据加载。例如：

<script>
  document.querySelectorAll('.page-link').forEach(function(element) {
    element.addEventListener('click', function(event) {
      event.preventDefault();
      const page = this.textContent;
      // 在这里添加跳转或数据加载逻辑
      console.log('当前页:', page);
    });
  });
</script>

五.案例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 分页组件示例</title>
    <!-- 引入 Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h2 class="mb-4">Bootstrap 5 分页组件示例</h2>
        
        <!-- 1. 基本分页示例 -->
        <section class="mb-5">
            <h4>1. 基本分页</h4>
            <nav aria-label="Page navigation example">
                <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 active" aria-current="page"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                </ul>
            </nav>
        </section>
        
        <!-- 2. 禁用和活动状态 -->
        <section class="mb-5">
            <h4>2. 禁用和活动状态</h4>
            <nav aria-label="Disabled and active states">
                <ul class="pagination">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item active" aria-current="page">
                        <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>
        </section>
        
        <!-- 3. 分页对齐方式 -->
        <section class="mb-5">
            <h4>3. 分页对齐方式</h4>
            
            <h5>左对齐（默认）</h5>
            <nav aria-label="Left-aligned pagination">
                <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>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                </ul>
            </nav>
            
            <h5 class="mt-3">居中对齐</h5>
            <nav aria-label="Centered pagination">
                <ul class="pagination 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>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                </ul>
            </nav>
            
            <h5 class="mt-3">右对齐</h5>
            <nav aria-label="Right-aligned pagination">
                <ul class="pagination justify-content-end">
                    <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>
                </ul>
            </nav>
        </section>
        
        <!-- 4. 分页尺寸 -->
        <section class="mb-5">
            <h4>4. 分页尺寸</h4>
            
            <h5>大尺寸分页 (.pagination-lg)</h5>
            <nav aria-label="Large pagination">
                <ul class="pagination pagination-lg">
                    <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>
                </ul>
            </nav>
            
            <h5 class="mt-3">默认尺寸</h5>
            <nav aria-label="Default pagination">
                <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>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                </ul>
            </nav>
            
            <h5 class="mt-3">小尺寸分页 (.pagination-sm)</h5>
            <nav aria-label="Small pagination">
                <ul class="pagination pagination-sm">
                    <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>
                </ul>
            </nav>
        </section>
        
        <!-- 5. 带图标的分页 -->
        <section class="mb-5">
            <h4>5. 带图标的分页</h4>
            <nav aria-label="Page navigation with icons">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="First">
                            <span aria-hidden="true">&laquo;&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </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 active"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Last">
                            <span aria-hidden="true">&raquo;&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </section>
        
        <!-- 6. 带省略号的分页（长列表） -->
        <section class="mb-5">
            <h4>6. 带省略号的分页（长列表）</h4>
            <nav aria-label="Page navigation with ellipsis">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item active"><a class="page-link" href="#">6</a></li>
                    <li class="page-item"><a class="page-link" href="#">7</a></li>
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">12</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </section>
    </div>

    <!-- 引入 Bootstrap 5 JS 及其依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

代码说明

  1. 基本结构：每个分页组件都包裹在 <nav> 元素中，并添加了 aria-label 以提高可访问性。

  2. 分页项：每个分页项使用 .page-item 类，链接使用 .page-link 类。

  3. 状态类：

    • .active - 高亮显示当前页
    • .disabled - 禁用分页项（不可点击）

  4. 对齐方式：

    • 使用 .justify-content-center 或 .justify-content-end 实现居中或右对齐

  5. 尺寸控制：

    • .pagination-lg - 大尺寸
    • .pagination-sm - 小尺寸

  6. 图标分页：

    • 使用 HTML 实体（如 &laquo;）添加图标
    • 添加 aria-label 描述图标含义

  7. 长列表分页：

    • 使用 .disabled 类和省略号表示隐藏的页码

六、总结

Bootstrap 5 提供了灵活且易于使用的分页组件，能够满足各种分页需求。通过掌握上述语法知识点，并结合实际案例进行练习，初学者可以快速实现功能丰富的分页功能。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布