TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear la paginación de Bootstrap 5?

23

Es posible que haya visto el componente de paginación en la mayoría de las páginas de índice y archivo de blogs. Generalmente, las páginas de índice muestran los últimos diez artículos y luego usan cargar más o paginación numerada para pasar a otras páginas. En Bootstrap 5, solo necesita incluir un fragmento de código para mostrar la paginación en diferentes estilos. Tenga en cuenta que Bootstrap es un marco de interfaz, solo ofrece un componente de paginación incorporado para fines de visualización. Debe codificarse usted mismo para agregar enlaces paginados automatizados en las páginas de índice y archivo.

Si su sitio tiene menos páginas, es fácil agregar manualmente cada enlace en la paginación. Pero para un sitio más grande, digamos que tiene 500 publicaciones en el blog, debe usar la configuración adecuada de secuencias de comandos y temas para agregar enlaces automáticos en la paginación.

Este tutorial cubre las siguientes formas de crear paginación Bootstrap:

  1. Creando la paginación predeterminada de Bootstrap
  2. Agregar iconos para la navegación anterior y siguiente
  3. Mostrando enlaces activos y deshabilitados
  4. Creando diferentes tamaños de paginación
  5. Usando diferentes alineaciones

El componente de paginación en Bootstrap no es más que una lista desordenada de elementos como a continuación:

<nav aria-label="Pagination"> <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>
  • Básicamente deberías usar

    componente para incluir la paginación.

  • Incluya una lista desordenada con la clase ". Paginación".

  • Cada elemento iluminado debe tener la clase ".page-item".

  • Cada enlace debe usar la clase ".page-link".

La paginación predeterminada se verá como se muestra a continuación:

¿Cómo crear la paginación de Bootstrap 5?

2 Agregar iconos para el anterior y el siguiente

De forma predeterminada, la paginación utiliza texto para las navegaciones anteriores y siguientes. En su lugar, puede usar íconos usando el siguiente código.

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</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> <span class="sr-only">Next</span> </a> </li> </ul> </nav>

Como los usuarios con discapacidad visual no pueden leer los iconos, debe utilizar el texto anterior / siguiente para los lectores de pantalla que utilizan la clase ".sr-only". Esto no se mostrará en el navegador. El componente se verá a continuación en el navegador:

¿Cómo crear la paginación de Bootstrap 5?

3 Mostrando enlace activo y enlace de desactivación

Puede mostrar el enlace activo en la paginación agregando la clase ".active" al elemento de lista requerido. Del mismo modo, agregue la clase ".disabled" para deshabilitar el clic en el enlace en particular. En el siguiente ejemplo, el texto de navegación anterior está deshabilitado y el enlace 2 se muestra como activo.

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"> <a class="page-link" href="#">2 <span class="sr-only">Active Page</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>

La clase ".disabled" utiliza la propiedad CSS predeterminada "pointer-events: none". Esto deshabilitará hacer clic con el mouse, pero los usuarios aún pueden usar la tecla de tabulación del teclado para resaltar el enlace y presionar la barra espaciadora para abrir la página vinculada. El atributo tabindex = "- 1 ″ se utiliza para deshabilitar el enlace para el acceso al teclado.

A continuación se muestra cómo se mostrará el enlace activo en la paginación. Los enlaces desactivados mostrarán el símbolo de detener el cursor cuando mueva el mouse.

¿Cómo crear la paginación de Bootstrap 5?

4 paginaciones de tamaño grande y pequeño

Al igual que la mayoría de los otros componentes de Bootstrap 4, la paginación también se puede cambiar de tamaño a más grande o más pequeña. El más grande debe contener la clase ".pagination-lg" con una lista desordenada como la siguiente:

<nav aria-label="Pagination"> <ul class="pagination pagination-lg"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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>

¡¡¡Y a la derecha !!! El más pequeño debe contener la clase ".pagination-sm":

<nav aria-label="Pagination"> <ul class="pagination pagination-sm"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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>

El componente de paginación más grande y más pequeño se verá a continuación:

¿Cómo crear la paginación de Bootstrap 5?

5 Centro y alineado a la derecha

La variación final es la alineación. Por defecto, el componente de paginación se alineará en el lado izquierdo. Puede hacerlo en el centro o en la derecha usando clases adicionales. Para la alineación central, agregue ".justify-content-center" a la lista desordenada.

<nav aria-label="Pagination"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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>

Y para la alineación correcta, agregue la clase ".justify-content-end" a la lista desordenada.

<nav aria-label="Pagination"> <ul class="pagination justify-content-end"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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>

Aprenda Bootstrap 5 (índice )


Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More