Gruppi di Liste con Bootstrap - Reference

Indice dei contenuti

Il componente List group è estremamente flessibile e può essere adattato a svariati contesti d'uso e funzioni. È destinato alla visualizzazione di liste di item o link in una struttura a pannello.

Markup HTML di base

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Per creare un list group aggiungere la classe .list-group all'elemento ul e la classe .list-group-item agli item di lista.

Varianti: liste di link

Oltre che item di lista, si possono raggruppare in un pannello anche dei semplici link. Il markup non prevede in questo caso l'uso di una lista. La classe .list-group si assegna ad un div e la classe .list-group-item ai link. Si ottiene di fatto una sorta di menu di navigazione, in cui l'elemento corrente può essere marcato con la classe .active.

<pre class="brush:html"> <div class="list-group"> <a href="#" class="list-group-item active">Cras justo odio</a> <a href="#" class="list-group-item">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </div>

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

I link in pannelli di questo tipo possono contenere porzioni di testo più strutturate, per esempio con un titolo e un breve paragrafo.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">Titolo</h4>
    <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Titolo</h4>
    <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Titolo</h4>
    <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
  </a>
</div>

Regole CSS per il componente List group

Ecco le regole CSS su cui intervenire per personalizzare il componente:

/* Margini e padding inferiore */
.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}


/* Formattazione dell'item di lista */
.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #ffffff;
  border: 1px solid #dddddd;
}


/* Arrotondamento del bordo superiore */
.list-group-item:first-child {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}


/* Arrotondamento del bordo inferiore */
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}


/* Colore dei link */
a.list-group-item {
  color: #555555;
}


/* Colore dei titoli */ 
a.list-group-item .list-group-item-heading {
  color: #333333;
}


/* Colore di sfondo sull'hover */
a.list-group-item:hover,
a.list-group-item:focus {
  text-decoration: none;
  background-color: #f5f5f5;
}


/* Colori dell'item attivo */ 
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  z-index: 2;
  color: #ffffff;
  background-color: #428bca;
  border-color: #428bca;
}


/* Colore dei titoli per un item attivo */
.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading {
  color: inherit;
}


/* Colore del paragrafo per un item attivo */
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
  color: #e1edf7;
}


/* Margine del titolo */
.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}


/* Margine e altezza di riga del paragrafo */
.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}

Guida Boostrap 3 - Reference

Indice dei contenuti

List groups

Markup HTML di base

Varianti: liste di link

Titolo

Titolo

Titolo

Regole CSS per il componente List group