Listas de definición horizontales en Bootstrap

08/Ago/2015 Bootstrap 1 Comentario
Ejemplos Programación Bootstrap

Cuando manejamos una lista de definición en HTML esta se muestra en pantalla con el término en una línea y la definición en la siguiente línea. Mediante Bootstrap tenemos la posibilidad de crear listas de definición horizontales.

De esta manera las listas de definición hotizontales en Bootstrap nos mostrarán el término seguido de la descripción en una misma línea. Y todo centrado dentro de la página. Algo parecido a:

Término 1. Definición 1.
Término 2. Definición 2.
Término 3. Definición 3.
…
Término N. Definición N.

Lo primero que tenemos que hacer para poder crear listas de definición horizontales en Bootstrap es crear la lista de definiciones mediante un elemento dl.

...

Luego cada uno de los términos y descripciones utilizaremos los elementos dt y dd respectivamente.

Termino
Descripción

Con esta información podremos crear nuestra primera lista de definiciones:

Pizpireta
Dicho de una mujer: Viva, pronta y aguda.
Pulular
Dicho de las personas, animales o cosas: Abundar y bullir en un lugar.
Concupiscencia
En la moral católica, deseo de bienes terrenos y, en especial, apetito desordenado de placeres deshonestos.

Ahora para poder obtener listas de definición horizontales en Bootstrap vamos a utilizar la clase "dl-horizontal" sobre el elemento dl.

Pizpireta
Dicho de una mujer: Viva, pronta y aguda.
Pulular
Dicho de las personas, animales o cosas: Abundar y bullir en un lugar.
Concupiscencia
En la moral católica, deseo de bienes terrenos y, en especial, apetito desordenado de placeres deshonestos.

De esta forma ya habremos conseguido tener listas de definición horizontales en Bootstrap.

Vídeos sobre Bootstrap


Un comentario en “Listas de definición horizontales en Bootstrap”

Víctor Cuervo

Tovar

Genial, gracias por el tip :)

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.