Grupos de listas de arranque
Grupos de listas básicas
El grupo de lista más básico es una lista desordenada con elementos de lista:
- Primer elemento
- segundo artículo
- tercer artículo
Para crear un grupo de lista básico, use un <ul>elemento con clase .list-groupy
<li>elementos con clase .list-group-item:
Ejemplo
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Grupo de lista con insignias
También puede agregar insignias a un grupo de listas. Las insignias se colocarán automáticamente a la derecha:
- 12Nuevo
- 5Eliminado
- 3Advertencias
Para crear una insignia, cree un <span>elemento con clase .badge
dentro del elemento de la lista:
Ejemplo
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
Grupo de listas con elementos vinculados
Los elementos de un grupo de lista también pueden ser hipervínculos. Esto agregará un color de fondo gris al pasar el mouse:
Para crear un grupo de listas con elementos vinculados, use <div>en lugar de <ul>
y <a>en lugar de <li>:
Ejemplo
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Estado activo
Utilice la .activeclase para resaltar el elemento actual:
Ejemplo
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Artículo deshabilitado
El siguiente grupo de listas tiene un elemento deshabilitado:
Para deshabilitar un elemento, agregue la .disabledclase:
Ejemplo
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Clases Contextuales
Las clases contextuales se pueden usar para colorear los elementos de la lista:
- Primer elemento
- segundo artículo
- tercer artículo
- Cuarto artículo
Las clases para colorear elementos de lista son:
.list-group-item-success, list-group-item-info,
list-group-item-warningy .list-group-item-danger:
Ejemplo
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
Contenido personalizado
Puede agregar casi cualquier HTML dentro de un elemento de grupo de lista.
Bootstrap proporciona las clases .list-group-item-headingy
.list-group-item-textque se pueden usar de la siguiente manera:
Ejemplo
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>