básica paginación
Si usted tiene un sitio web con un montón de páginas, es posible que desee agregar algún tipo de paginación para cada página.
Un básico en la paginación Bootstrap se ve así:
Para crear una paginación básico, añadir el .pagination clase a un <ul> elemento:
Ejemplo
<ul class="pagination">
<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> Inténtalo tú mismo " Estado activo
El estado activo muestra lo que es la página actual:
Añadir clase .active para que el usuario sepa qué página que él / ella está en:
Ejemplo
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> Inténtalo tú mismo " Disabled State
Un enlace desactivado, no se puede hacer clic:
Añadir clase .disabled si un enlace por alguna razón no está habilitado:
Ejemplo
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> Inténtalo tú mismo " Pagination Sizing
bloques de paginación también pueden ser de un tamaño a un tamaño más grande o un tamaño más pequeño:
Añadir clase .pagination-lg para los bloques más grandes o .pagination-sm para los bloques más pequeños:
Ejemplo
<ul class="pagination
pagination-lg">
<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>
<ul class="pagination pagination-sm">
<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> Inténtalo tú mismo " Migas de pan
Otra forma de paginación, es el pan rallado:
El .breadcrumb clase indica la ubicación de la página actual dentro de una jerarquía de navegación:
Ejemplo
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul> Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »
Completar Bootstrap de navegación de referencia
Para una referencia completa de todas las clases de navegación, vaya a nuestra completa Bootstrap de navegación de referencia .