Bootstrap 4 Lista de grupos
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>
Estado activo
- elemento activo
- segundo artículo
- tercer artículo
Utilice la .activeclase para resaltar el elemento actual:
Ejemplo
<ul class="list-group">
<li class="list-group-item
active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Grupo de listas con elementos vinculados
Para crear un grupo de listas con elementos vinculados, use <div>en lugar de <ul>
y <a>en lugar de <li>. Opcionalmente, agregue la .list-group-item-actionclase si desea un color de fondo gris al pasar el mouse:
Ejemplo
<div class="list-group">
<a href="#"
class="list-group-item list-group-item-action">First item</a>
<a
href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
Artículo deshabilitado
La .disabledclase agrega un color de texto más claro al elemento deshabilitado. Y cuando se usa en enlaces, eliminará el efecto de desplazamiento:
Ejemplo
<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#"
class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Vaciar/eliminar bordes
Use la .list-group-flushclase para eliminar algunos bordes y esquinas redondeadas:
- Primer elemento
- segundo artículo
- tercer artículo
- Cuarto artículo
Ejemplo
<ul class="list-group
list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Grupos de listas horizontales
Si desea que los elementos de la lista se muestren horizontalmente en lugar de verticalmente (uno al lado del otro en lugar de uno encima del otro), agregue la .list-group-horizontalclase a .list-group:
- Primer elemento
- segundo artículo
- tercer artículo
- Cuarto artículo
Ejemplo
<ul class="list-group
list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Clases Contextuales
Las clases contextuales se pueden usar para colorear los elementos de la lista:
- elemento de éxito
- Artículo secundario
- Elemento de información
- Elemento de advertencia
- elemento de peligro
- Artículo principal
- elemento oscuro
- artículo ligero
Las clases para colorear los elementos de la lista son:
.list-group-item-success, list-group-item-secondary, list-group-item-info,
list-group-item-warning, .list-group-item-danger, y .list-group-item-primary, :list-group-item-darklist-group-item-light
Ejemplo
<ul class="list-group">
<li class="list-group-item
list-group-item-success">Success item</li>
<li
class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li
class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li
class="list-group-item list-group-item-light">Light item</li>
</ul>
Vincular elementos con clases contextuales
Ejemplo
<div class="list-group">
<a href="#" class="list-group-item
list-group-item-action">Action item</a>
<a href="#"
class="list-group-item list-group-item-action list-group-item-success">Success item</a>
<a
href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>
Grupo de lista con insignias
Combine .badgeclases con clases de utilidad/ayuda para agregar insignias dentro del grupo de lista:
- Bandeja de entrada 12
- anuncios 50
- Basura 99
Ejemplo
<ul class="list-group">
<li class="list-group-item d-flex
justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary
badge-pill">50</span>
</li>
<li class="list-group-item
d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
Sugerencia: lea más sobre las clases de utilidad/ayuda de Bootstrap 4 en nuestro capítulo de utilidades de BS4 .