Tutorial de Bootstrap Básico

Bootstrap Plugins

Etiquetas de Bootstrap Navegación de migas de Bootstrap

Navegación de paginación de Bootstrap

Este capítulo explicará las características de paginación soportadas por Bootstrap. La paginación es una lista sin orden, Bootstrap la maneja de la misma manera que otros elementos de interfaz.

Paginación (Pagination)

La tabla a continuación enumera las clases que Bootstrap proporciona para manejar la paginación.

Clase	Descripción	Código de ejemplo
.pagination	Añade esta clase para mostrar la paginación en la página.	<ul> 　　<li><a href="#">«</a>/a></li> 　　<li><a href="#">1</a></li> 　　...... </ul>
.disabled, .active	Puedes personalizar los enlaces, utilizando .disabled Para definir enlaces no clicables, utilizando .active Para indicar la página actual.	<ul> 　　<li><a href="#">«</a>/a></li> 　　<li><a href="#">1<span>(actual)</span></a></li> 　　...... </ul>
.pagination-lg, .pagination-sm	Usa estas clases para obtener diferentes tamaños de elementos.	<ul>.../ul> <ul>.../ul> <ul>.../ul>

Paginación predeterminada

Los siguientes ejemplos demuestran las clases .pagination Uso:

Ejemplo en línea

Ejemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Ejemplo　-　Paginación predeterminada</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<ul class="pagination">
	<li><a href="#">«</a>/a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul>
</body>
</html>

Prueba para ver ‹/›

Los resultados se muestran a continuación:

Estado de la paginación

Los siguientes ejemplos demuestran las clases .disabled、.active Uso:

Ejemplo en línea

Ejemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Ejemplo　-　Estado de la paginación</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<ul class="pagination">
	<li><a href="#">«</a>/a></li>
	<li class="active"><a href="#">1</a></li>
	<li class="disabled"><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul>
</body>
</html>

Prueba para ver ‹/›

Los resultados se muestran a continuación:

Tamaño de la paginación

Los siguientes ejemplos demuestran las clases .pagination-* Uso:

Ejemplo en línea

Ejemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Ejemplo　-　Tamaño de la paginación</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<ul class="pagination pagination-lg">
	<li><a href="#">«</a>/a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul><br>
<ul class="pagination">
	<li><a href="#">«</a>/a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul><br>
<ul class="pagination pagination-sm">
	<li><a href="#">«</a>/a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">»</a>/a></li>
</ul>
</body>
</html>

Prueba para ver ‹/›

Los resultados se muestran a continuación:

Paginación (Pager)

Si deseas crear un enlace de paginación simple para proporcionar navegación al usuario, puedes hacerlo mediante paginación. Al igual que los enlaces de paginación, la paginación también es una lista desordenada. Por defecto, los enlaces se muestran centrados. La siguiente tabla enumera las clases que Bootstrap maneja para la paginación.

Clase	Descripción	Código de ejemplo
.pager	Añade esta clase para obtener los enlaces de paginación.	<ul> 　　<li><a href="#">Anterior</a>/a></li> 　　<li><a href="#">Siguiente</a>/a></li> </ul>
.previous, .next	Usar clase .previous Alinea los enlaces a la izquierda, usando .next Alinea los enlaces a la derecha.	<ul> 　　<li><a href="#">← Antiguo</a>/a></li> 　　<li><a href="#">Nuevo →</a>/a></li> </ul>
.disabled	Añade esta clase para deshabilitar el botón correspondiente.	<ul> 　　<li><a href="#">← Antiguo</a>/a></li> 　　<li><a href="#">Nuevo →</a>/a></li> </ul>

Clase

Descripción

Código de ejemplo

.pager

Añade esta clase para obtener los enlaces de paginación.

<ul>
　　<li><a href="#">Anterior</a>/a></li>
　　<li><a href="#">Siguiente</a>/a></li>
</ul>

.previous, .next

Usar clase .previous Alinea los enlaces a la izquierda, usando .next Alinea los enlaces a la derecha.

<ul>
　　<li><a href="#">← Antiguo</a>/a></li>
　　<li><a href="#">Nuevo →</a>/a></li>
</ul>

.disabled

Añade esta clase para deshabilitar el botón correspondiente.

<ul>
　　<li><a href="#">← Antiguo</a>/a></li>
　　<li><a href="#">Nuevo →</a>/a></li>
</ul>

Paginación predeterminada

Los siguientes ejemplos demuestran las clases .pager Uso:

Ejemplo en línea

Ejemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Ejemplo　-　Paginación predeterminada/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<ul class="pager">
	<li><a href="#">Anterior</a>/a></li>
	<li><a href="#">Siguiente</a>/a></li>
</ul>
</body>
</html>

Prueba para ver ‹/›

Los resultados se muestran a continuación:

Enlaces alineados

Los siguientes ejemplos demuestran las clases .previous, .next Uso:

Ejemplo en línea

Ejemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Ejemplo　-　Enlaces alineados en la paginación/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<ul class="pager">
	<li class="previous"><a href="#">← Antiguo</a>/a></li>
	<li class="next"><a href="#">Nuevo →</a>/a></li>
</ul>
</body>
</html>

Prueba para ver ‹/›

Los resultados se muestran a continuación:

Estado de paginación

Los siguientes ejemplos demuestran las clases .disabled Uso:

Ejemplo en línea

Ejemplo

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Ejemplo　-　Estado de paginación</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
</head>
<body>
<ul class="pager">
	<li class="previous disabled"><a href="#">← Antiguo</a>/a></li>
	<li class="next"><a href="#">Nuevo →</a>/a></li>
</ul>
</body>
</html>

Prueba para ver ‹/›

Los resultados se muestran a continuación:

Más ejemplos de paginación

Clase	Descripción	Ejemplo
.pager	Enlace de paginación simple, alineado al centro.	Prueba
.previous	Estilo del botón de página anterior en .pager, alineado a la izquierda	Prueba
.next	Estilo del botón de página siguiente en .pager, alineado a la derecha	Prueba
.disabled	Enlace inhabilitado	Prueba
.pagination	Enlaces de paginación	Prueba
.pagination-lg	Enlaces de paginación de tamaño mayor	Prueba
.pagination-sm	Enlaces de paginación de tamaño más pequeño	Prueba
.disabled	Enlace inhabilitado	Prueba
.active	Estilo de enlace de la página de acceso actual	Prueba

Etiquetas de Bootstrap Navegación de migas de Bootstrap