Alerts
Biede kontekstuele feedbackberjochten foar typyske brûkersaksjes mei it hantsjefol beskikbere en fleksibele warskôgingsberjochten.
Alerts binne beskikber foar elke lingte fan tekst, lykas ek in opsjoneel ôfwize knop. Foar goede styling, brûk ien fan de acht fereaske kontekstuele klassen (bgl. .alert-success). Foar inline ûntslach, brûk de warskôgings jQuery plugin .
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>Betsjutting oerbringe oan assistinte technologyen
It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .sr-onlyklasse.
Brûk de .alert-linknutklasse om fluch oerienkommende kleurde keppelings te leverjen binnen elke warskôging.
<div class="alert alert-primary" role="alert">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>Alerts kinne ek ekstra HTML-eleminten befetsje lykas kopteksten, paragrafen en dividers.
Goed dien!
Aww ja, jo hawwe dit wichtige warskôgingsberjocht mei súkses lêzen. Dizze foarbyldtekst sil wat langer rinne, sadat jo kinne sjen hoe't ôfstân binnen in warskôging wurket mei dit soarte ynhâld.
As jo it nedich binne, wês wis dat jo marzje-hulpprogramma's brûke om dingen moai en netjes te hâlden.
<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>Mei it JavaScript-plugin foar warskôging is it mooglik om alle warskôgings ynline te ferwiderjen. Hjir is hoe:
- Wês wis dat jo de warskôgingsplugin hawwe laden, of it kompilearre Bootstrap JavaScript.
- As jo ús JavaScript bouwe fanút boarne, fereasket
util.jsit . De gearstalde ferzje befettet dit. - Foegje in ûntslach knop en de
.alert-dismissibleklasse, dy't foeget ekstra padding oan de rjochterkant fan de warskôging en posysjes de.closeknop. - Foegje op 'e knop ôfwize it
data-dismiss="alert"attribút ta, dat de JavaScript-funksjonaliteit trigger. Wês wis dat jo it<button>elemint dermei brûke foar goed gedrach oer alle apparaten. - Om warskôgings te animearjen by it ôfwizen fan se, wês wis dat jo de
.fadeen.showklassen tafoegje.
Jo kinne dit yn aksje sjen mei in live 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>Skeakelje it ûntslach fan in warskôging fia JavaScript yn:
$('.alert').alert()Of mei dataattributen op in knop binnen de warskôging , lykas hjirboppe toand:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>Tink derom dat it sluten fan in warskôging it fan 'e DOM sil fuortsmite.
| Metoade | Beskriuwing |
|---|---|
$().alert() |
Makket in warskôging te harkjen nei klik-eveneminten op ôfstammende eleminten dy't it data-dismiss="alert"attribút hawwe. (Net nedich by it brûken fan de automatyske inisjalisaasje fan de data-api.) |
$().alert('close') |
Slút in warskôging troch it te ferwiderjen fan 'e DOM. As de .fadeen .showklassen binne oanwêzich op it elemint, de warskôging sil fade út foardat it wurdt fuortsmiten. |
$().alert('dispose') |
Ferneatiget de warskôging fan in elemint. |
$(".alert").alert('close')De warskôgingsplugin fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan warskôgingsfunksjonaliteit.
| Barren | Beskriuwing |
|---|---|
close.bs.alert |
Dit evenemint fjoer fuortendaliks as de closeeksimplaar metoade wurdt oanroppen. |
closed.bs.alert |
Dit evenemint wurdt ûntslein as de warskôging is sletten (sil wachtsje op CSS-oergongen om te foltôgjen). |
$('#myAlert').on('closed.bs.alert', function () {
// do something…
})