Bootstrap 3 incluye dos componentes para paginar los contenidos de tu sitio o aplicación web. El primero es un completo paginador que muestra enlaces para todas las páginas de resultados y el segundo es un paginador simple con los enlaces Anterior y Siguiente.
6.9.1. Paginador por defecto
El paginador por defecto de Bootstrap 3 está basado en el del sitio Rdio y queda bien tanto para las aplicaciones como para los sitios web. Como el paginador es bastante grande, el usuario nunca lo pierde de vista. Además su diseño escala bien a un gran número de páginas y sus enlaces son fáciles de pinchar. Ejemplo:
<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="#">»</a></li>
</ul>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.35 Paginador por defecto en Bootstrap 3
6.9.2. Enlaces activos y enlaces deshabilitados
El aspecto de los enlaces del paginador se puede modificar para adaptarlo a tus necesidades. Aplica la clase .disabled a los enlaces que no se puedan pinchar y aplica la clase .active al enlace que corresponde a la página en la que se encuentra el usuario. Ejemplo:
<ul class="pagination">
<li class="disabled">
<a href="#">«</a>
</li>
<li class="active">
<a href="#">1 <span class="sr-only">(página actual)</span></a>
</li>
...
</ul>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.36 Paginador con enlaces activos y deshabilitados en Bootstrap 3
Cuando un enlace no sea pinchable, puedes reemplazar su etiqueta <a> por la etiqueta <span>. De esta forma, además de mostrarse con el estilo correcto, no se podrán pinchar de ninguna manera. Ejemplo:
<ul class="pagination">
<li class="disabled">
<span>«</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(página actual)</span></span>
</li>
...
</ul>6.9.3. Cambiando el tamaño del paginador
Gracias a las clases CSS especiales .pagination-lg y .pagination-sm puedes hacer el paginador más grande o más pequeño respectivamente. Ejemplo:
<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.37 Paginador de diferente tamaño en Bootstrap 3
6.9.4. Paginador simple
El paginador simple de Bootstrap 3 es ideal para sitios web sencillos como blogs o revistas. Este paginador solamente muestra dos enlaces para ir a la página Anterior o Siguiente de los resultados. Ejemplo:
<ul class="pager">
<li><a href="#">Anterior</a></li>
<li><a href="#">Siguiente</a></li>
</ul>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.38 Paginador simple en Bootstrap 3
6.9.5. Alineando los enlaces del paginador simple
Si lo prefieres, también puedes alinear los enlaces a la izquierda y a la derecha con las clases CSS especiales .previous y .next. Ejemplo:
<ul class="pager">
<li class="previous"><a href="#">← Anterior</a></li>
<li class="next"><a href="#">Siguiente →</a></li>
</ul>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.39 Paginador simple con los enlaces alineados en Bootstrap 3
6.9.6. Deshabilitando los enlaces del paginador simple
Los enlaces del paginador simple también pueden utilizar la clase .disabled para mostrar un aspecto deshabilitado. Ejemplo:
<ul class="pager">
<li class="previous disabled"><a href="#">← Anterior</a></li>
<li class="next"><a href="#">Siguiente →</a></li>
</ul>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.40 Paginador simple con los enlaces deshabilitados en Bootstrap 3