Bootstrap 4 如何创建分页功能

Bootstrap 4 如何创建分页功能

为了在我们的Web应用程序中实现分页,我们使用Bootstrap 4提供给我们的不同类,如 “分页”、”页-项”、”活动”、”禁用 “等。分页是指为一系列页面中的某一特定页面指定一个页码。这可能适用于一个有很多页面的网络应用,一本书,或任何其他有一系列数据的实体,我们每次只想显示其中的一部分。

让我们进一步讨论这些类,以及我们如何在下面的例子中使用它们来创建一个分页布局 −

例子1

在这个例子中,我们将创建一个简单的分页布局,我们将在 “ul “HTML元素中添加 “分页 “类,并给它的子元素 “li “添加 “page-item “和 “page-link “类。

<html lang="en">
<head>
   <title>How to create pagination in Bootstrap 4?</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net/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 “类。

<html lang="en">
<head>
   <title>How to create pagination in Bootstrap 4?</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net/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>

例子3

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

<html lang="en">
<head>
   <title>How to create pagination in Bootstrap 4?</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net/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>

总结

在这篇文章中,我们学习了如何使用Bootstrap 4在Web应用程序中创建分页布局,并借助于三个例子。在第一个例子中,我们使用了 “page-item “和 “page-link “类;在第二个例子中,我们使用了 “active “和 “disabled “类来表示主动和被动项目;在第三个例子中,我们使用了 “pagination-lg “类来增加分页的大小。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

Bootstrap教程