Los grupos de listas son un componente flexible y poderoso para mostrar una serie de contenido.
Modifíquelos y amplíelos para admitir casi cualquier contenido.
Ejemplo básico
El grupo de lista más básico es una lista desordenada con elementos de lista y las clases adecuadas.
Construya sobre él con las opciones que siguen, o con su propio CSS según sea necesario.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Elementos activos
Agregue
.active
a
.list-group-item
para indicar la selección activa actual.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Elementos deshabilitados
Agregue
.disabled
a
.list-group-item
para que
parezca
deshabilitado. Tenga en cuenta que algunos elementos con
.disabled
también requerirán JavaScript personalizado para deshabilitar completamente sus eventos de clic (por ejemplo, enlaces).
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Enlaces y botones
Utilice
<a>
s o
<button>
s para crear elementos de grupo de listas
accionables
con estados flotantes, desactivados y activos agregando
.list-group-item-action
. Separamos estas pseudoclases para asegurarnos de que los grupos de listas
hechos de elementos no interactivos (como
<li>
s o
<div>
s) no brinden una posibilidad de hacer clic o tocar.
Asegúrese de
no utilizar las
.btn
clases estándar aquí
.
Con
<button>
s, también puede hacer uso del
disabled
atributo en lugar de la
.disabled
clase. Lamentablemente, los correos electrónicos
<a>
no admiten el atributo discapacitado.
Enjuagar
Agregar
.list-group-flush
para eliminar algunos bordes y esquinas redondeadas para representar los elementos del grupo de la lista de borde a borde en un contenedor principal (por ejemplo, tarjetas).
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Horizontal
Agregar
.list-group-horizontal
para cambiar el diseño de los elementos del grupo de listas de vertical a horizontal en todos los puntos de interrupción.
Alternativamente, elija una variante receptiva
.list-group-horizontal-{sm|md|lg|xl}
para hacer que un grupo de lista sea horizontal comenzando en ese punto de interrupción
min-width
. Actualmente,
los grupos de listas horizontales no se pueden combinar con los grupos de listas alineadas.
ProTip:
¿Quiere elementos de grupo de lista de igual ancho cuando está horizontal?
Agregue
.flex-fill
a cada elemento de grupo de la lista.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Clases contextuales
Utilice clases contextuales para diseñar elementos de lista con un fondo y color con estado.
Dapibus ac facilisis in
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple info list group item
A simple warning list group item
A simple danger list group item
A simple light list group item
A simple dark list group item
A simple gray list group item
A simple tertiary list group item
Las clases contextuales también funcionan con
.list-group-item-action
. Tenga en cuenta la adición de los estilos de desplazamiento aquí que no
están presentes en el ejemplo anterior. También se apoya el
.active
estado; aplicarlo para indicar una selección activa en un elemento de grupo de lista contextual.
Transmitir significado a las tecnologías de asistencia
El uso del color para agregar significado solo proporciona una indicación
visual, que no se transmitirá a los usuarios de tecnologías de asistencia, como los lectores de pantalla.
Asegúrese de que la información indicada por el color sea obvia a partir
del contenido en sí (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la
.sr-only
clase.
Con insignias
Agregue insignias a cualquier elemento del grupo de la lista para mostrar los recuentos no leídos, la actividad y más con la ayuda de algunas
utilidades.
Cras justo odio
14
Dapibus ac facilisis en
2
Morbi leo risus
1
Contenido personalizado
Agregue casi cualquier HTML dentro, incluso para grupos de listas vinculadas como el siguiente, con la ayuda de
las utilidades
de
flexbox
.
Utilice el complemento JavaScript de pestaña,
bootstrap.js
inclúyalo individualmente o mediante el archivo compilado, para ampliar nuestro grupo de listas y crear paneles tabulables de contenido local.
Puede activar una navegación de grupo de lista sin escribir JavaScript simplemente especificando
data-toggle="list"
o en un elemento. Utilice estos atributos de datos en
.list-group-item.
Vía JavaScript
Habilite el elemento de la lista tabulable a través de JavaScript (cada elemento de la lista debe activarse individualmente):
Puede activar un elemento de lista individual de varias formas:
Efecto de desvanecimiento
Para hacer que el panel de pestañas se desvanezca, agregue
.fade
a cada uno
.tab-pane
. El primer panel de pestañas también debe
.show
hacer visible el contenido inicial.
Métodos
pestaña $ ().
Activa un elemento de lista y un contenedor de contenido. La pestaña debe tener una
data-target
o una
href
apuntando a un nodo contenedor en el DOM.
.tab ('mostrar')
Selecciona el elemento de la lista dado y muestra su panel asociado.
Cualquier otro elemento de la lista que se haya seleccionado previamente queda sin seleccionar y su panel asociado se oculta.
Vuelve a la persona que llama antes de que se muestre el panel de pestañas
(por ejemplo, antes de
shown.bs.tab
que ocurra el evento).
Eventos
Cuando se muestra una nueva pestaña, los eventos se activan en el siguiente orden:
hide.bs.tab
(en la pestaña activa actual)
show.bs.tab
(en la pestaña que se muestra)
hidden.bs.tab
(en la pestaña activa anterior, la misma que para el
hide.bs.tab
evento)
shown.bs.tab
(en la pestaña recién activa que se acaba de mostrar, la misma que para el
show.bs.tab
evento)
Si ninguna ficha ya estaba activo, los
hide.bs.tab
y
hidden.bs.tab
no serán despedidos eventos.
Tipo de evento
Descripción
show.bs.tab
Este evento se activa al mostrar la pestaña, pero antes de que se muestre la nueva pestaña. Utilice
event.targety
event.relatedTarget
para apuntar a la pestaña activa y la pestaña activa anterior (si está disponible) respectivamente.
muestra.bs.tab
Este evento se activa en la presentación de pestañas después de que se haya mostrado una pestaña. Utilice
event.targety
event.relatedTarget
para apuntar a la pestaña activa y la pestaña activa anterior (si está disponible) respectivamente.
hide.bs.tab
Este evento se activa cuando se muestra una nueva pestaña (y, por lo tanto, se oculta la pestaña activa anterior). Utilice
event.target y
event.relatedTarget
para apuntar a la pestaña activa actual y la nueva pestaña que pronto estará activa, respectivamente.
hidden.bs.tab
Este evento se activa después de que se muestra una nueva pestaña (y por lo tanto la pestaña activa anterior está oculta). Utilice
event.targety
event.relatedTarget
para apuntar a la pestaña activa anterior y la nueva pestaña activa, respectivamente.