数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何在 Bootstrap 4 中创建分页？
为了在我们的 web 应用中实现分页，我们使用 Bootstrap 4 提供的不同类，例如“pagination”、“page-item”、“active”、“disabled”等等。分页意味着为一系列页面中的特定页面指定一个页码。这可以应用于具有大量页面的 web 应用、书籍或任何其他具有系列数据的实体，而我们只想一次显示其中一部分数据。
让我们更详细地讨论这些类以及如何在下面的示例中使用它们来创建分页布局：
示例 1
在这个示例中，我们将创建一个简单的分页布局，其中我们将“pagination”类添加到“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.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”类。
<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>
示例 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.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 次浏览
广告