Elenco di base Gruppi
Il gruppo di lista di base è una lista non ordinata con voci di elenco:
- Prima voce
- seconda voce
- terzo elemento
Per creare un gruppo di lista di base, utilizzare un <ul> elemento con classe .list-group , e <li> elementi con classe .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> Prova tu stesso " List Group con badge
È inoltre possibile aggiungere i badge per un gruppo di lista. I badge verranno automaticamente posizionati a destra:
- 12 Nuovo
- 5 soppresso
- 3 Avvertenze
Per creare un badge, creare un <span> elemento con classe .badge all'interno della voce di elenco:
Esempio
<ul class="list-group">
<li
class="list-group-item"><span class="badge">12</span> New</li>
<li
class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul> Prova tu stesso " List Group con gli elementi collegati
Le voci di un gruppo di lista possono essere anche collegamenti ipertestuali. Questo aggiungerà un colore di sfondo grigio al passaggio del mouse:
Per creare un gruppo di lista con gli elementi collegati, uso <div> al posto 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> Prova tu stesso " Stato attivo
Utilizzare la .active classe per evidenziare la voce 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> Prova tu stesso " Articolo disabili
Il seguente gruppo di lista ha un elemento disattivato:
Per disabilitare un articolo, sia il .disabled classe:
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> Prova tu stesso " Classi contestuali
classi contestuali possono essere utilizzate per voci di elenco di colore:
- Prima voce
- seconda voce
- terzo elemento
- quarto punto
Le classi per la colorazione list-elementi sono: .list-group-item-success , list-group-item-info , list-group-item-warning , e .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> Prova tu stesso " contenuto personalizzato
È possibile aggiungere praticamente qualsiasi codice HTML all'interno di una voce di gruppo lista.
Bootstrap fornisce le classi .list-group-item-heading e .list-group-item-text che possono essere utilizzati 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> Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »