Grupos lista básica
El grupo de la lista más básica es una lista desordenada con elementos de la lista:
- En primer elemento
- segundo punto
- tercer punto
Para crear un grupo de la lista básica, utilizar un <ul> elemento con la clase .list-group , y <li> elementos con class .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> Inténtalo tú mismo " Grupo lista con las insignias
También se pueden añadir emblemas a un grupo de la lista. Las insignias serán automáticamente colocados a la derecha:
- 12 Nuevos
- 5 Suprimido
- 3 Advertencias
Para crear una tarjeta de identificación, crear un <span> elemento con la clase .badge en el interior del elemento de la lista:
Ejemplo
<ul class="list-group">
<li
class="list-group-item"><span class="badge">12</span> New</li>
<li
class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul> Inténtalo tú mismo " Lista de grupos vinculados con los Artículos
Los elementos de un grupo lista también pueden ser hipervínculos. Esto añade un color de fondo gris en vuelo estacionario:
Para crear un grupo en lista con los objetos vinculados, el uso <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> Inténtalo tú mismo " Estado activo
Utilice la .active clase 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> Inténtalo tú mismo " artículo discapacitados
El grupo siguiente lista tiene un elemento deshabilitado:
Para desactivar un elemento, añadir el .disabled clase:
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> Inténtalo tú mismo " Las clases contextuales
clases contextuales se pueden utilizar para elementos de la lista de los colores:
- En primer elemento
- segundo punto
- tercer punto
- cuarto punto
Las clases para colorear list-elementos son: .list-group-item-success , list-group-item-info , list-group-item-warning , y .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> Inténtalo tú mismo " Contenido personalizado
Usted puede agregar casi cualquier elemento HTML dentro de una lista de grupos.
Bootstrap proporciona las clases .list-group-item-heading y .list-group-item-text que pueden ser utilizados 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> Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »