Opozorila
Zagotovite kontekstualna povratna sporočila za tipična dejanja uporabnikov s peščico razpoložljivih in prilagodljivih opozorilnih sporočil.
Primeri
Opozorila so na voljo za poljubno dolžino besedila, kot tudi izbirni gumb za opustitev. Za pravilno oblikovanje uporabite enega od osmih zahtevanih kontekstualnih razredov (npr. .alert-success
). Za zavrnitev v vrstici uporabite vtičnik opozoril jQuery .
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
Prenos pomena za podporne tehnologije
Uporaba barve za dodajanje pomena zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (npr. vidno besedilo) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .sr-only
razredom.
Barva povezave
Uporabite .alert-link
razred pripomočkov za hitro zagotavljanje ujemajočih se barvnih povezav znotraj katerega koli opozorila.
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
Dodatne vsebine
Opozorila lahko vsebujejo tudi dodatne elemente HTML, kot so naslovi, odstavki in ločnice.
Dobro opravljeno!
Vau ja, uspešno ste prebrali to pomembno opozorilno sporočilo. Ta primer besedila se bo izvajal nekoliko dlje, da boste lahko videli, kako razmik znotraj opozorila deluje s tovrstno vsebino.
Kadarkoli boste morali, ne pozabite uporabiti pripomočkov za margine, da bodo stvari lepe in urejene.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
Odpuščanje
Z uporabo vtičnika JavaScript za opozorila je mogoče opustiti katero koli opozorilo v vrstici. Evo kako:
- Prepričajte se, da ste naložili vtičnik za opozorila ali preveden JavaScript Bootstrap.
- Če gradite naš JavaScript iz izvorne kode, zahteva
util.js
. Prevedena različica to vključuje. - Dodajte gumb za opustitev in
.alert-dismissible
razred, ki doda dodatno oblazinjenje na desni strani opozorila in umesti.close
gumb. - Na gumb za opustitev dodajte
data-dismiss="alert"
atribut, ki sproži funkcijo JavaScript. Ne pozabite uporabiti<button>
elementa z njim za pravilno delovanje v vseh napravah. - Če želite animirati opozorila, ko jih opustite, dodajte razrede
.fade
in ..show
To lahko vidite v akciji s predstavitvijo v živo:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
obnašanje JavaScripta
Sprožilci
Omogoči opustitev opozorila prek JavaScripta:
$('.alert').alert()
Ali z data
atributi na gumbu znotraj opozorila , kot je prikazano zgoraj:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Upoštevajte, da boste z zaprtjem opozorila odstranili iz DOM.
Metode
Metoda | Opis |
---|---|
$().alert() |
Naredi opozorilo, da posluša dogodke klikov na podrejenih elementih, ki imajo data-dismiss="alert" atribut. (Ni potrebno pri uporabi samodejne inicializacije data-api.) |
$().alert('close') |
Zapre opozorilo tako, da ga odstrani iz DOM. Če sta v elementu prisotna razreda .fade in .show , bo opozorilo zbledelo, preden bo odstranjeno. |
$().alert('dispose') |
Uniči opozorilo elementa. |
$('.alert').alert('close')
Dogodki
Bootstrapov vtičnik za opozorila razkriva nekaj dogodkov za priključitev na funkcijo opozorila.
Dogodek | Opis |
---|---|
close.bs.alert |
Ta dogodek se sproži takoj, ko close se pokliče metoda primerka. |
closed.bs.alert |
Ta dogodek se sproži, ko je bilo opozorilo zaprto (počakal bo, da se zaključijo prehodi CSS). |
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})