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