Grupos de lista de bootstrap

Grupos de lista básica

O grupo de lista mais básico é uma lista não ordenada com itens de lista:

• Primeiro item
• Segundo item
• Terceiro item

Para criar um grupo de lista básico, use um <ul>elemento com class .list-groupe <li>elementos com class .list-group-item:

Listar grupo com emblemas

Você também pode adicionar emblemas a um grupo de listas. Os crachás serão posicionados automaticamente à direita:

• 12Novo
• 5Excluído
• 3Avisos

Para criar um badge, crie um <span>elemento com classe .badge dentro do item da lista:

Listar grupo com itens vinculados

Os itens em um grupo de lista também podem ser hiperlinks. Isso adicionará uma cor de fundo cinza ao passar o mouse:

Para criar um grupo de lista com itens vinculados, use <div>em vez de <ul> e <a>em vez de <li>:

Estado ativo

Use a .activeclasse para destacar o item atual:

Item desativado

O seguinte grupo de lista tem um item desabilitado:

Para desabilitar um item, adicione a .disabledclasse:

Classes contextuais

As classes contextuais podem ser usadas para colorir itens da lista:

• Primeiro item
• Segundo item
• Terceiro item
• Quarto item

As classes para colorir os itens da lista são: .list-group-item-success, list-group-item-info, list-group-item-warninge .list-group-item-danger:

Conteúdo personalizado

Você pode adicionar praticamente qualquer HTML dentro de um item de grupo de lista.

O Bootstrap fornece as classes .list-group-item-headinge .list-group-item-textque podem ser usadas da seguinte forma: