Bootstrap dl-horizontal: Guía Completa para Listas de Definición Horizontales

Las listas de definiciones, conocidas como <dl> en HTML, son una herramienta útil para presentar información de manera organizada y concisa. En Bootstrap, la clase dl-horizontal ofrece una manera sencilla de transformar estas listas en un formato horizontal, similar a un diccionario, donde los términos y sus definiciones se muestran lado a lado. Esta clase, junto con las clases dt y dd para términos y definiciones respectivamente, permite estructurar la información de forma atractiva y legible.

En esta guía, exploraremos a fondo la clase dl-horizontal de Bootstrap, incluyendo su uso, personalización, ejemplos y casos de aplicación. Aprenderemos cómo aprovechar al máximo esta herramienta para mejorar la presentación de información en nuestras páginas web.

Comprendiendo la Clase dl-horizontal

La clase dl-horizontal en Bootstrap redefine la presentación de las listas de definiciones <dl> de forma horizontal. Por defecto, los términos (<dt>) se muestran en una columna a la izquierda, y las definiciones (<dd>) en una columna a la derecha. Este diseño es especialmente útil para presentar información en un formato similar a un diccionario, donde cada término tiene su correspondiente definición.

Utilizando dl-horizontal: Un Ejemplo Práctico

Para usar dl-horizontal, simplemente agregue la clase al elemento <dl> en su código HTML. Ejemplo:

«`html

Nombre: Juan Pérez
Edad: 30 años
Profesión: Desarrollador Web

«`

Este código generará una lista de definiciones con los términos «Nombre», «Edad» y «Profesión» alineados a la izquierda, y sus definiciones a la derecha.

Personalizando dl-horizontal: Estilos y Opciones

Bootstrap ofrece un conjunto de clases auxiliares para personalizar el estilo de dl-horizontal. Estas clases le permiten controlar la presentación de la lista de definiciones, como el espaciado entre términos y definiciones, el ancho de las columnas y el alineado del texto.

Marginado: La clase dl-horizontal aplica un margen a los elementos <dl>. Para ajustar este margen, se pueden usar las clases de utilidad de Bootstrap m-x- (donde «x» es un número de 0 a 5) para controlar el margen superior e inferior de la lista de definiciones.
Espaciado: La clase dl-horizontal utiliza las clases p-x- (donde «x» es un número de 0 a 5) para controlar el espacio interior (padding) de las columnas.
Ancho: La clase dl-horizontal permite personalizar el ancho de las columnas mediante las clases de utilidad col-x-y (donde «x» es el tamaño de la pantalla y «y» es la cantidad de columnas).
Alineado: Para ajustar la alineación de los términos y definiciones, se pueden usar las clases text-x (donde «x» es «start», «center» o «end») para controlar la alineación del texto.

LEER: Select Distinct SQL: Elimina Duplicados y Optimiza Tus Consultas

Ejemplos de Uso de dl-horizontal

La clase dl-horizontal es ideal para diversos propósitos, desde la presentación de información básica hasta la creación de formularios de contacto complejos. A continuación, se presentan algunos ejemplos concretos:

Formulario de Contacto:
«`html

Nombre:
Email:
Mensaje:: </dd> <dt></dt> <dd><button type="submit" class="btn btn-primary">Enviar</button></dd> </dl> <p>«`</p> <ul> <li><strong>Información de Productos:</strong><br /> «`html</li> </ul> <dl class="dl-horizontal"> <dt>Nombre del Producto:</dt> <dd>SmartPhone X10</dd> <dt>Precio:</dt> <dd>$500</dd> <dt>Características:</dt> <dd>Pantalla de 6″, Cámara de 12MP, Memoria 128GB</dd> </dl> <p>«`</p> <h2>Inconvenientes y Consideraciones</h2> <p>Si bien la clase <code>dl-horizontal</code> es muy útil, es importante tener en cuenta algunos puntos:</p> <ul> <li><strong>Diseño:</strong> La clase <code>dl-horizontal</code> no es adecuada para todas las situaciones. Si necesita un diseño más flexible o complejo, es posible que deba considerar otras opciones.</li> <li><strong>Responsividad:</strong> Asegúrese de que su diseño se adapte correctamente a diferentes tamaños de pantalla. Las clases de utilidad de Bootstrap ayudan a lograr este objetivo.</li> <li><strong>Accesibilidad:</strong> Es esencial garantizar que el diseño sea accesible para usuarios con discapacidades. Asegúrese de que los elementos de la lista de definiciones sean correctamente etiquetados y que el contraste del texto sea adecuado.</li> </ul> <h2>dl-horizontal vs. Otros Componentes de Bootstrap</h2> <p>Existen otras clases y componentes en Bootstrap que pueden ser útiles para organizar y presentar información, como las listas con viñetas <code><ul></code> y <code><ol></code>, las tablas <code><table></code> y los grupos de botones <code>btn-group</code>. </p> <p>La clase <code>dl-horizontal</code> es particularmente adecuada para:</p> <ul> <li><strong>Presentar información de forma similar a un diccionario.</strong></li> <li><strong>Mostrar pares de datos relacionados, como etiquetas y valores.</strong></li> <li><strong>Crear formularios de contacto o de registro simples.</strong></li> </ul> <h2>Integración de dl-horizontal con Otras Clases</h2> <p>La clase <code>dl-horizontal</code> se integra perfectamente con otras clases de Bootstrap para personalizar el estilo y el diseño. </p> <ul> <li><strong>Clases de utilidad:</strong> Las clases de utilidad de Bootstrap, como las clases <code>m-x-</code>, <code>p-x-</code>, <code>text-x</code> y <code>col-x-y</code>, se pueden combinar con <code>dl-horizontal</code> para obtener un mayor control sobre el diseño de la lista de definiciones.</li> <li><strong>Clases de tipografía:</strong> Las clases de tipografía de Bootstrap, como <code>h1</code> a <code>h6</code>, <code>lead</code>, <code>small</code> y <code>mark</code>, se pueden aplicar a los términos y definiciones para controlar el tamaño y el estilo del texto.</li> <li><strong>Componentes de formulario:</strong> Los elementos de formulario de Bootstrap, como <code>input</code>, <code>textarea</code> y <code>button</code>, se pueden integrar con <code>dl-horizontal</code> para crear formularios de contacto o de registro.</li> </ul> <h2>Conclusión: dl-horizontal para una Organización Óptima</h2> <p>La clase <code>dl-horizontal</code> de Bootstrap es una herramienta valiosa para organizar y presentar información de manera clara y concisa. Su diseño horizontal, similar a un diccionario, facilita la comprensión de la información. </p> <p>La flexibilidad de <code>dl-horizontal</code>, junto con la amplia variedad de clases de utilidad y componentes de Bootstrap, permite personalizar el estilo y el diseño de la lista de definiciones para satisfacer las necesidades de cualquier proyecto web.</p> <div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactivelinux.com/indexof-js/" target="_blank" rel="dofollow" class="u57b9d84b662677a8f670ce1e6aa235da"><style> .u57b9d84b662677a8f670ce1e6aa235da { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); text-decoration:none; } .u57b9d84b662677a8f670ce1e6aa235da:active, .u57b9d84b662677a8f670ce1e6aa235da:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u57b9d84b662677a8f670ce1e6aa235da { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u57b9d84b662677a8f670ce1e6aa235da .ctaText { font-weight:bold; color:#464646; text-decoration:none; font-size: 16px; } .u57b9d84b662677a8f670ce1e6aa235da .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u57b9d84b662677a8f670ce1e6aa235da:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">LEER:</span> <span class="postTitle">indexOf() en JavaScript: Encuentra la Posición de un Elemento en un Array</span></div></a></div> <div class="clearfix mb-3"></div> <nav class="navigation post-navigation" aria-label="Entradas"> <h2 class="screen-reader-text">Navegación de entradas</h2> <div class="nav-links"><div class="nav-previous"><a href="https://reactivelinux.com/check-checkbox-html/" rel="prev"><div class="fa fa-angle-double-left"></div><span></span> Comprobar Casillas de Verificación en JavaScript: Guía Completa </a></div></div> </nav> </article> </div> <div class="py-4 px-3 mb-4 bs-card-box bs-single-related">  <div class="bs-widget-title mb-3">  <h4 class="title">Podría interesarte</h4> </div>  <div class="related-post"> <div class="row">   <div class="col-md-4"> <div class="bs-blog-post three md back-img bshre mb-md-0" > <a class="link-div" href="https://reactivelinux.com/check-checkbox-html/"></a> <div class="inner"> <div class="bs-blog-category"> <div class="bs-blog-category"><a class="blogarise-categories category-color-1" href="https://reactivelinux.com/category/desarrollo/" alt="Ver todas las entradas en Desarrollo"> Desarrollo </a></div> </div> <h4 class="title sm mb-0"> <a href="https://reactivelinux.com/check-checkbox-html/" title="Permalink to: Comprobar Casillas de Verificación en JavaScript: Guía Completa"> Comprobar Casillas de Verificación en JavaScript: Guía Completa</a> </h4> <div class="bs-blog-meta"> </div> </div> </div> </div>   <div class="col-md-4"> <div class="bs-blog-post three md back-img bshre mb-md-0" > <a class="link-div" href="https://reactivelinux.com/programmable-logic/"></a> <div class="inner"> <div class="bs-blog-category"> <div class="bs-blog-category"><a class="blogarise-categories category-color-1" href="https://reactivelinux.com/category/desarrollo/" alt="Ver todas las entradas en Desarrollo"> Desarrollo </a></div> </div> <h4 class="title sm mb-0"> <a href="https://reactivelinux.com/programmable-logic/" title="Permalink to: Dispositivos Lógicos Programables: Una guía completa para principiantes"> Dispositivos Lógicos Programables: Una guía completa para principiantes</a> </h4> <div class="bs-blog-meta"> </div> </div> </div> </div>   <div class="col-md-4"> <div class="bs-blog-post three md back-img bshre mb-md-0" > <a class="link-div" href="https://reactivelinux.com/onclick-html/"></a> <div class="inner"> <div class="bs-blog-category"> <div class="bs-blog-category"><a class="blogarise-categories category-color-1" href="https://reactivelinux.com/category/desarrollo/" alt="Ver todas las entradas en Desarrollo"> Desarrollo </a></div> </div> <h4 class="title sm mb-0"> <a href="https://reactivelinux.com/onclick-html/" title="Permalink to: Botón HTML onclick: Guía Completa al Evento de Clic en JavaScript"> Botón HTML onclick: Guía Completa al Evento de Clic en JavaScript</a> </h4> <div class="bs-blog-meta"> </div> </div> </div> </div>  </div> </div> </div>  </div> </div>  </div>  </main>  <div class="missed"> <div class="container"> <div class="row"> <div class="col-12"> <div class="wd-back"> <div class="bs-widget-title"> <h2 class="title">Te has perdido</h2> </div> <div class="missed-area"> <div class="bs-blog-post three md back-img bshre mb-0" "> <a class="link-div" href="https://reactivelinux.com/bootstrap-dl/"></a> <div class="inner"> <div class="bs-blog-category"><a class="blogarise-categories category-color-1" href="https://reactivelinux.com/category/desarrollo/" alt="Ver todas las entradas en Desarrollo"> Desarrollo </a></div> <h4 class="title sm mb-0"> <a href="https://reactivelinux.com/bootstrap-dl/" title="Permalink to: Bootstrap dl-horizontal: Guía Completa para Listas de Definición Horizontales"> Bootstrap dl-horizontal: Guía Completa para Listas de Definición Horizontales</a> </h4> </div> </div> <div class="bs-blog-post three md back-img bshre mb-0" "> <a class="link-div" href="https://reactivelinux.com/bimodal-distribution-vs-unimodal/"></a> <div class="inner"> <div class="bs-blog-category"><a class="blogarise-categories category-color-1" href="https://reactivelinux.com/category/distribuciones/" alt="Ver todas las entradas en Distribuciones"> Distribuciones </a></div> <h4 class="title sm mb-0"> <a href="https://reactivelinux.com/bimodal-distribution-vs-unimodal/" title="Permalink to: Distribución Unimodal vs Bimodal: Una Guía Completa"> Distribución Unimodal vs Bimodal: Una Guía Completa</a> </h4> </div> </div> <div class="bs-blog-post three md back-img bshre mb-0" "> <a class="link-div" href="https://reactivelinux.com/check-checkbox-html/"></a> <div class="inner"> <div class="bs-blog-category"><a class="blogarise-categories category-color-1" href="https://reactivelinux.com/category/desarrollo/" alt="Ver todas las entradas en Desarrollo"> Desarrollo </a></div> <h4 class="title sm mb-0"> <a href="https://reactivelinux.com/check-checkbox-html/" title="Permalink to: Comprobar Casillas de Verificación en JavaScript: Guía Completa"> Comprobar Casillas de Verificación en JavaScript: Guía Completa</a> </h4> </div> </div> <div class="bs-blog-post three md back-img bshre mb-0" "> <a class="link-div" href="https://reactivelinux.com/programmable-logic/"></a> <div class="inner"> <div class="bs-blog-category"><a class="blogarise-categories category-color-1" href="https://reactivelinux.com/category/desarrollo/" alt="Ver todas las entradas en Desarrollo"> Desarrollo </a></div> <h4 class="title sm mb-0"> <a href="https://reactivelinux.com/programmable-logic/" title="Permalink to: Dispositivos Lógicos Programables: Una guía completa para principiantes"> Dispositivos Lógicos Programables: Una guía completa para principiantes</a> </h4> </div> </div> </div> </div> </div> </div> </div> </div>   <footer > <div class="overlay" style="background-color: ;">  <div class="bs-footer-widget-area"> <div class="container"> <div class="row"> <div id="block-8" class="col-md-12 rotateInDownLeft animated bs-widget widget_block"><ul class="wp-block-page-list"><li class="wp-block-pages-list__item"><a class="wp-block-pages-list__item__link" href="https://reactivelinux.com/contacto/">Contacto</a></li><li class="wp-block-pages-list__item"><a class="wp-block-pages-list__item__link" href="https://reactivelinux.com/politica-de-cookies/">Política de cookies</a></li><li class="wp-block-pages-list__item"><a class="wp-block-pages-list__item__link" href="https://reactivelinux.com/politica-de-privacidad/">Política de privacidad</a></li><li class="wp-block-pages-list__item"><a class="wp-block-pages-list__item__link" href="https://reactivelinux.com/proposito/">Propósito</a></li><li class="wp-block-pages-list__item"><a class="wp-block-pages-list__item__link" href="https://reactivelinux.com/sobre-nosotros/">Sobre nosotros</a></li></ul></div><div id="block-9" class="col-md-12 rotateInDownLeft animated bs-widget widget_block"> <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://reactivelinux.com/sitemap.xml" target="_blank" rel="noreferrer noopener">Mapa del sitio web</a></div> </div> </div> </div>  </div>  </div> <div class="bs-footer-bottom-area"> <div class="container"> <div class="divide-line"></div> <div class="row align-items-center"> <div class="col-md-6"> <div class="footer-logo">  <div class="site-logo"> <a href="https://reactivelinux.com/" class="navbar-brand" rel="home"><img width="500" height="500" src="https://reactivelinux.com/wp-content/uploads/iconoh.png" class="custom-logo" alt="reactivelinux.com" decoding="async" srcset="https://reactivelinux.com/wp-content/uploads/iconoh.png 500w, https://reactivelinux.com/wp-content/uploads/iconoh-300x300.png 300w, https://reactivelinux.com/wp-content/uploads/iconoh-150x150.png 150w" sizes="(max-width: 500px) 100vw, 500px" /></a> </div> <div class="site-branding-text"> <p class="site-title-footer"> <a href="https://reactivelinux.com/" rel="home">reactivelinux.com</a></p> <p class="site-description-footer">En el vasto universo digital, cada línea de código es un conjuro y cada comando, una llave. ReactiveLinux es la forja donde se moldean los arquitectos de este mundo. Aquí no recitamos manuales; desciframos los secretos de la terminal de Linux hasta convertirla en una extensión de tu pensamiento. Te guiamos a través de la sintaxis de lenguajes que dan vida a las ideas, desde los cimientos de Python hasta la velocidad de Go. Exploramos las corrientes subterráneas de la tecnología que definirán el mañana. Este no es un simple sitio de tutoriales, es tu catalizador. Un lugar para reaccionar, crear y transformar el caos digital en orden y poder.</p> </div> </div> </div>   </div>  </div>  </div>  <div class="bs-footer-copyright"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <p class="mb-0"> Copyright © All rights reserved <span class="sep"> | </span> <a href="https://themeansar.com/free-themes/blogarise/" target="_blank">BlogArise</a> por <a href="https://themeansar.com" target="_blank">Themeansar</a>. </a> </p> </div> </div> </div> </div> </div> </div>  </footer>  </div>   <a href="#" class="bs_upscr bounceInup animated"><i class="fas fa-long-arrow-alt-up"></i></a>   <div class="modal fade bs_model" id="exampleModal" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button> </div> <div class="modal-body"> <form role="search" method="get" class="search-form" action="https://reactivelinux.com/"> <label> <span class="screen-reader-text">Buscar:</span> <input type="search" class="search-field" placeholder="Buscar …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Buscar" /> </form> </div> </div> </div> </div>   <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/blogarise/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <style> footer .footer-logo img{ width: 210px; height: 70px; } </style> <style type="text/css"> /*==================== Site title and tagline ====================*/ .site-title a, .site-description{ color: #000000; } body.dark .site-title a, body.dark .site-description{ color: #fff; } /*==================== Top Bar color ====================*/ .bs-head-detail, .mg-latest-news .bn_title{ background: #0a0a0a; } .bs-head-detail .top-date, .bs-head-detail { color: ; } /*==================== Menu color ====================*/ .navbar-wp { background: ; } .bs-default .navbar-wp .navbar-nav > li > a{ background: ; color: ; } .bs-default .navbar-wp .navbar-nav > li > a:hover{ color: ; } .navbar-wp .dropdown-menu > li > a { background: #fff; color: ; } .navbar-wp .dropdown-menu > li > a:hover, .navbar-wp .dropdown-menu > li > a:focus { background: ; color: ; } .bs-headthree .navbar-wp, .navbar-wp .dropdown-menu > li > a:hover, .navbar-wp .dropdown-menu > li > a:focus, .bs-headthree .right-nav a, .bs-headthree .switch .slider::before { background: ; } /*=================== Subscribe Button Color ===================*/ .desk-header .btn-subscribe{ background: ; color: ; border-color: ; } .desk-header .btn-subscribe:hover{ background: ; color: ; border-color: ; } /*=================== Breadeking News Color ===================*/ .bs-latest-news { background: ; } .bs-latest-news .bs-latest-news-slider a { color: ; } /*=================== Slider Color ===================*/ .homemain .bs-slide.overlay:before{ background-color: #00000099; } .bs-slide .inner .title a { color: ; } @media (min-width:991px) { .bs-slide .inner .title{ font-size: 50px; } } </style> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> <script type="text/javascript" src="https://reactivelinux.com/wp-content/themes/blogarise/js/dark.js?ver=6.9.1" id="blogarise-dark-js"></script> <script type="text/javascript" src="https://reactivelinux.com/wp-content/themes/blogarise/js/custom.js?ver=6.9.1" id="blogarise_custom-js-js"></script> </body> </html>