Bootstrap4 教程基础知识

Bootstrap4 Pagination

La pagination est un processus d'organisation du contenu en divisant le contenu en pages distinctes.
La pagination est utilisée de manière courante dans presque toutes les applications web, par exemple, les moteurs de recherche utilisent la pagination pour afficher un nombre limité de résultats sur les pages de résultats de recherche, ou pour afficher un nombre limité d'articles sur des blogs ou des forums.

Dans le processus de développement web, si vous rencontrez trop de contenu, il est généralement fait un traitement de pagination.

Bootstrap 4 Il est très simple de réaliser un effet de pagination.

Pour créer une pagination de base, ajoutez la classe .pagination sur l'élément <ul>. Ensuite, ajoutez .page sur l'élément <li>.-item 类：:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h2>分页</h2>
　　<p>要创建一个基本的分页可以在　ul　元素上添加　.pagination　类。然后在　li　元素上添加　.page-item 类：</p>　　　　　　　　　　　　　　　　　　
　　<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>
</div>
</body>
</html>

测试看看 ‹/›

当前页页码状态

当前页可以使用 .active 类来高亮显示：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h2>当前页页码状态</h2>
　　<p>当前页可以使用　.active　类来高亮显示：</p>　　　　　　　　　　　　　　　　　　
　　<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 active><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>
</div>
</body>
</html>

测试看看 ‹/›

不可点击的分页链接

.disabled 类可以设置分页链接不可点击:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h2>不可点击的分页链接</h2>
　　<p>.disabled 类可以设置分页链接不可点击:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination">
　　　　<li class="page-item disabled><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>
</div>
</body>
</html>

测试看看 ‹/›

分页显示大小

可以将分页条目设置为不同的大小。

.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h2>分页显示大小</h2>
　　<p>.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination pagination-lg">
　　　　<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>
　　　
　　<ul class="pagination pagination-sm">
　　　　<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>
</div>
</body>
</html>

测试看看 ‹/›

面包屑导航

.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h2>导航面包屑</h2>
　　<p>.breadcrumb　和　.breadcrumb-类 item 用于设置导航面包屑：</p>　　　　　　　　　　　　　　　　　　
　　<ul　class="breadcrumb">
　　　　<li　class="breadcrumb-item"><a　href="#">Photos</a></li>
　　　　<li　class="breadcrumb-item"><a　href="#">Summer　2017</a></li>
　　　　<li　class="breadcrumb-item"><a　href="#">Italy</a></li>
　　　　<li　class="breadcrumb-item　active">Rome</li>
　　</ul>
</div>
</body>
</html>

测试看看 ‹/›

Bootstrap4 组列表 Bootstrap4 进度条