极客教程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 “类来增加分页的大小。