Märguanded
Pakkuge tavapäraste kasutajatoimingute jaoks kontekstipõhiseid tagasisidesõnumeid käputäie saadaolevate ja paindlike hoiatusteadetega.
Näited
Märguanded on saadaval mis tahes pikkusega teksti kohta, samuti valikuline loobumisnupp. Õigeks stiiliks kasutage ühte kaheksast nõutavast kontekstiklassist (nt .alert-success
). Tekstisiseseks loobumiseks kasutage hoiatuste jQuery pistikprogrammi .
<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>
Abitehnoloogiate tähenduse edasiandmine
Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .sr-only
Veenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .
Lingi värv
Kasutage .alert-link
utiliitklassi, et kiiresti pakkuda sobivaid värvilisi linke mis tahes hoiatuses.
<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>
Täiendav sisu
Märguanded võivad sisaldada ka täiendavaid HTML-elemente, nagu pealkirjad, lõigud ja jagajad.
Hästi tehtud!
Aww jah, lugesite selle olulise hoiatussõnumi edukalt läbi. See näidistekst kestab veidi kauem, et saaksite näha, kuidas hoiatuses vahed seda tüüpi sisu puhul töötavad.
Alati, kui vaja, kasutage kindlasti marginaali utiliite, et asjad oleksid kenad ja korras.
<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>
Loobumine
Hoiatuse JavaScripti pistikprogrammi abil on võimalik kõigist märguannetest loobuda. Tehke järgmist.
- Veenduge, et oleksite laadinud hoiatusplugina või kompileeritud Bootstrap JavaScripti.
- Kui loote meie JavaScripti allikast, nõuab
util.js
see . Koostatud versioon sisaldab seda. - Lisage loobumisnupp ja
.alert-dismissible
klass, mis lisab hoiatuse paremale küljele täiendava polsterduse ja asetab.close
nupu. - Lisage loobumisnupul
data-dismiss="alert"
atribuut, mis käivitab JavaScripti funktsiooni. Kasutage seda<button>
elementi kindlasti kõigis seadmetes õigeks käitumiseks. - Märguannete animeerimiseks nendest loobumisel lisage kindlasti klassid
.fade
ja ..show
Näete seda reaalajas demo abil:
<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>
JavaScripti käitumine
Päästikud
Lubage märguande tühistamine JavaScripti kaudu:
$('.alert').alert()
Või hoiatusesdata
oleva nupu atribuutidega , nagu ülal näidatud:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Pange tähele, et hoiatuse sulgemine eemaldab selle DOM-ist.
meetodid
meetod | Kirjeldus |
---|---|
$().alert() |
Annab hoiatuse kuulama klõpsusündmusi data-dismiss="alert" atribuuti omavatel järglastel elementidel. (Pole vajalik, kui kasutate data-api automaatset initsialiseerimist.) |
$().alert('close') |
Sulgeb hoiatuse, eemaldades selle DOM-ist. Kui elemendil on klassid .fade ja .show , kaob hoiatus enne selle eemaldamist. |
$().alert('dispose') |
Hävitab elemendi hoiatuse. |
$('.alert').alert('close')
Sündmused
Bootstrapi hoiatusplugin paljastab mõned sündmused hoiatusfunktsiooniga ühendamiseks.
Sündmus | Kirjeldus |
---|---|
close.bs.alert |
See sündmus käivitub kohe, kui close eksemplari meetod kutsutakse. |
closed.bs.alert |
See sündmus käivitatakse, kui hoiatus on suletud (ootab, kuni CSS-i üleminekud on lõpule viidud). |
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})