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 toemaakknoppie. Vir behoorlike stilering, gebruik een van die agt vereiste kontekstuele klasse (bv. .alert-success
). Vir inlyn ontslag, gebruik die waarskuwings JavaScript-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 .visually-hidden
klas versteek is.
Lewende voorbeeld
Klik op die knoppie hieronder om 'n waarskuwing te wys (versteek met inlynstyle om te begin), maak dit dan af (en vernietig) dit met die ingeboude toemaakknoppie.
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
Ons gebruik die volgende JavaScript om ons regstreekse waarskuwingsdemo te aktiveer:
var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')
function alert(message, type) {
var wrapper = document.createElement('div')
wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
alertPlaceholder.append(wrapper)
}
if (alertTrigger) {
alertTrigger.addEventListener('click', function () {
alert('Nice, you triggered this alert message!', 'success')
})
}
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>
Ikone
Net so kan jy flexbox-nutsprogramme en Bootstrap-ikone gebruik om waarskuwings met ikone te skep. Afhangende van jou ikone en inhoud, wil jy dalk meer nutsprogramme of pasgemaakte style byvoeg.
<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>
Benodig jy meer as een ikoon vir jou waarskuwings? Oorweeg dit om meer Bootstrap-ikone te gebruik en 'n plaaslike SVG-sprite soos so te maak om maklik herhaaldelik na dieselfde ikone te verwys.
<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>
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.
- Voeg 'n toemaakknoppie en die
.alert-dismissible
klas by, wat ekstra vulling aan die regterkant van die waarskuwing byvoeg en die toemaakknoppie plaas. - Voeg die
data-bs-dismiss="alert"
kenmerk by op die toemaakknoppie, 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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
closed.bs.alert
geleentheid luister en programmaties
focus()
op die mees geskikte plek op die bladsy stel. As jy van plan is om fokus te skuif na 'n nie-interaktiewe element wat normaalweg nie fokus ontvang nie, maak seker dat jy
tabindex="-1"
by die element voeg.
Sass
Veranderlikes
$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 meng
Gebruik in kombinasie met $theme-colors
om kontekstuele wysigerklasse vir ons waarskuwings te skep.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Lus
Lus wat die wysigerklasse genereer met die 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 gedrag
Inisialiseer
Inisialiseer elemente as waarskuwings
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return new bootstrap.Alert(element)
})
Vir die uitsluitlike doel om 'n waarskuwing af te wys, is dit nie nodig om die komponent handmatig via die JS API te inisialiseer nie. Deur gebruik te maak van data-bs-dismiss="alert"
, sal die komponent outomaties geïnisialiseer word en behoorlik afgemaak word.
Sien die snellers- afdeling vir meer besonderhede.
Snellers
Ontslag kan bereik word met die data
kenmerk op 'n knoppie binne die waarskuwing soos hieronder gedemonstreer:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
of op 'n knoppie buite die waarskuwing deur gebruik te maak van die data-bs-target
soos hieronder gedemonstreer:
<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>
Let daarop dat die sluiting van 'n waarskuwing dit van die DOM sal verwyder.
Metodes
Metode | Beskrywing |
---|---|
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. |
dispose |
Vernietig 'n element se waarskuwing. (Verwyder gestoorde data op die DOM-element) |
getInstance |
Statiese metode waarmee u die waarskuwingsinstansie kan kry wat met 'n DOM-element geassosieer word, u kan dit so gebruik:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Statiese metode wat 'n waarskuwingsgeval terugstuur wat aan 'n DOM-element geassosieer word of 'n nuwe een skep ingeval dit nie geïnisialiseer is nie. Jy kan dit so gebruik:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Gebeurtenisse
Bootstrap se waarskuwing-inprop stel 'n paar gebeurtenisse bloot om by waarskuwingsfunksies in te skakel.
Gebeurtenis | Beskrywing |
---|---|
close.bs.alert |
Vuur onmiddellik wanneer die close instansiemetode geroep word. |
closed.bs.alert |
Word afgevuur wanneer die waarskuwing gesluit is en CSS-oorgange voltooi is. |
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()
})