Bootstrap4 Tutoriales básicos

Bootstrap4 Grupo de listas Bootstrap4 Barra de progreso

Bootstrap4 Paginación

La paginación es el proceso de organizar el contenido dividiendo el contenido en páginas separadas.
La paginación se utiliza con frecuencia en prácticamente todas las aplicaciones web, por ejemplo, los motores de búsqueda utilizan la paginación para mostrar un número limitado de resultados en las páginas de resultados de búsqueda, o en blogs o foros para mostrar un número limitado de artículos en cada página.

En el proceso de desarrollo web, si se encuentra con contenido excesivo, generalmente se realiza un procesamiento de paginación.

Bootstrap 4 Se puede implementar fácilmente el efecto de paginación.

Para crear una paginación básica, puede agregar la clase .pagination al elemento <ul>. Luego, agregue .page al 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="#">Anterior</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="#">Siguiente</a></li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

当前页页码状态

当前页可以使用 .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="#">Anterior</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="#">Siguiente</a></li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

不可点击的分页链接

.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="#">Anterior</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="#">Siguiente</a></li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

分页显示大小

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

.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="#">Anterior</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="#">Siguiente</a></li>
　　</ul>
　　　
　　<ul　class="pagination　pagination-sm">
　　　　<li　class="page-item"><a　class="page-link"　href="#">Anterior</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="#">Siguiente</a></li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

面包屑导航

.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>Navegación de miga de pan</h2>
　　<p>.breadcrumb　y　.breadcrumb-La clase item se utiliza para configurar la navegación de miga de pan：</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>

Prueba aquí ‹/›

Bootstrap4 Grupo de listas Bootstrap4 Barra de progreso