Ver índice de contenidos del libro

3.8. Listas

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:

Listas no ordenadas en Bootstrap 3

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:

Listas ordenadas en Bootstrap 3

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:

Listas sin estilo en Bootstrap 3

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:

Listas en línea en Bootstrap 3

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:

Listas de definición en Bootstrap 3

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:

Listas de definición horizontal en Bootstrap 3

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.