Para mostrar un paginador de datos muy común en sitios web Bootstrap nos provee de una clase llamada "pagination" que debemos asignársela a una lista no ordenada de HTML.
Veamos en un ejemplo como implementamos la componente de paginación:
<!DOCTYPE html>
<html>
<head>
<title>Prueba de Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<ul class="pagination">
<li><a href="#"><</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="#">6</a></li>
<li><a href="#">></a></li>
</ul>
</div>
</body>
</html>
Tenemos como resultado:
Podemos mostrar los enlaces más grandes o más pequeño dependiendo si le agregamos las clases "pagination-sm" o "pagination-lg":
<!DOCTYPE html>
<html>
<head>
<title>Prueba de Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<ul class="pagination">
<li><a href="#"><</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="#">6</a></li>
<li><a href="#">></a></li>
</ul>
<hr>
<ul class="pagination pagination-sm">
<li><a href="#"><</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="#">6</a></li>
<li><a href="#">></a></li>
</ul>
<hr>
<ul class="pagination pagination-lg">
<li><a href="#"><</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="#">6</a></li>
<li><a href="#">></a></li>
</ul>
</div>
</body>
</html>
Tenemos como resultado:
Paginador simple
Cuando queremos mostrar solo dos enlaces (Anterior - Siguiente) el Bootstrap nos provee otra componente que la creamos asignando la clase "pager" e implementamos una lista no ordenada solo con dos elementos:
<!DOCTYPE html>
<html>
<head>
<title>Prueba de Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<ul class="pager">
<li><a href="#">Anteriores</a></li>
<li><a href="#">Siguientes</a></li>
</ul>
</div>
</body>
</html>
Tenemos como resultado:
Los dos enlaces aparecen centrados en su contenedor, si queremos que aparezcan uno justificado a la izquierda y el otro justificado a la derecha debemos inicializar cada item de la lista con las clases: "previous" y "next".
<!DOCTYPE html>
<html>
<head>
<title>Prueba de Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<ul class="pager">
<li class="previous"><a href="#">Anteriores</a></li>
<li class="next"><a href="#">Siguientes</a></li>
</ul>
</div>
</body>
</html>
Tenemos como resultado:
Para deshabilitar enlaces de los componentes de paginación solo debemos agregar la clase "disabled" al item de la lista que queremos desactivar:
<!DOCTYPE html>
<html>
<head>
<title>Prueba de Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<ul class="pager">
<li class="previous disabled"><a href="#">Anteriores</a></li>
<li class="next"><a href="#">Siguientes</a></li>
</ul>
</div>
</body>
</html>
Tenemos como resultado:
