Listas de definición horizontales en Bootstrap

08/Ago/2015 Bootstrap 1 Comentario

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.

  1. <dl>...</dl>

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

  1. <dt>Termino</dt>
  2. <dd>Descripción</dd>
  3. </dl>

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

  1. <dt>Pizpireta</dt>
  2. <dd>Dicho de una mujer: Viva, pronta y aguda.</dd>
  3. <dt>Pulular</dt>
  4. <dd>Dicho de las personas, animales o cosas: Abundar y bullir en un lugar.</dd>
  5. <dt>Concupiscencia</dt>
  6. <dd>En la moral católica, deseo de bienes terrenos y, en especial, apetito desordenado de placeres deshonestos.</dd>
  7. </dl>

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

  1. <dl class="dl-horizontal">
  2. <dt>Pizpireta</dt>
  3. <dd>Dicho de una mujer: Viva, pronta y aguda.</dd>
  4. <dt>Pulular</dt>
  5. <dd>Dicho de las personas, animales o cosas: Abundar y bullir en un lugar.</dd>
  6. <dt>Concupiscencia</dt>
  7. <dd>En la moral católica, deseo de bienes terrenos y, en especial, apetito desordenado de placeres deshonestos.</dd>
  8. </dl>

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

Vídeos sobre Bootstrap


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

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

Víctor Cuervo

Tovar

Genial, gracias por el tip 🙂

Los comentarios están cerrados.