Las listas de elementos de Bootstrap 3 son componentes bastante flexibles y poderosos, ya que permiten mostrar listados que están formados por elementos complejos.
6.18.1. Ejemplo sencillo
La lista más sencilla está formada por un listado no ordenado de elementos con las clases CSS adecuadas. A partir de este listado básico, puedes añadir otros estilos y elementos, tal y como se explica en las siguientes secciones. Ejemplo:
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.59 Lista de objetos en Bootstrap 3
6.18.2. Listas de elementos con badges
Al añadir un componente de tipo badge a cualquier elemento de una lista de objetos, el badge se alineará a la derecha automáticamente. Ejemplo:
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.60 Lista de objetos con badges en Bootstrap 3
6.18.3. Listas de elementos con enlaces
Para crear una lista de elementos pinchables, reemplaza los elementos <li> por elementos <a> y enciérralos dentro de un elemento <div> en vez de un elemento <ul>. Ejemplo:
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.61 Lista de objetos con enlaces en Bootstrap 3
6.18.4. Listas de elementos complejos
El componente de las listas de elementos es tan flexible que puedes incluir prácticamente cualquier código HTML, incluso cuando todos los elementos de la lista son enlaces. Ejemplo:
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Título del elemento de la lista</h4>
<p class="list-group-item-text">...</p>
</a>
</div>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 6.62 Lista de objetos complejos en Bootstrap 3