Os grupos de listas son un compoñente flexible e poderoso para mostrar unha serie de contidos. Modifícaos e estendeos para admitir case calquera contido.
Exemplo básico
O grupo de listas máis básico é unha lista sen ordenar con elementos de lista e as clases adecuadas. Constrúeo coas opcións que seguen ou co teu propio CSS segundo sexa necesario.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestíbulo no eros
Elementos activos
Engadir .activea a .list-group-itempara indicar a selección activa actual.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestíbulo no eros
Elementos desactivados
Engade .disableda un .list-group-itempara que pareza desactivado. Teña en conta que algúns elementos con .disabledtamén precisarán JavaScript personalizado para desactivar completamente os seus eventos de clic (por exemplo, ligazóns).
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestíbulo no eros
Ligazóns e botóns
Engadindo . <a>_ <button>_ _ _ .list-group-item-actionSeparamos estas pseudoclases para asegurarnos de que os grupos de listas feitos de elementos non interactivos (como <li>s ou <div>s) non ofrezan un clic ou toque.
Asegúrate de non usar aquí as clases estándar.btn .
Con <button>s, tamén podes facer uso do disabledatributo en lugar da .disabledclase. Lamentablemente, <a>s non admite o atributo desactivado.
Fluxado
Engadir .list-group-flushpara eliminar algúns bordos e cantos redondeados para renderizar os elementos do grupo da lista de bordo a bordo nun contenedor principal (por exemplo, tarxetas).
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestíbulo no eros
Horizontal
Engadir .list-group-horizontalpara cambiar o deseño dos elementos do grupo da lista de vertical a horizontal en todos os puntos de interrupción. Alternativamente, escolla unha variante receptiva .list-group-horizontal-{sm|md|lg|xl}para facer un grupo de listas horizontal comezando no punto de interrupción dese punto min-width. Actualmente , os grupos de listas horizontais non se poden combinar con grupos de listas vaciadas.
ProTip: Queres elementos do grupo da lista de ancho igual cando están horizontais? Engadir .flex-filla cada elemento do grupo da 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 contextuais
Use clases contextuais para dar estilo aos elementos da lista cun fondo e cor con estado.
Dapibus ac facilisis in
Un simple elemento de grupo de lista principal
Un elemento de grupo de lista secundario sinxelo
Un simple elemento de grupo da lista de éxitos
Un simple elemento de grupo da lista de perigos
Un simple elemento de grupo de lista de avisos
Un simple elemento de grupo de lista de información
Un simple elemento de grupo de lista de luz
Un simple elemento de grupo de lista escura
As clases contextuais tamén funcionan con .list-group-item-action. Teña en conta a adición dos estilos de hover aquí non presentes no exemplo anterior. Tamén se apoia o .activeEstado; aplícao para indicar unha selección activa nun elemento de grupo de lista contextual.
Transmitir significado ás tecnoloxías de asistencia
Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (por exemplo, o texto visible) ou se inclúa a través de medios alternativos, como o texto adicional oculto coa .sr-onlyclase.
Con distintivos
Engade insignias a calquera elemento do grupo da lista para mostrar contas non lidas, actividade e moito máis coa axuda dalgunhas utilidades .
Cras justo odio14
Dapibus ac facilisis in2
Morbi leo risus1
Contido personalizado
Engade case calquera HTML dentro, mesmo para grupos de listas vinculadas como o seguinte, coa axuda das utilidades de flexbox .
Use o complemento de JavaScript da pestana (inclúeo individualmente ou a través do bootstrap.jsficheiro compilado) para ampliar o noso grupo de listas e crear paneis con pestanas de contido local.
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit son nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor are voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud son incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.
Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.
Usando atributos de datos
Pode activar unha navegación de grupo de lista sen escribir JavaScript simplemente especificando data-toggle="list"ou nun elemento. Use estes atributos de datos en .list-group-item.
Vía JavaScript
Activa o elemento da lista con tabulacións mediante JavaScript (cada elemento da lista debe activarse individualmente):
Podes activar un elemento de lista individual de varias maneiras:
Efecto de desvanecemento
Para que o panel de pestanas se desvanece, engádeo .fadea cada un .tab-pane. O primeiro panel de pestanas tamén debe .showfacer visible o contido inicial.
Métodos
$().tab
Activa un elemento de lista e un contedor de contido. A pestana debería ter un nodo de contedores data-targetou un hrefnodo de destino no DOM.
.tab('mostrar')
Selecciona o elemento da lista e mostra o seu panel asociado. Calquera outro elemento da lista que se seleccionou anteriormente non se selecciona e o seu panel asociado queda oculto. Volve ao interlocutor antes de que se amosara o panel de pestanas (por exemplo, antes de shown.bs.tabque se produza o evento).
Eventos
Cando se mostra unha nova pestana, os eventos desenvólvense na seguinte orde:
hide.bs.tab(na pestana activa actual)
show.bs.tab(na pestana por mostrar)
hidden.bs.tab(na pestana activa anterior, a mesma que para o hide.bs.tabevento)
shown.bs.tab(na pestana que acaba de mostrarse activa, a mesma que para o show.bs.tabevento)
Se xa non estaba activa ningunha pestana, os eventos hide.bs.tabe hidden.bs.tabnon se activarán.
Tipo de evento
Descrición
mostrar.bs.tab
Este evento desenvólvese na mostra de pestanas, pero antes de que se mostrase a nova pestana. Use event.targete event.relatedTargetpara apuntar á pestana activa e á pestana activa anterior (se está dispoñible) respectivamente.
mostrado.bs.tab
Este evento desenvólvese na mostra de pestanas despois de que se mostrase unha pestana. Use event.targete event.relatedTargetpara apuntar á pestana activa e á pestana activa anterior (se está dispoñible) respectivamente.
ocultar.bs.tab
Este evento desenvólvese cando se quere mostrar unha nova pestana (e, polo tanto, debe ocultarse a pestana activa anterior). Use event.targete event.relatedTargetpara orientar a pestana activa actual e a nova pestana que estará activa en breve, respectivamente.
hidden.bs.tab
Este evento desenvólvese despois de que se amose unha nova pestana (e polo tanto se oculta a pestana activa anterior). Use event.targete event.relatedTargetpara apuntar á pestana activa anterior e á nova pestana activa, respectivamente.