Gruppi di elenchi Bootstrap
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:
Esempio
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Elenco gruppo con badge
Puoi anche aggiungere badge a un gruppo di elenchi. I badge verranno automaticamente posizionati sulla destra:
- 12Nuovo
- 5Eliminato
- 3Avvertenze
Per creare un badge, crea un <span>elemento con classe .badge
all'interno della voce di elenco:
Esempio
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
Gruppo di elenchi con elementi collegati
Gli elementi in un gruppo di elenchi possono anche essere collegamenti ipertestuali. Questo aggiungerà un colore di sfondo grigio al passaggio del mouse:
Per creare un gruppo di elenchi con elementi collegati, utilizzare <div>invece di <ul>
e <a>invece di <li>:
Esempio
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Stato attivo
Usa la .activeclasse per evidenziare l'elemento corrente:
Esempio
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Articolo disabilitato
Il seguente gruppo di elenchi ha un elemento disabilitato:
Per disabilitare un elemento, aggiungi la .disabledclasse:
Esempio
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Classi contestuali
Le classi contestuali possono essere utilizzate per colorare gli elementi dell'elenco:
- Primo elemento
- Secondo elemento
- Terzo elemento
- Quarto elemento
Le classi per colorare gli elementi dell'elenco sono:
.list-group-item-success, list-group-item-info,
list-group-item-warninge .list-group-item-danger:
Esempio
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
Contenuto personalizzato
Puoi aggiungere quasi qualsiasi codice HTML all'interno di un elemento del gruppo di elenchi.
Bootstrap fornisce le classi .list-group-item-headinge
.list-group-item-textche possono essere utilizzate come segue:
Esempio
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>