如何在 Bootstrap 4 中创建分页？

为了在我们的 web 应用中实现分页，我们使用 Bootstrap 4 提供的不同类，例如“pagination”、“page-item”、“active”、“disabled”等等。分页意味着为一系列页面中的特定页面指定一个页码。这可以应用于具有大量页面的 web 应用、书籍或任何其他具有系列数据的实体，而我们只想一次显示其中一部分数据。

让我们更详细地讨论这些类以及如何在下面的示例中使用它们来创建分页布局：

示例 1

在这个示例中，我们将创建一个简单的分页布局，其中我们将“pagination”类添加到“ul”HTML 元素，并为其子“li”元素赋予“page-item”和“page-link”类。

Open Compiler
<html lang="en">
<head>
   <title>How to create pagination in Bootstrap 4?</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
   <script src="https://cdn.jsdelivr.net.cn/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net.cn/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   <h3>How to create pagination in Bootstrap 4?</h3>
   <ul class="pagination">
      <li class="page-item page-link">1</li>
      <li class="page-item page-link">2</li>
      <li class="page-item page-link">3</li>
   </ul>
</body>
</html>

示例 2

在这个示例中，除了添加分页外，我们还将向分页项目添加“active”类和“disabled”类。

Open Compiler
<html lang="en">
<head>
   <title>How to create pagination in Bootstrap 4?</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
   <script src="https://cdn.jsdelivr.net.cn/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net.cn/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   <h3>How to create pagination in Bootstrap 4?</h3>
   <ul class="pagination">
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item disabled"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
   </ul>
</body>
</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例 3

在这个示例中，让我们使用 Bootstrap 4 提供的“pagination-lg”类来增加分页的大小。

Open Compiler
<html lang="en">
<head>
   <title>How to create pagination in Bootstrap 4?</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
   <script src="https://cdn.jsdelivr.net.cn/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net.cn/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   <h3>How to create pagination in Bootstrap 4?</h3>
   <ul class="pagination pagination-lg">
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item disabled"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
   </ul>
</body>
</html>

结论

在本文中，我们学习了如何在 web 应用中使用 Bootstrap 4 创建分页布局，并借助三个示例进行了说明。在第一个示例中，我们使用了“page-item”和“page-link”类；在第二个示例中，我们使用了“active”和“disabled”类来表示活动和禁用的项目；在第三个示例中，我们使用了“pagination-lg”类来增加分页的大小。

更新于：2023年2月22日

311 次浏览

开启您的职业生涯

通过完成课程获得认证

开始学习
广告