Paginación Bootstrap

Paginación básica

Si tiene un sitio web con muchas páginas, es posible que desee agregar algún tipo de paginación a cada página.

Una paginación básica en Bootstrap se ve así:

• 1
• 2
• 3
• 4
• 5

Para crear una paginación básica, agregue la .paginationclase a un <ul>elemento:

Estado activo

El estado activo muestra cuál es la página actual:

• 1
• 2
• 3
• 4
• 5

Agregue una clase .activepara que el usuario sepa en qué página se encuentra:

Estado deshabilitado

No se puede hacer clic en un enlace deshabilitado:

• 1
• 2
• 3
• 4
• 5

Agregar clase .disabledsi un enlace por alguna razón está deshabilitado:

Tamaño de paginación

Los bloques de paginación también se pueden dimensionar a un tamaño más grande o más pequeño:

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

Agregue clase .pagination-lgpara bloques más grandes o .pagination-smpara bloques más pequeños:

Migas de pan

Otra forma de paginación son las migas de pan:

1. Casa
2. Privado
3. Fotos
4. Vacaciones

La .breadcrumbclase indica la ubicación de la página actual dentro de una jerarquía de navegación:

<ul class="">
  <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>

Referencia completa de navegación de Bootstrap

Para obtener una referencia completa de todas las clases de navegación, vaya a nuestra completa Referencia de navegación de Bootstrap .