Pagination
Documentación y ejemplos para mostrar la paginación para indicar que existe una serie de contenido relacionado en varias páginas.
Visión general
Usamos un gran bloque de enlaces conectados para nuestra paginación, lo que hace que los enlaces sean difíciles de pasar por alto y fácilmente escalables, todo al tiempo que brinda grandes áreas de impacto.
La paginación se crea con elementos HTML de lista para que los lectores de pantalla puedan anunciar el número de enlaces disponibles. Utilice un
<nav>
elemento envolvente para identificarlo como una sección de navegación para lectores de pantalla y otras tecnologías de asistencia.
Además, como es probable que las páginas tengan más de una sección de navegación de este tipo, es recomendable proporcionar una descripción
aria-label
para
<nav>
reflejar su propósito.
Por ejemplo, si el componente de paginación se utiliza para navegar entre un conjunto de resultados de búsqueda, una etiqueta adecuada podría ser
aria-label="Search results pages".
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>Trabajar con iconos
¿Desea utilizar un icono o símbolo en lugar de texto para algunos enlaces de paginación?
Asegúrese de proporcionar la compatibilidad adecuada con el lector de pantalla con
aria
atributos.
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>Estados desactivados y activos
Los enlaces de paginación se pueden personalizar para diferentes circunstancias. Úselo
.disabled
para los enlaces en los que no se puede hacer clic y
.active
para indicar la página actual.
Mientras que la
.disabled
clase utiliza
pointer-events: none
para
tratar
deshabilitar la funcionalidad de enlace de
<a>
s, que la propiedad CSS aún no está estandarizado y no da cuenta de la navegación por teclado.
Como tal, siempre debe agregar
tabindex="-1"
enlaces deshabilitados y usar JavaScript personalizado para deshabilitar por completo su funcionalidad.
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
Opcionalmente, puede cambiar los anclajes activos o deshabilitados por
<span>
, u omitir el ancla en el caso de las flechas anterior / siguiente, para eliminar la funcionalidad de clic y evitar el enfoque del teclado mientras conserva los estilos deseados.
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<span class="page-link">
2
<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>Dimensionamiento
¿Te apetece una paginación más grande o más pequeña? Agregue
.pagination-lg
o
.pagination-sm
para tamaños adicionales.
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">
1
<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">
1
<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>Alineación
Cambie la alineación de los componentes de paginación con las utilidades de flexbox .
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>