Ver índice de contenidos del libro

6.9. Paginadores

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="#">&laquo;</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="#">&raquo;</a></li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Paginador por defecto en Bootstrap 3

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="#">&laquo;</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:

Paginador con enlaces activos y deshabilitados en Bootstrap 3

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>&laquo;</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:

Paginador de diferente tamaño en Bootstrap 3

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:

Paginador simple en Bootstrap 3

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="#">&larr; Anterior</a></li>
  <li class="next"><a href="#">Siguiente &rarr;</a></li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Paginador simple con los enlaces alineados en Bootstrap 3

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="#">&larr; Anterior</a></li>
  <li class="next"><a href="#">Siguiente &rarr;</a></li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Paginador simple con los enlaces deshabilitados en Bootstrap 3

Figura 6.40 Paginador simple con los enlaces deshabilitados en Bootstrap 3