Bootstrap 5 Gruppo di Elenco

Lista di gruppi di base

La lista di gruppi di base è una lista non ordinata che contiene elementi di elenco:

Per creare una lista di gruppi di base, utilizzare la classe .list-group del <ul> Elemento e classe: .list-group-item del <li> Elemento:

Esempio

<ul class="list-group">
  <li class="list-group-item">Primo elemento</li>
  <li class="list-group-item">Secondo elemento</li>
  <li class="list-group-item">Terzo elemento</li>
</ul>

Prova tu stesso

Stato attivo

Usa .active Classe per evidenziare il progetto corrente:

Esempio

<ul class="list-group">
  <li class="list-group-item active">Progetto attivo</li>
  <li class="list-group-item">Secondo elemento</li>
  <li class="list-group-item">Terzo elemento</li>
</ul>

Prova tu stesso

Lista di gruppi con link

Per creare una lista di gruppi con link, utilizzare <div> invece di <ul>usando <a> invece di <li>Opzionalmente, se desideri un sfondo grigio al passaggio del mouse, aggiungi .list-group-item-action Classe:

Esempio

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Primo elemento</a>
  <a href="#" class="list-group-item list-group-item-action">Secondo elemento</a>
  <a href="#" class="list-group-item list-group-item-action">Terzo elemento</a>
</div>

Prova tu stesso

Progetto disabilitato

.disabled La classe aggiunge un colore di testo più chiaro agli elementi disabilitati. Quando usato su link, rimuove l'effetto di hover:

Esempio

<div class="list-group">
  <a href="#" class="list-group-item disabled">Progetto disabilitato</a>
  <a href="#" class="list-group-item disabled">Progetto disabilitato</a>
  <a href="#" class="list-group-item">Terzo elemento</a>
</div>

Prova tu stesso

Rimuovi i bordi

Usa .list-group-flush La classe rimuove i bordi e le curve:

Esempio

<ul class="list-group list-group-flush">
  <li class="list-group-item">Primo elemento</li>
  <li class="list-group-item">Secondo elemento</li>
  <li class="list-group-item">Terzo elemento</li>
  <li class="list-group-item">Quarto elemento</li>
</ul>

Prova tu stesso

Gruppo di lista numerato

Usa .list-group-numbered La classe crea elementi di lista con numeri iniziali:

Esempio

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Primo elemento</li>
  <li class="list-group-item">Secondo elemento</li>
  <li class="list-group-item">Terzo elemento</li>
</ol>

Prova tu stesso

Gruppo di lista orizzontale

Se desideri che gli elementi della lista siano visualizzati orizzontalmente invece di verticalmente (in linea invece di sovrapposti), aggiungi .list-group-horizontal Aggiungi la classe a .list-group：

Esempio

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Primo elemento</li>
  <li class="list-group-item">Secondo elemento</li>
  <li class="list-group-item">Terzo elemento</li>
  <li class="list-group-item">Quarto elemento</li>
</ul>

Prova tu stesso

Classi di contesto

Le classi di contesto possono essere usate per aggiungere colori agli elementi della lista:

Le classi per colorare gli elementi della lista 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-dark
  • .list-group-item-light

Esempio

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Oggetto di successo</li>
  <li class="list-group-item list-group-item-secondary">Item secondario</li>
  <li class="list-group-item list-group-item-info">Item informativo</li>
  <li class="list-group-item list-group-item-warning">Item di avviso</li>
  <li class="list-group-item list-group-item-danger">Item pericolo</li>
  <li class="list-group-item list-group-item-primary">Item primario</li>
  <li class="list-group-item list-group-item-dark">Item scuro</li>
  <li class="list-group-item list-group-item-light">Item chiaro</li>
</ul>

Prova tu stesso

Progetto di link con classe contestuale

Esempio

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Item di azione</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Item di successo</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Item secondario</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Item informativo</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Item di avviso</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Elemento pericolo</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Elemento primario</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Elemento scuro</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Elemento chiaro</a>
</div>

Prova tu stesso

Lista di gruppi con badge

Portare .badge Combina le classi e le utility/helper per aggiungere badge alla lista di gruppi:

Esempio

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Posta in arrivo
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Email pubblicitaria
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cestino della spazzatura
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Prova tu stesso