HTML.it - Reference Bootstrap

Guida Boostrap 3 - Reference

Indice dei contenuti

Alert

Con il componente Alert si creano box di avviso a comparsa per offrire feedback all'utente. Il caso d'uso più tipico è la compilazione di un form. L'interattività (comparsa e chiusura) è gestita con il plugin Alert.

Markup HTML di base

Un box di alert si crea aggiungendo ad un div la classe base .alert e una delle quattro classi per la definizione del colore: .alert-success, .alert-warning, .alert-danger, .alert-info.

<div class="alert alert-success">Sono un box di alert</div>
<div class="alert alert-warning">Sono un box di alert</div>
<div class="alert alert-danger">Sono un box di alert</div>
<div class="alert alert-info">Sono un box di alert</div>
Sono un box di alert (success)


Sono un box di alert (warning)


Sono un box di alert (danger)


Sono un box di alert

Alert con pulsante di chiusura

Per creare un messaggio di alert con un pulsante di chiusura, aggiungere al div la classe .alert-dismissable. All'interno inserire un button o un elemento a con classe .close e con l'attributo data-dismiss="alert". Per avere come segno di chiusura la classica 'x', usare come testo del button &times;.

<div class="alert alert-success alert-dismissable">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  Sono un box di alert. Puoi chiudermi.
</div>
Sono un box di alert. Puoi chiudermi.

Regole CSS per il componente Alert

Per modificare l'aspetto del componente Alert si può agire su queste regole:

/* Margini, padding, bordo e arrotondamento */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}


/* Padding destro per l'alert con pulsante di chiusura */
.alert-dismissable {
  padding-right: 35px;
}

/* Posizione del pulsante di chiusura */
.alert-dismissable .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

/* Colori per la classe .success */
.alert-success {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}


/* Colori per la classe .info */
.alert-info {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}


/* Colori per la classe .warning */
.alert-warning {
  color: #c09853;
  background-color: #fcf8e3;
  border-color: #fbeed5;
}


/* Colori per la classe .danger */
.alert-danger {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.alert-danger hr {
  border-top-color: #e6c1c7;
}

.alert-danger .alert-link {
  color: #953b39;
}