Bootstrap 简明教程
Bootstrap - Pagination
本章将讨论分页。分页是一种组件,它允许您在多页上显示项目列表。通过将大型数据集拆分为更小、更易于管理的部分,它提供了遍历这一大型数据集的简单方法。为将其识别为屏幕阅读器和其他辅助技术的导航部分,请使用 <nav> 包裹元素。
This chapter will discuss about the pagination. Pagination is a component that allows you to display a list of items across multiple pages. It provides a simple way to navigate through a large set of data by splitting it into smaller, more manageable chunks. In order to identify it as a navigation section to screen readers and other assistive technologies, use the wrapping <nav> element.
一个页面可能有多个导航部分,因此建议为 <nav> 元素提供描述性 aria-label ,以便达到正确目的。
There could be more than one navigation section on pages, so it is advised to provide a descriptive aria-label for the <nav> element, so that the right purpose is served.
例如,如果分页组件会被一家鞋类网上商店用来在可用的产品(鞋子)之间导航,那么一个合适的标签可能是 aria-label="Search shoes" 。
Like, if the pagination component is used by an online store selling shoes for navigating between a set of products (shoes) available, an appropriate label could be aria-label="Search shoes".
Simple Pagination
为创建一个基本分页,请将 .pagination 类添加到一个 <ul> 元素中。为每个 <li> 元素添加 .page-item ,并为其中的链接添加 .page-link 类。
In order to create a basic pagination, add the .pagination class to an <ul> element. To each <li> element add the .page-item and a .page-link class to the link inside it.
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
You can edit and try running this code using the *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Pagination</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-4">
<nav aria-label="Navigation page">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
</body>
</html>
Working with icons
让我们看看如何插入一个符号或图标来代替某分页链接文本。为了让屏幕阅读器有效运作,用户必须使用正确的 aria 属性。
Let’s look at how to insert a symbol or icon in place of some pagination link text. For screen readers to operate effectively, users must use correct aria attributes.
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
You can edit and try running this code using the *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Pagination</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-4">
<nav aria-label="Navigation page">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
Pagination state - disabled and active
可以根据具体情况修改分页链接。对于看上去不可点击的链接,请使用 .disabled 类,并使用 .active 类以显示当前正在查看的页面。
Pagination links can be modified based on the circumstances. For links that don’t appear to be clickable, use .disabled class, and use .active class to show the current page that is now being viewed.
-
Users can use .disabled class for un-clickable links
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
You can edit and try running this code using the *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Pagination</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-4">
<nav aria-label="Disabled link">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
-
Users can use the .active class in order to "highlight" the current page
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
You can edit and try running this code using the *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Pagination</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-4">
<nav aria-label="Active link">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
</body>
</html>
Sizing
用户可以在较大和较小的分页样式之间进行选择。
Users can select between stylish larger and smaller pagination.
以下是用于不同大小的类:
Following are the classes to be used for different sizes:
-
.pagination-lg for larger size
-
.pagination-sm for smaller size.
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
You can edit and try running this code using the *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Pagination</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-4">
<nav aria-label="Sizing large">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
</ul>
</nav>
<nav aria-label="Sizing small">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
</ul>
</nav>
</div>
</body>
</html>
Alignment
对齐选项用于控制分页组件在网页上的定位。
The alignment options can be used to control the positioning of pagination components on a web page.
水平左对齐是分页的默认对齐方式。如下所示,将类 .justify-content-center 添加到 .pagination 基本类,将其居中显示在页面上。
Horizontally left alignment is the default for pagination. As demonstrated below, add the class .justify-content-center to the .pagination base class to centre it on the page.
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
You can edit and try running this code using the *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Pagination</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-4">
<nav aria-label="Pagination center alignment">
<ul class="pagination justify-content-center">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>
</div>
</body>
</html>
Alignment using a flex utility
参考在 flex 实用工具下提供的各种类,以设置分页组件的对齐方式。可以使用 * flexbox utilities* 将对齐方式设置为左、中、右等等。
Refer the various classes provided under flex utilities to set the alignment of the pagination component. Alignment can be set as left, center, right, and many more using flexbox utilities.
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
You can edit and try running this code using the *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Pagination</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-4">
<nav aria-label="Pagination right aligned using flex">
<ul class="pagination justify-content-end d-flex">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>
</div>
</body>
</html>