Paginación en Bootstrap 5
Cómo crear una paginación usando Bootstrap 5
Para hacer una paginación, asigne el .paginación clase a una lista desordenada, .ítem de página clase a los elementos de la lista y .enlace de página Clase al enlace presente dentro de cada elemento de la lista.
Html
El código anterior genera una paginación que muestra una numeración de 1 a 4, mientras que laquo y Raquo son nombres de entidades para comillas de doble ángulo de punta izquierda y apuntando a la derecha respectivamente. Estas entidades ayudan al usuario a mover la numeración de paginación hacia atrás y hacia adelante.
Producción
La salida muestra una paginación básica.
Cómo asignar estados activos y discapacitados a una paginación
El estado activo de una paginación muestra la página en la que se encuentra actualmente el usuario, mientras que el estado discapacitado hace que un enlace no sea climatario y hace que el usuario no hay más páginas para navegar.
Html
El fragmento de código creará una paginación con el elemento de la lista etiquetado como "retroceder" que se asigna el estado deshabilitado, mientras tanto, el estado activo se ha asignado al elemento de la lista etiquetado como "4" que indica que el usuario está actualmente en la cuarta página.
Producción
Los estados activos y discapacitados fueron asignados con éxito a la paginación.
Cómo escalar una paginación
Si desea escalar su paginación, use .paginación-SM clase para crear paginaciones de tamaño pequeño, mientras que use el .pagination-lg para generar paginaciones de gran tamaño.
Html
El código anterior generará paginaciones de tamaño pequeño y grande para demostrar la comparación entre los tamaños de ambas paginaciones.
Producción
Así es como puedes escalar tu paginación.
Cómo establecer la alineación de una paginación
Sin embargo, una paginación de forma predeterminada se coloca en la esquina izquierda de una página, sin embargo, si desea colocarla en el centro, use el .justificar el centro de contenido clase, mientras que use el .Justify-Content-End Para colocarlo en la esquina derecha de la página.
Html
El código anterior usa el .Justify-Content-Center Class, por lo tanto, la paginación creada como resultado se colocará en el centro de la página.
Producción
Esta es una paginación colocada en el centro.
Ahora colocemos la paginación en la esquina derecha de la página.
Html
El código anterior usa el .Clase Justify-Content-End, por lo tanto, la paginación se colocará al final de la página.
Producción
Esta es una paginación de posición correcta.
Conclusión
Se puede crear una paginación asignando el .paginación clase a una lista desordenada, .ítem de página clase a los elementos de la lista y .enlace de página Clase al enlace presente dentro de cada elemento de la lista. Si desea escalar una paginación, haga uso de la .paginación-SM, y .pagination-lg clases. Además, para alinear una paginación en el centro o al final de una página, use el .justificar el centro de contenido, y .Justify-Content-End clases respectivamente. Por último, también puede asignar estados activos y desbalados a los elementos de paginación.