English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Tutoriais Básicos

Bootstrap4 Paginação

A paginação é o processo de organizar conteúdo dividindo o conteúdo em páginas separadas.
A paginação é frequentemente usada em quase todos os aplicativos web, em alguma forma ou outra, por exemplo, os motores de busca usam paginação para exibir um número limitado de resultados na página de resultados de busca, ou para exibir um número limitado de artigos em blogs ou fóruns.

Durante o processo de desenvolvimento da web, se encontrar muito conteúdo, geralmente será feito o processamento de paginação.

Bootstrap 4 É muito fácil implementar o efeito de paginação.

Para criar uma paginação básica, você pode adicionar a classe .pagination ao elemento <ul>. Em seguida, adicione .page ao elemento <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>
Teste e Veja ‹/›

当前页页码状态

当前页可以使用 .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>
Teste e Veja ‹/›

不可点击的分页链接

.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>
Teste e Veja ‹/›

分页显示大小

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

.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>
Teste e Veja ‹/›

面包屑导航

.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>Navegação de Pão</h2>
　　<p>.breadcrumb　e　.breadcrumb-Classe item é usada para definir a navegação de pão：</p>　　　　　　　　　　　　　　　　　　
　　<ul　class="breadcrumb">
　　　　<li　class="breadcrumb-item"><a　href="#">Fotos</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>
Teste e Veja ‹/›
Bootstrap4 Grupo de ListaBootstrap4 Barra de Progresso