Bootstrap 4 Gruppi di elenchi

Gruppi di elenchi di base

Il gruppo di elenchi più semplice è un elenco non ordinato con voci di elenco:

• Primo elemento
• Secondo elemento
• Terzo elemento

Per creare un gruppo di elenchi di base, usa un <ul>elemento con class .list-groupe <li>gli elementi con class .list-group-item:

Stato attivo

• Oggetto attivo
• Secondo elemento
• Terzo elemento

Usa la .activeclasse per evidenziare l'elemento corrente:

Gruppo elenco con elementi collegati

Per creare un gruppo di elenchi con elementi collegati, utilizzare <div>invece di <ul> e <a>invece di <li>. Facoltativamente, aggiungi la .list-group-item-actionclasse se vuoi un colore di sfondo grigio al passaggio del mouse:

Articolo disabilitato

La .disabledclasse aggiunge un colore del testo più chiaro all'elemento disabilitato. E se utilizzato sui collegamenti, rimuoverà l'effetto al passaggio del mouse:

Lava/Rimuovi bordi

Usa la .list-group-flushclasse per rimuovere alcuni bordi e angoli arrotondati:

Gruppi di elenchi orizzontali

Se vuoi che gli elementi dell'elenco vengano visualizzati orizzontalmente anziché verticalmente (affiancati invece che uno sopra l'altro), aggiungi la .list-group-horizontalclasse a .list-group:

Classi contestuali

Le classi contestuali possono essere utilizzate per colorare gli elementi dell'elenco:

• Oggetto di successo
• Articolo secondario
• Voce di informazioni
• Articolo di avviso
• Oggetto di pericolo
• Articolo principale
• Oggetto scuro
• Oggetto leggero

Le classi per colorare gli elementi dell'elenco sono: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-darke list-group-item-light,:

Collega elementi con Classi contestuali

Elenco gruppo con badge

Combina .badgeclassi con classi di utilità/helper per aggiungere badge all'interno del gruppo elenco: