Si dispones de un sitio web con varias páginas, quizá desees añadir algún tipo de paginación.
Una paginación básica en Bootstrap tiene el siguiente aspecto:
Paginación básica
Para crear una paginación básica, debes de añadir la clase .pagination a un elemento <ul>.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Webdisenia - Ejemplo Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="pagination">
<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>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
Página activa
Puedes añadir la clase .active, para mostrar al usuario cuál es la página en la que se encuentra.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Webdisenia - Ejemplo Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
Desactivar una página
Añade la clase .disabled, si por alguna razón deseas desactivar el enlace de alguna página, para que el usuario no pueda acceder a ella.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Webdisenia - Ejemplo Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
Tamaño de bloques de paginación
Puedes cambiar el tamaño de los bloques, para que estos sean más grandes o más pequeños.
Añade la clase .pagination-lg para bloques grandes o la clase .pagination-sm para bloques pequeños.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Webdisenia - Ejemplo Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="pagination pagination-lg">
<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>
</ul>
<ul class="pagination pagination-sm">
<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>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
¿Qué es Pager?
Pager es otra forma de paginación.
Pager provee de los botones (enlaces) Siguiente y Anterior.
Para crear los botones Anterior/Siguiente debes añadir la clase .pager a un elemento <ul>
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo Bootstrap - Webdisenia</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
La clase .pager provee de los botones (enlaces) Anterior y Siguiente:
<ul class="pager">
<li><a href="#">Anterior</a></li>
<li><a href="#">Siguiente</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
Alineación de los botones
Usa las clases .previous and .next para alinear cada botón a los lados de la página.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo Bootstrap - Webdisenia</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
Las clases .previous y .next para alinear los enlaces a los lados de la página:
<ul class="pager">
<li class="previous"><a href="#">Anterior</a></li>
<li class="next"><a href="#">Siguiente</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
