Grupo de listados
Links y botones

<< Migas de pan Modal >>

Hay varios modelos básicos de listados predefinidos en Bootstrap, veamos poco a poco cada uno de ellos cómo hacerlos.

<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>

Si queremos indicar qué sección se encuentra activa, lo que podemos hacer es añadir la clase .active al ítem correspondiente

<ul class="list-group">
  <li class="list-group-item active">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>

Si queremos que algún ítem de la lista esté desactivado, le añadiremos la clase .disabled.

Si queremos añadirle funcionalidad al listado, podemos convertir esos li en enlaces o botones y añadirle a posteriori la funcionalidad que queramos.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>

Podemos personalizar los listados haciéndolos numéricos (.list-group-numeric), Podemos añadirle un subcontent metiendo un div dentro, o cambiándole el color de fondo al ítem con .list-group-item-primary, por ejemplo. Podemos ver más aquí.

<< Migas de pan Modal >>