Lista de estilo de grupo en Bootstrap 5

Grupos de lista en un sitio web ensamble contenido interrelacionado para que sea más fácil para el usuario navegar a través del contenido web. Agregar grupos de listas simples puede ser un poco aburrido, sin embargo, el estilo de varias maneras mejorará la belleza del diseño web. Desde la creación de un grupo de listas básicas hasta el estilo de múltiples maneras se han discutido en este blog. Cantén el final para aprender sobre el estilo del grupo de listas en Bootstrap 5.

Cómo crear un grupo de listas

Para crear una lista, haga una lista desordenada y asigne el

elemento el .grupo de listas clase y asigne cada elemento de lista el .list-group-item clase.

Html



• Artículo 1


• Artículo 2


• Artículo 3



El código anterior generará un grupo de lista que consta de tres elementos de lista.

Producción

La salida anterior muestra un grupo de lista básico.

Cómo asignar estados activos y deshabilitados a un grupo de lista

Si desea definir el estado activo para un elemento de lista actual y un estado deshabilitado para un elemento no reclutable, simplemente asigne el elemento de la lista respectiva los estados activos y discapacitados.

Html



• Artículo 1


• Artículo 2


• Artículo 3



Aquí hemos asignado un estado activo al primer elemento y un estado deshabilitado al tercer elemento. El estado discapacitado simplemente no hace que un elemento vinculado no se pueda recluir, pero también elimina el efecto de desplazamiento.

Producción

Así es como asigna estados activos y deshabilitados para enumerar elementos en un grupo de listas.

Cómo asignar enlaces a los elementos de la lista en un grupo de lista

Si desea redirigir a su usuario a otra página o fuente web utilizando elementos en un grupo de listas, en lugar de hacer una lista desordenada, haga un DIV y asigne el .grupo de listas Clase y anido todos los enlaces presentes en las etiquetas de anclaje dentro de ese div. Además, asigne el .ítems de grupos de lista, y .list-group-item-acción clases a las etiquetas de anclaje presentes dentro del div.

Html


Artículo 1
Artículo 2
Artículo 3


El grupo de lista creado cuando el código anterior se ejecute será holgable y cada elemento del grupo estará vinculado a otra fuente.

Producción

Los elementos de la lista se vincularon con éxito.

Cómo crear un grupo de lista sin fronteras

Si desea eliminar los bordes de un grupo de lista, simplemente asigne el .Flush-Group-Flush clase para el

elemento junto con el .grupo de listas clase.

Html



• Artículo 1


• Artículo 2


• Artículo 3



El código anterior generará un grupo de listas que no tenga fronteras.

Producción

Así es como creas un grupo de listas sin fronteras.

Cómo numerar los elementos en un grupo de listas

Con el fin de numerar los elementos en un grupo de lista, use el .numerado de la lista clase.

Html



• Artículo 1


• Artículo 2


• Artículo 3



El fragmento de código indicado anteriormente dará números a cada uno de los elementos presentes dentro del div.

Producción

Los elementos de la lista estaban numerados.

Cómo alinear un grupo de listas horizontalmente

Un grupo de lista de forma predeterminada se alinea verticalmente, pero si prefiere alinearlo horizontalmente, use el .list-group-horizontal clase.

Html



• Artículo 1


• Artículo 2


• Artículo 3



El .Lista de la clase-Group-Horizontal se asignó a la

elemento junto con el .La clase de grupos de lista, por lo tanto, el grupo de lista generado como resultado se alineará horizontalmente.

Producción

La salida muestra un grupo de lista horizontal.

Cómo colorear los elementos en un grupo de listas

Una cosa divertida que hace para que su grupo de lista sea elegante es usar las clases de utilidad de color para proporcionar colores para enumerar los elementos del grupo de listas.

Html



• Artículo 1


• Artículo 2


• Artículo 3


• Artículo 4


• Artículo 5



Se generan un total de 5 elementos de la lista en el código anterior y a cada uno de estos elementos se les ha asignado un color diferente utilizando el .list-group-item-primario, .list-group-item-warning, .list-group-item-info, .list-group-item-exitoso, y .list-group-item-amenger clases respectivamente.

Producción

La salida muestra elementos de la lista de colores.

Si desea crear elementos de lista vinculados y proporcionarles colores también, siga el fragmento de código a continuación.

Html


Artículo 1
Artículo 2
Artículo 3
Artículo 4
Artículo 5


Para vincular los elementos de la lista, simplemente estamos haciendo un contenedor Div y anidamos varias etiquetas de anclaje dentro de ese contenedor que vinculará los elementos de la lista. Además, cada enlace se le ha proporcionado un color diferente.

Producción

El grupo de listas que se muestra arriba tiene elementos de la lista de colores y vinculados.

Conclusión

Se puede diseñar un grupo de lista utilizando varias clases de Bootstrap 5, por ejemplo, .Flush-Group-Flush crea un grupo de listas sin fronteras, .numerado de la lista Da número a los elementos del grupo de listas, y .list-group-horizontal alinea un grupo de listas horizontalmente. Además, para proporcionar colores a los elementos de un grupo de listas, use las clases de color asociadas con grupos de listas como .list-group-item-primario, .list-group-item-info, .list-group-item-amenger, etc. Esto y mucho más sobre la creación y el estilo del grupo de listas se ha discutido en este blog.