3.8.1. Listas no ordenadas
Utilízalas para agrupar elementos para los que su orden no importa. Bootstrap 3 también incluye los estilos adecuados para las las listas anidadas. Ejemplo:
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 3.16 Listas no ordenadas en Bootstrap 3
3.8.2. Listas ordenadas
En este caso, el orden de los elementos sí es importante y por eso se muestran numerados. Ejemplo:
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 3.17 Listas ordenadas en Bootstrap 3
3.8.3. Listas sin estilo
Como resulta muy habitual mostrar las listas sin viñetas y sin margen izquierdo, Bootstrap 3 incluye una clase CSS llamada .list-unstyled para aplicar esos estilos.
La única pega de esta clase es que sólo se aplica a los elementos de una lista y no a los elementos de sus listas anidadas. Así que si quieres aplicar los estilos a todos los elementos, añade la clase .list-unstyled también a las listas anidadas. Ejemplo:
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 3.18 Listas sin estilo en Bootstrap 3
3.8.4. Listas en línea
También resulta habitual mostrar los elementos de una lista horizontalmente, como por ejemplo en el menú principal de navegación. Para ello, Bootstrap 3 define una clase CSS llamada .inline-block. Ejemplo:
<ul class="list-inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 3.19 Listas en línea en Bootstrap 3
3.8.5. Listas de definición
No se utilizan mucho, pero Bootstrap 3 también incluye estilos por defecto para las listas de definición, formadas por pares término + definición. Ejemplo:
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 3.20 Listas de definición en Bootstrap 3
3.8.5.1. Listas de definición horizontales
Si lo prefieres, también es posible mostrar la lista de definición horizontalmente añadiendo la clase .dl-horizontal. Ejemplo:
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 3.21 Listas de definición horizontal en Bootstrap 3
Cuando una lista de definición se muestra horizontalmente, se cortan automáticamente con text-overflow los términos que son demasiado largos. En los dispositivos pequeños, los términos no se cortan pero se muestran verticalmente uno encima de otro.