如何在 Bootstrap 4 中创建分页?
bootstrapweb developmentfront end technology
为了在我们的 Web 应用程序中实现分页，我们使用 Bootstrap 4 提供的不同类，例如"pagination"、"page-item"、"active"、"disabled"等等。分页是指为一系列页面中的特定页面指定页码。这适用于包含大量页面的 Web 应用程序、书籍或任何其他包含一系列数据且我们只想一次显示其中一部分的实体。
让我们在下面的示例中进一步讨论这些类以及如何使用它们创建分页布局 -
示例 1
在此示例中，我们将创建一个简单的分页布局，其中我们将向"ul"HTML 元素添加"pagination"类，并为其子"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"类来增加分页的大小。
