Furnizați mesaje de feedback contextual pentru acțiunile tipice ale utilizatorului cu câteva mesaje de alertă disponibile și flexibile.
Exemple
Alertele sunt disponibile pentru orice lungime de text, precum și un buton opțional de respingere. Pentru un stil adecvat, utilizați una dintre cele opt clase contextuale necesare.alert-success (de exemplu, ). Pentru concedierea inline, utilizați pluginul alerts jQuery .
O alertă principală simplă - verificați-o!
O alertă secundară simplă - verificați-o!
O alertă simplă de succes - verificați-o!
O alertă de pericol simplă - verificați-o!
O alertă simplă de avertizare - verificați-o!
O alertă de informații simplă - verificați-o!
O alertă luminoasă simplă - verificați-o!
O simplă alertă întunecată - verificați-o!
Transmiterea sensului tehnologiilor de asistență
Folosirea culorii pentru a adăuga sens oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .sr-onlyclasa.
Culoare link
Utilizați .alert-linkclasa de utilitate pentru a furniza rapid link-uri colorate potrivite în orice alertă.
O alertă principală simplă cu
un exemplu de link . Dă-i un clic dacă vrei.
O alertă secundară simplă cu
un exemplu de link . Dă-i un clic dacă vrei.
O alertă simplă de succes cu
un exemplu de link . Dă-i un clic dacă vrei.
O alertă de pericol simplă cu
un exemplu de link . Dă-i un clic dacă vrei.
O alertă de avertizare simplă cu
un exemplu de link . Dă-i un clic dacă vrei.
O alertă informativă simplă cu
un exemplu de link . Dă-i un clic dacă vrei.
O alertă luminoasă simplă cu
un exemplu de link . Dă-i un clic dacă vrei.
O alertă întunecată simplă cu
un exemplu de link . Dă-i un clic dacă vrei.
Conținut suplimentar
Alertele pot conține, de asemenea, elemente HTML suplimentare, cum ar fi titluri, paragrafe și separatoare.
Bine făcut!
Aww, da, ați citit cu succes acest mesaj de alertă important. Acest exemplu de text va dura puțin mai mult, astfel încât să puteți vedea cum funcționează spațierea dintr-o alertă cu acest tip de conținut.
Ori de câte ori aveți nevoie, asigurați-vă că utilizați utilitățile de marjă pentru a menține lucrurile frumoase și ordonate.
Demisia
Folosind pluginul JavaScript de alertă, este posibil să respingi orice alertă în linie. Iată cum:
Asigurați-vă că ați încărcat pluginul de alertă sau JavaScript Bootstrap compilat.
Dacă construiți JavaScript din sursă, este nevoieutil.js de . Versiunea compilată include acest lucru.
Adăugați un buton de respingere și .alert-dismissibleclasa, care adaugă umplutură suplimentară în partea dreaptă a alertei și poziționează .closebutonul.
Pe butonul de respingere, adăugați data-dismiss="alert"atributul, care declanșează funcționalitatea JavaScript. Asigurați-vă că utilizați <button>elementul cu acesta pentru un comportament adecvat pe toate dispozitivele.
Pentru a anima alertele atunci când le închideți, asigurați-vă că adăugați clasele .fadeși ..show
Puteți vedea acest lucru în acțiune cu o demonstrație live:
Sfinte guacamole! Ar trebui să verificați unele dintre aceste câmpuri de mai jos.
Comportamentul JavaScript
Declanșatoare
Activați respingerea unei alerte prin JavaScript:
Sau cu dataatribute pe un buton din alertă , după cum s-a demonstrat mai sus:
Rețineți că închiderea unei alerte o va elimina din DOM.
Metode
Metodă
Descriere
$().alert()
Face ca o alertă să asculte evenimentele de clic pe elementele descendente care au data-dismiss="alert"atributul. (Nu este necesar atunci când utilizați auto-inițializarea aplicației de date.)
$().alert('close')
Închide o alertă eliminând-o din DOM. Dacă clasele .fadeși .showsunt prezente pe element, alerta va dispărea înainte de a fi eliminată.
$().alert('dispose')
Distruge alerta unui element.
Evenimente
Pluginul de alertă Bootstrap expune câteva evenimente pentru conectarea la funcționalitatea de alertă.
Eveniment
Descriere
close.bs.alert
Acest eveniment se declanșează imediat când closeeste apelată metoda instanței.
closed.bs.alert
Acest eveniment este declanșat când alerta a fost închisă (va aștepta finalizarea tranzițiilor CSS).