Proporcioneu missatges de comentaris contextuals per a les accions típiques dels usuaris amb un grapat de missatges d'alerta disponibles i flexibles.
Exemples
Les alertes estan disponibles per a qualsevol extensió de text, així com un botó d'ignorar opcional. Per obtenir un estil adequat, utilitzeu una de les vuit classes contextuals necessàries.alert-success (p. ex., ). Per a l'acomiadament en línia, utilitzeu el connector d'alertes jQuery .
Una alerta principal senzilla: comproveu-la!
Una simple alerta secundària: comproveu-la!
Una simple alerta d'èxit: comproveu-ho!
Una simple alerta de perill: comproveu-ho!
Una alerta d'advertència senzilla: comproveu-la!
Una alerta d'informació senzilla: comproveu-la!
Una simple alerta lluminosa: comproveu-ho!
Una simple alerta fosca: comproveu-ho!
Transmetre significat a les tecnologies d'assistència
L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut mateix (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .sr-onlyclasse.
Color de l'enllaç
Utilitzeu la .alert-linkclasse d'utilitat per proporcionar ràpidament enllaços de colors coincidents dins de qualsevol alerta.
Una alerta principal senzilla amb
un enllaç d'exemple . Dóna-li un clic si vols.
Una alerta secundària senzilla amb
un enllaç d'exemple . Dóna-li un clic si vols.
Les alertes també poden contenir elements HTML addicionals com encapçalaments, paràgrafs i divisors.
Ben fet!
Ah, sí, heu llegit correctament aquest missatge d'alerta important. Aquest text d'exemple s'allargarà una mica més perquè pugueu veure com funciona l'espaiat dins d'una alerta amb aquest tipus de contingut.
Sempre que ho necessiteu, assegureu-vos d'utilitzar les utilitats de marge per mantenir les coses bones i ordenades.
Descartant
Mitjançant el connector d'alerta JavaScript, és possible descartar qualsevol alerta en línia. Així és com:
Assegureu-vos que heu carregat el connector d'alerta o el JavaScript Bootstrap compilat.
Si esteu creant el nostre JavaScript des de la font, requereixutil.js . La versió compilada inclou això.
Afegiu un botó de descartar i la .alert-dismissibleclasse, que afegeix un farciment addicional a la dreta de l'alerta i posiciona el .closebotó.
Al botó descartar, afegiu l' data-dismiss="alert"atribut, que activa la funcionalitat de JavaScript. Assegureu-vos d'utilitzar l' <button>element amb ell per a un comportament adequat en tots els dispositius.
Per animar alertes quan les ignoreu, assegureu-vos d'afegir les classes .fadei ..show
Podeu veure això en acció amb una demostració en directe:
Sant guacamole! Hauríeu de comprovar alguns d'aquests camps a continuació.
Comportament de JavaScript
Disparadors
Activa l'eliminació d'una alerta mitjançant JavaScript:
O amb dataatributs en un botó dins de l'alerta , com s'ha demostrat anteriorment:
Tingueu en compte que tancar una alerta l'eliminarà del DOM.
Mètodes
Mètode
Descripció
$().alert()
Fa que una alerta escolti els esdeveniments de clic als elements descendents que tenen l' data-dismiss="alert"atribut. (No és necessari quan s'utilitza l'inicialització automàtica de l'api de dades.)
$().alert('close')
Tanca una alerta eliminant-la del DOM. Si les classes .fadei .showestan presents a l'element, l'alerta s'esvairà abans que s'elimini.
$().alert('dispose')
Destrueix l'alerta d'un element.
Esdeveniments
El connector d'alerta de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat d'alerta.
Esdeveniment
Descripció
close.bs.alert
Aquest esdeveniment s'activa immediatament quan closees crida al mètode d'instància.
closed.bs.alert
Aquest esdeveniment s'activa quan l'alerta s'ha tancat (esperarà que finalitzin les transicions CSS).