HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Avvisi Bootstrap

❮ Precedente Prossimo ❯

Avvisi

Bootstrap fornisce un modo semplice per creare messaggi di avviso predefiniti:

× Successo! Questa casella di avviso indica un'azione riuscita o positiva.
× Informazioni! Questa casella di avviso indica una modifica o un'azione informativa neutra.
× Avvertimento! Questa casella di avviso indica un avviso che potrebbe richiedere attenzione.
× Pericolo! Questa casella di avviso indica un'azione pericolosa o potenzialmente negativa.

Gli avvisi vengono creati con la classe , .alertseguiti da una delle quattro classi contestuali .alert-success, o .alert-info:.alert-warning.alert-danger

Esempio

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

Collegamenti di avviso

Aggiungi la alert-linkclasse a tutti i collegamenti all'interno della casella di avviso per creare "collegamenti colorati corrispondenti":

Successo! Dovresti leggere questo messaggio .
Informazioni! Dovresti leggere questo messaggio .
Avvertimento! Dovresti leggere questo messaggio .
Pericolo! Dovresti leggere questo messaggio .

Esempio

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Avvisi di chiusura

× Fare clic sul simbolo "x" a destra per chiudermi.

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">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

L'attributo aria-* e × spiegazione

Per aiutare a migliorare l'accessibilità per le persone che utilizzano lettori di schermo, è necessario includere l'attributo aria-label="close" durante la creazione di un pulsante di chiusura.

&volte; (×) è 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

× Fare clic sul simbolo "x" a destra per chiudermi. Mi "svanirò".

Le classi .fadee .inaggiungono un effetto di dissolvenza alla chiusura del messaggio di avviso:

Esempio

<div class="alert alert-danger fade in">

Mettiti alla prova con gli esercizi

Esercizio:

Aggiungi una classe di "avviso" Bootstrap per visualizzare il risultato di un'azione riuscita.

<div class="">
  Success!
</div>

Riferimento completo degli avvisi Bootstrap

Per un riferimento completo di tutte le opzioni, i metodi e gli eventi di avviso, vai al nostro Bootstrap JS Alert Reference .


❮ Precedente Prossimo ❯