Fornisci messaggi di feedback contestuali per le azioni tipiche dell'utente con la manciata di messaggi di avviso disponibili e flessibili.
Esempi
Gli avvisi sono disponibili per qualsiasi lunghezza di testo, nonché un pulsante di annullamento opzionale. Per uno stile corretto, utilizzare una delle otto classi contestuali richieste.alert-success (ad esempio, ). Per il licenziamento in linea, usa il plugin jQuery di alerts .
Un semplice avviso principale: dai un'occhiata!
Un semplice avviso secondario: dai un'occhiata!
Un semplice avviso di successo: dai un'occhiata!
Un semplice avviso di pericolo: dai un'occhiata!
Un semplice avviso di avviso: dai un'occhiata!
Un semplice avviso informativo: dai un'occhiata!
Un semplice avviso luminoso: dai un'occhiata!
Un semplice avviso scuro: dai un'occhiata!
Trasmettere significato alle tecnologie assistive
L'uso del colore per aggiungere significato fornisce solo un'indicazione visiva, che non verrà trasmessa agli utenti di tecnologie assistive, come i lettori di schermo. Assicurati che le informazioni denotate dal colore siano ovvie dal contenuto stesso (ad esempio il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la .sr-onlyclasse.
Colore collegamento
Utilizza la .alert-linkclasse di utilità per fornire rapidamente collegamenti colorati corrispondenti all'interno di qualsiasi avviso.
Gli avvisi possono anche contenere elementi HTML aggiuntivi come intestazioni, paragrafi e divisori.
Ben fatto!
Aww sì, hai letto con successo questo importante messaggio di avviso. Questo testo di esempio verrà eseguito un po' più a lungo in modo da poter vedere come funziona la spaziatura all'interno di un avviso con questo tipo di contenuto.
Ogni volta che è necessario, assicurati di utilizzare le utilità di margine per mantenere le cose belle e ordinate.
Licenziare
Utilizzando il plug-in JavaScript di avviso, è possibile ignorare qualsiasi avviso in linea. Ecco come:
Assicurati di aver caricato il plug-in di avviso o il JavaScript Bootstrap compilato.
Se stai creando il nostro JavaScript dal sorgente, richiedeutil.js . La versione compilata include questo.
Aggiungi un pulsante Ignora e la .alert-dismissibleclasse, che aggiunge un riempimento aggiuntivo a destra dell'avviso e posiziona il .closepulsante.
Sul pulsante Ignora, aggiungi l' data-dismiss="alert"attributo, che attiva la funzionalità JavaScript. Assicurati di utilizzare l' <button>elemento con esso per un comportamento corretto su tutti i dispositivi.
Per animare gli avvisi quando li elimini, assicurati di aggiungere le classi .fadee ..show
Puoi vederlo in azione con una demo dal vivo:
Santo guacamole! Dovresti controllare alcuni di questi campi qui sotto.
Comportamento JavaScript
Trigger
Abilita l'eliminazione di un avviso tramite JavaScript:
O con dataattributi su un pulsante all'interno dell'avviso , come dimostrato sopra:
Tieni presente che la chiusura di un avviso lo rimuoverà dal DOM.
Metodi
Metodo
Descrizione
$().alert()
Fa in modo che un avviso sia in ascolto per eventi di clic sugli elementi discendenti che hanno l' data-dismiss="alert"attributo. (Non necessario quando si utilizza l'inizializzazione automatica di data-api.)
$().alert('close')
Chiude un avviso rimuovendolo dal DOM. Se le classi .fadee .showsono presenti sull'elemento, l'avviso svanirà prima di essere rimosso.
$().alert('dispose')
Distrugge l'avviso di un elemento.
Eventi
Il plug-in di avviso di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità di avviso.
Evento
Descrizione
close.bs.alert
Questo evento viene attivato immediatamente quando closeviene chiamato il metodo dell'istanza.
closed.bs.alert
Questo evento viene attivato quando l'avviso è stato chiuso (attende il completamento delle transizioni CSS).