Waarskuwings
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 .
<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>
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-only
klas versteek is.
Skakel kleur
Gebruik die .alert-link
nutsklas om vinnig bypassende gekleurde skakels binne enige waarskuwing te verskaf.
<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>
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.
<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>
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, vereis
util.js
dit . Die saamgestelde weergawe sluit dit in. - Voeg 'n afwys-knoppie en die
.alert-dismissible
klas by, wat ekstra opvulling aan die regterkant van die waarskuwing byvoeg en die.close
knoppie 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. .fade
Maak seker dat jy die en.show
klasse byvoeg om waarskuwings te animeer wanneer jy dit afwys .
Jy kan dit in aksie sien met 'n lewendige demo:
<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>
JavaScript gedrag
Snellers
Aktiveer afwysing van 'n waarskuwing via JavaScript:
$('.alert').alert()
Of met data
eienskappe op 'n knoppie binne die waarskuwing , soos hierbo gedemonstreer:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
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 .fade en .show klasse op die element teenwoordig is, sal die waarskuwing vervaag voordat dit verwyder word. |
$().alert('dispose') |
Vernietig 'n element se waarskuwing. |
$('.alert').alert('close')
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 close instansiemetode geroep word. |
closed.bs.alert |
Hierdie gebeurtenis word afgevuur wanneer die waarskuwing gesluit is (sal wag vir CSS-oorgange om te voltooi). |
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})