HTML.it - Reference Bootstrap

Guida Boostrap 3 - Reference

Indice dei contenuti

Label e badge

Il componente Label si applica a una porzione di testo inline per evidenziarla e richiamare su di essa l'attenzione. Tipicamente andrebbe strutturata con un elemento span nel contesto di un titolo, di un paragrafo o di un item di lista.

Markup HTML di base

<h2>Ecco una <span class="label label-default">label</span></h2>
<ul>
<li>Ecco una <span class="label label-default">label</span></li>
</ul>

Ecco una label

  • Ecco una label

La label assume automaticamente l'altezza dell'elemento nel contesto del quale è inserita.

Regole CSS per il componente Label

Ecco le regole CSS su cui intervenire per impostare a piacere l'aspetto delle label:

/* Struttura, colore e allineamento del testo, border-radius */ 
.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

Colori delle label

Per impostare il colore delle label sono disponibili delle classi che richiamano quelle fissate per i bottoni.

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Default Primary Success Info Warning Danger

Regole CSS per i colori della label

Si possono personalizzare le classi per i colori agendo su queste regole CSS:

/* Classe .default */
.label-default {
  background-color: #999999;
}

.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #808080;
}

/* Classe .primary */
.label-primary {
  background-color: #428bca;
}

.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #3071a9;
}

/* Classe .success */
.label-success {
  background-color: #5cb85c;
}

.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #449d44;
}

/* Classe .info */
.label-info {
  background-color: #5bc0de;
}

.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #31b0d5;
}

/* Classe .warning */
.label-warning {
  background-color: #f0ad4e;
}

.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #ec971f;
}

/* Classe .danger */
.label-danger {
  background-color: #d9534f;
}

.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #c9302c;
}

Badge

Anche il componente Badge è concepito per attirare l'attenzione su una porzione di testo. È particolarmente indicato come evidenziatore di nuovi item o item non letti.

Markup HTML di base

Il markup HTML è simile a quello delle label. Si usa un elemento span con classe .badge nel contesto di un elemento testuale.

<h4>Ecco un badge <span class="badge">12</span></h4>

Ecco un badge 12

Regole CSS per il componente Badge

Questi gli stili da modificare per personalizzare il componente:

/* Struttura, font, colori, arrotondamento */
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #999999;
  border-radius: 10px;
}