Listas de elementos en Bootstrap

En este artículo se detallan las listas de elementos en Bootstrap, se pueden observar las listas de elementos simples, con enlaces, con badges y las listas de elementos compuestas (titular, texto y badge).

Para crear dicho contenido en la web, se crea un fichero de ejemplo con los elementos que se explicarán a continuación. Como en anteriores artículos, se facilita al final del post un fichero de ejemplos y también se incluye un enlace para probarlos sin necesidad de descargarlos.

 

LISTAS ELEMENTOS SIMPLES:

Las listas de elementos simples en Bootstrap, son listas cuya vista se engloba en celdas por cada uno de sus componentes. Las celdas ocupan todo el ancho del div que se especifique. En la siguiente captura se observa un ejemplo:

El código de las listas de elementos simples es sencillo, se crea un tag ul con class=”list-group”, dentro de éste tag se añaden los elementos de la lista que se deseen, para ello se crean tantos li como elementos se quieran, éstos li debe tener la class=”list-group-item”. Adicionalmente se crea un div superior al tag ul para especificar un ancho de 12 columnas.

 

LISTAS ELEMENTOS CON LINKS:

Las listas de elementos pueden ser creadas con enlaces, si el usuario pulsa sobre cada uno de los elementos, la página redirigirá al enlace insertado en el código desarrollado. A continuación se observa un ejemplo de una lista de elementos con links y uno de los elementos está activo.

A diferencia de la lista de elementos simple donde se disponía un tag ul, en la lista de elementos con links se crea un div con class=”list-group” y cada elemento será un enlace (tag a), con class=”list-group-item”, adicionalmente se puede añadir a la class la clase active, para indicar que el elemento es el elemento activo o principal.

 

LISTAS ELEMENTOS CON BADGES:

Las listas de elementos también tiene disponible la opción de insertar un badge, es decir, se puede insertar un indicador con elementos pendientes, por ejemplo, de leer, o de visitar, etc. En el siguiente ejemplo se observa una lista de elementos con badges:

El código desarrollado es identico a las listas de elementos simples, pero se añade dentro de cada elemento (tag li con class=”list-group-item”), un span con class=”badge” antes del texto del elemento listado.

 

LISTAS ELEMENTOS COMPUESTAS:

Las listas de elementos compuestas es un compendio de los elementos explicados en los anteriores apartados. En el ejemplo que se muestra se dispone de un titular, el elemento listado (o su explicación) y a su derecha un badge. Se puede apreciar que los badges se pueden situar a diferentes alturas: a la altura del titular o a la altura de la descripción del elemento.

A continuación se observa el código desarrollado para las listas de elementos compuestas. Se crea un div superior con class=”list-group”, cada elemento se crea con un tag a con class=”list-group-item, dentro de cada elemento se crea un titular con el tag h4 con class=”list-group-item-heading”, a continuación (si el badge se desea alineado con la descripción del elemento) se crea un tag span con class=”badge”. Finalmente un párrafo con class=”list-group-item-text”. Atención si se desea alinear el badge con el titular el span irá antes del tag h4.

 

EJEMPLO EN LÍNEA: Creado un enlace para que se pueda probar en la web los ejemplos comentados en el artículo. Para ello simplemente pulsar sobre el siguiente botón y la página se redirige a la web del ejemplo, sin necesidad de tener que descargarlo.

VER EL EJEMPLO EN LÍNEA

Además también se adjunta el fichero comprimido con los ejemplos utilizados en el post, para los que prefieren practicar de manera local en sus pc’s: listas de elementos. En próximos artículos se continuará con los componentes que se pueden utilizar en Bootstrap, como por ejemplo, los encabezados de página, entre otros elementos.

 

Se recuerdan los artículos relacionados sobre Bootstrap:

 
Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *