Verskaf kontekstuele terugvoerboodskappe vir tipiese gebruikeraksies met die handvol beskikbare en buigsame waarskuwingsboodskappe.
Voorbeelde
Waarskuwings is beskikbaar vir enige lengte van teks, sowel as 'n opsionele afwys-knoppie. Vir behoorlike stilering, gebruik een van die agt vereiste kontekstuele klasse (bv. .alert-success). Vir inlyn ontslag, gebruik die waarskuwings jQuery-inprop .
'n Eenvoudige primêre waarskuwing - kyk daarna!
'n Eenvoudige sekondêre waarskuwing—kyk dit uit!
'n Eenvoudige sukseswaarskuwing—kyk dit uit!
'n Eenvoudige gevaarwaarskuwing—kyk dit uit!
'n Eenvoudige waarskuwing - kyk daarna!
'n Eenvoudige inligtingswaarskuwing - kyk daarna!
'n Eenvoudige ligwaarskuwing—kyk dit uit!
'n Eenvoudige donker waarskuwing—kyk dit uit!
Dra betekenis aan ondersteunende tegnologieë oor
Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .sr-onlyklas versteek is.
Skakel kleur
Gebruik die .alert-linknutsklas om vinnig bypassende gekleurde skakels binne enige waarskuwing te verskaf.
'n Eenvoudige primêre waarskuwing met
'n voorbeeldskakel . Gee dit 'n klik as jy wil.
'n Eenvoudige sekondêre waarskuwing met
'n voorbeeldskakel . Gee dit 'n klik as jy wil.
'n Eenvoudige sukseswaarskuwing met
'n voorbeeldskakel . Gee dit 'n klik as jy wil.
'n Eenvoudige gevaarwaarskuwing met
'n voorbeeldskakel . Gee dit 'n klik as jy wil.
'n Eenvoudige waarskuwing met
'n voorbeeldskakel . Gee dit 'n klik as jy wil.
'n Eenvoudige inligtingswaarskuwing met
'n voorbeeldskakel . Gee dit 'n klik as jy wil.
'n Eenvoudige ligwaarskuwing met
'n voorbeeldskakel . Gee dit 'n klik as jy wil.
'n Eenvoudige donker waarskuwing met
'n voorbeeldskakel . Gee dit 'n klik as jy wil.
Bykomende inhoud
Waarskuwings kan ook bykomende HTML-elemente soos opskrifte, paragrawe en verdelers bevat.
Wel gedaan!
Aww ja, jy het hierdie belangrike waarskuwingsboodskap suksesvol gelees. Hierdie voorbeeldteks gaan 'n bietjie langer duur sodat jy kan sien hoe spasiëring binne 'n waarskuwing met hierdie soort inhoud werk.
Wanneer jy ook al moet, maak seker dat jy marge-hulpmiddels gebruik om dinge mooi en netjies te hou.
Ontslaan
Deur die waarskuwing-JavaScript-inprop te gebruik, is dit moontlik om enige waarskuwing inlyn af te wys. Hier is hoe:
Maak seker dat jy die waarskuwing-inprop, of die saamgestelde Bootstrap JavaScript, gelaai het.
As jy ons JavaScript vanaf die bron bou, vereisutil.js dit . Die saamgestelde weergawe sluit dit in.
Voeg 'n afwys-knoppie en die .alert-dismissibleklas by, wat ekstra opvulling aan die regterkant van die waarskuwing byvoeg en die .closeknoppie posisioneer.
Voeg die kenmerk by op die afwys-knoppie, data-dismiss="alert"wat die JavaScript-funksionaliteit aktiveer. Maak seker dat jy die <button>element daarmee gebruik vir behoorlike gedrag op alle toestelle.
.fadeMaak seker dat jy die en .showklasse byvoeg om waarskuwings te animeer wanneer jy dit afwys .
Jy kan dit in aksie sien met 'n lewendige demo:
Heilige guacamole! Jy moet by sommige van daardie velde hieronder inskakel.
JavaScript gedrag
Snellers
Aktiveer afwysing van 'n waarskuwing via JavaScript:
Of met dataeienskappe op 'n knoppie binne die waarskuwing , soos hierbo gedemonstreer:
Let daarop dat die sluiting van 'n waarskuwing dit van die DOM sal verwyder.
Metodes
Metode
Beskrywing
$().alert()
Laat 'n waarskuwing luister vir klikgebeurtenisse op afstammelinge elemente wat die data-dismiss="alert"kenmerk het. (Nie nodig wanneer die data-api se outo-initialisasie gebruik word nie.)
$().alert('close')
Maak 'n waarskuwing toe deur dit uit die DOM te verwyder. As die .fadeen .showklasse op die element teenwoordig is, sal die waarskuwing vervaag voordat dit verwyder word.
$().alert('dispose')
Vernietig 'n element se waarskuwing.
Gebeurtenisse
Bootstrap se waarskuwing-inprop stel 'n paar gebeurtenisse bloot om by waarskuwingsfunksies in te skakel.
Gebeurtenis
Beskrywing
close.bs.alert
Hierdie gebeurtenis begin onmiddellik wanneer die closeinstansiemetode geroep word.
closed.bs.alert
Hierdie gebeurtenis word afgevuur wanneer die waarskuwing gesluit is (sal wag vir CSS-oorgange om te voltooi).