Os grupos de listas são um componente flexível e poderoso para exibir uma série de conteúdo. Modifique e estenda-os para oferecer suporte a praticamente qualquer conteúdo.
Exemplo básico
O grupo de lista mais básico é uma lista não ordenada com itens de lista e as classes apropriadas. Construa sobre ele com as opções a seguir, ou com seu próprio CSS, conforme necessário.
Cras justo odio
Dapibus ac facilisis em
Morbi Leo Risus
Porta ac consectetur ac
Vestíbulo em eros
Itens ativos
Adicione .activea a .list-group-itempara indicar a seleção ativa atual.
Cras justo odio
Dapibus ac facilisis em
Morbi Leo Risus
Porta ac consectetur ac
Vestíbulo em eros
Itens desativados
Adicione .disableda um .list-group-itempara fazê-lo parecer desabilitado. Observe que alguns elementos com .disabledtambém exigirão JavaScript personalizado para desabilitar totalmente seus eventos de clique (por exemplo, links).
Cras justo odio
Dapibus ac facilisis em
Morbi Leo Risus
Porta ac consectetur ac
Vestíbulo em eros
Links e botões
Use <a>s ou <button>s para criar itens de grupo de lista acionáveis com estados de foco, desativado e ativo adicionando .list-group-item-action. Separamos essas pseudoclasses para garantir que grupos de listas feitos de elementos não interativos (como <li>s ou <div>s) não forneçam uma affordance de clique ou toque.
Certifique-se de não usar as .btnclasses padrão aqui .
Com <button>s, você também pode usar o disabledatributo em vez da .disabledclasse. Infelizmente, <a>s não suportam o atributo disabled.
Rubor
Adicione .list-group-flushpara remover algumas bordas e cantos arredondados para renderizar os itens do grupo de lista de ponta a ponta em um contêiner pai (por exemplo, cartões).
Cras justo odio
Dapibus ac facilisis em
Morbi Leo Risus
Porta ac consectetur ac
Vestíbulo em eros
Horizontal
Adicione .list-group-horizontalpara alterar o layout dos itens do grupo de lista de vertical para horizontal em todos os pontos de interrupção. Como alternativa, escolha uma variante responsiva .list-group-horizontal-{sm|md|lg|xl}para tornar um grupo de lista horizontal começando no ponto de interrupção min-width. Atualmente , os grupos de listas horizontais não podem ser combinados com grupos de listas niveladas.
Dica profissional: Quer itens de grupo de lista de largura igual quando horizontal? Adicione .flex-filla cada item do grupo de lista.
Cras justo odio
Dapibus ac facilisis em
Morbi Leo Risus
Cras justo odio
Dapibus ac facilisis em
Morbi Leo Risus
Cras justo odio
Dapibus ac facilisis em
Morbi Leo Risus
Cras justo odio
Dapibus ac facilisis em
Morbi Leo Risus
Cras justo odio
Dapibus ac facilisis em
Morbi Leo Risus
Classes contextuais
Use classes contextuais para estilizar itens de lista com um plano de fundo e uma cor com estado.
Dapibus ac facilisis em
Um item de grupo de lista primária simples
Um item de grupo de lista secundária simples
Um item de grupo de lista de sucesso simples
Um item de grupo de lista de perigo simples
Um item de grupo de lista de aviso simples
Um item de grupo de lista de informações simples
Um item de grupo de lista de luz simples
Um item de grupo de lista escura simples
As classes contextuais também funcionam com .list-group-item-action. Observe a adição dos estilos de foco aqui não presentes no exemplo anterior. Também é apoiado o .activeestado; aplique-o para indicar uma seleção ativa em um item de grupo de lista contextual.
Transmitindo significado às tecnologias assistivas
Usar cores para adicionar significado fornece apenas uma indicação visual, que não será transmitida aos usuários de tecnologias assistivas – como leitores de tela. Certifique-se de que as informações indicadas pela cor sejam óbvias do próprio conteúdo (por exemplo, o texto visível) ou sejam incluídas por meios alternativos, como texto adicional oculto com a .sr-onlyclasse.
Com emblemas
Adicione emblemas a qualquer item do grupo de lista para mostrar contagens não lidas, atividades e muito mais com a ajuda de alguns utilitários .
Cras justo odio14
Dapibus ac facilisis em2
Morbi Leo Risus1
Conteúdo personalizado
Adicione praticamente qualquer HTML dentro, mesmo para grupos de listas vinculadas como o abaixo, com a ajuda dos utilitários flexbox .
Use o plug-in JavaScript da guia - inclua-o individualmente ou por meio do bootstrap.jsarquivo compilado - para estender nosso grupo de listas para criar painéis com guias de conteúdo local.
Velit aute mollit ipsum ad dolor consectetur nulla oficia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt 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 dados
Você pode ativar uma navegação de grupo de lista sem escrever nenhum JavaScript simplesmente especificando data-toggle="list"ou em um elemento. Use esses atributos de dados em .list-group-item.
Por JavaScript
Habilite o item da lista tabable via JavaScript (cada item da lista precisa ser ativado individualmente):
Você pode ativar um item de lista individual de várias maneiras:
Efeito de desvanecimento
Para fazer o painel de guias aparecer gradualmente, adicione .fadea cada arquivo .tab-pane. O primeiro painel de guias também deve .showtornar visível o conteúdo inicial.
Métodos
$().tab
Ativa um elemento de item de lista e um contêiner de conteúdo. A guia deve ter um data-targetou um hrefdirecionamento para um nó de contêiner no DOM.
.tab('mostrar')
Seleciona o item de lista fornecido e mostra seu painel associado. Qualquer outro item de lista selecionado anteriormente torna-se desmarcado e seu painel associado fica oculto. Retorna ao chamador antes que o painel de guias tenha sido mostrado (por exemplo, antes que o shown.bs.tabevento ocorra).
Eventos
Ao mostrar uma nova guia, os eventos são acionados na seguinte ordem:
hide.bs.tab(na guia ativa atual)
show.bs.tab(na guia a ser exibida)
hidden.bs.tab(na aba ativa anterior, a mesma do hide.bs.tabevento)
shown.bs.tab(na guia recém-ativada recém-exibida, a mesma do show.bs.tabevento)
Se nenhuma guia já estiver ativa, os eventos hide.bs.tabe hidden.bs.tabnão serão acionados.
Tipo de evento
Descrição
show.bs.guia
Este evento é acionado na exibição de guias, mas antes que a nova guia seja exibida. Use event.targete event.relatedTargetpara direcionar a guia ativa e a guia ativa anterior (se disponível), respectivamente.
mostrado.bs.guia
Este evento é acionado na exibição de guias após a exibição de uma guia. Use event.targete event.relatedTargetpara direcionar a guia ativa e a guia ativa anterior (se disponível), respectivamente.
ocultar.bs.guia
Este evento é acionado quando uma nova guia deve ser mostrada (e, portanto, a guia ativa anterior deve ser ocultada). Use event.targete event.relatedTargetpara segmentar a guia ativa atual e a nova guia em breve ativa, respectivamente.
tab.bs.escondidos
Este evento é acionado depois que uma nova guia é mostrada (e, portanto, a guia ativa anterior fica oculta). Use event.targete event.relatedTargetpara segmentar a guia ativa anterior e a nova guia ativa, respectivamente.