Alerts
Biede kontekstuele feedbackberjochten foar typyske brûkersaksjes mei it hantsjefol beskikbere en fleksibele warskôgingsberjochten.
Foarbylden
Alerts binne beskikber foar elke lingte fan tekst, lykas ek in opsjonele slute knop. Foar goede styling, brûk ien fan de acht fereaske kontekstuele klassen (bgl. .alert-success
). Foar inline ûntslach, brûk de warskôgings JavaScript-plugin .
<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>
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 .visually-hidden
klasse.
Link kleur
Brûk de .alert-link
nutklasse om fluch oerienkommende kleurde keppelings te leverjen binnen elke warskôging.
<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>
Oanfoljende ynhâld
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>
Ikoanen
Op deselde manier kinne jo flexbox-hulpprogramma's en Bootstrap - ikoanen brûke om warskôgings te meitsjen mei ikoanen. Ofhinklik fan jo ikoanen en ynhâld, kinne jo mear nutsfoarsjenningen as oanpaste stilen tafoegje.
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
<div>
An example alert with an icon
</div>
</div>
Mear dan ien ikoan nedich foar jo warskôgings? Tink oan it brûken fan mear Bootstrap-ikoanen en it meitsjen fan in lokale SVG-sprite lykas sa om maklik meardere ikoanen te ferwizen.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
<div>
An example alert with an icon
</div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
<div>
An example success alert with an icon
</div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
An example warning alert with an icon
</div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
An example danger alert with an icon
</div>
</div>
It ûntslaan
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.
- Foegje in slute knop en de
.alert-dismissible
klasse, dy't foeget ekstra padding oan de rjochterkant fan de warskôging en posysjes de slute knop. - Foegje op 'e slute knop it
data-bs-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
.fade
en.show
klassen 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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
closed.bs.alert
evenemint harket en programmatysk ynstelt
focus()
op de meast geskikte lokaasje op 'e side. As jo fan plan binne om de fokus te ferpleatsen nei in net-ynteraktyf elemint dat normaal gjin fokus krijt, soargje derfoar dat
tabindex="-1"
jo it elemint tafoegje.
Sass
Fariabelen
$alert-padding-y: $spacer;
$alert-padding-x: $spacer;
$alert-margin-bottom: 1rem;
$alert-border-radius: $border-radius;
$alert-link-font-weight: $font-weight-bold;
$alert-border-width: $border-width;
$alert-bg-scale: -80%;
$alert-border-scale: -70%;
$alert-color-scale: 40%;
$alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side
Variant mixin
Brûkt yn kombinaasje mei $theme-colors
om kontekstuele modifikaasjeklassen te meitsjen foar ús warskôgings.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Loop
Loop dy't generearret de modifier klassen mei de alert-variant()
mixin.
// Generate contextual modifier classes for colorizing the alert.
@each $state, $value in $theme-colors {
$alert-background: shift-color($value, $alert-bg-scale);
$alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-color);
}
}
JavaScript gedrach
Triggers
Skeakelje it ûntslach fan in warskôging fia JavaScript yn:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Of mei data
attributen op in knop binnen de warskôging , lykas hjirboppe toand:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Tink derom dat it sluten fan in warskôging it fan 'e DOM sil fuortsmite.
Metoaden
Jo kinne in warskôgingseksimplaar oanmeitsje mei de warskôgingskonstruktor, bygelyks:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Dit makket in warskôging harkje nei klik-eveneminten op ôfstammende eleminten dy't it data-bs-dismiss="alert"
attribút hawwe. (Net nedich by it brûken fan de automatyske inisjalisaasje fan de data-api.)
Metoade | Beskriuwing |
---|---|
close |
Slút in warskôging troch it te ferwiderjen fan 'e DOM. As de .fade en .show klassen binne oanwêzich op it elemint, de warskôging sil fade út foardat it wurdt fuortsmiten. |
dispose |
Ferneatiget de warskôging fan in elemint. (Ferwidert bewarre gegevens op it DOM-elemint) |
getInstance |
Statyske metoade wêrmei jo de warskôgingseksimplaar kinne krije ferbûn oan in DOM-elemint, jo kinne it sa brûke:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Statyske metoade dy't in warskôgingseksimplaar werombringt dy't assosjeare is oan in DOM-elemint of in nij oanmeitsje yn gefal it net inisjalisearre is. Jo kinne it sa brûke:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Eveneminten
De warskôgingsplugin fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan warskôgingsfunksjonaliteit.
Barren | Beskriuwing |
---|---|
close.bs.alert |
Fires fuortendaliks as de close eksimplaar metoade wurdt neamd. |
closed.bs.alert |
Untslein as de warskôging is sluten en CSS-oergongen binne foltôge. |
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
// do something, for instance, explicitly move focus to the most appropriate element,
// so it doesn't get lost/reset to the start of the page
// document.getElementById('...').focus()
})