Avvisi Bootstrap 4
Avvisi Bootstrap 4
Bootstrap 4 fornisce un modo semplice per creare messaggi di avviso predefiniti:
Gli avvisi vengono creati con la classe , .alertseguiti da una delle classi contestuali .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, o .alert-secondary:.alert-light.alert-dark
Esempio
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Collegamenti di avviso
Aggiungi la alert-linkclasse a tutti i collegamenti all'interno della casella di avviso per creare "collegamenti colorati corrispondenti":
Esempio
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Avvisi di chiusura
Per chiudere il messaggio di avviso, aggiungi una .alert-dismissible
classe al contenitore di avviso. Quindi aggiungi class="close"e data-dismiss="alert"
a un collegamento o un elemento pulsante (quando fai clic su questo, la finestra di avviso scomparirà).
Esempio
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Suggerimento: × (×) è un'entità HTML che è l'icona preferita per i pulsanti di chiusura, anziché la lettera "x".
Per un elenco di tutte le entità HTML, visita il nostro Riferimento alle entità HTML .
Avvisi animati
Le classi .fadee .showaggiungono un effetto di dissolvenza alla chiusura del messaggio di avviso:
Esempio
<div class="alert alert-danger
alert-dismissible fade show">
Riferimento completo degli avvisi Bootstrap 4
Per un riferimento completo di tutte le opzioni, i metodi e gli eventi di avviso, vai al nostro Bootstrap 4 JS Alert Reference .