Varsler
Gi kontekstuelle tilbakemeldingsmeldinger for typiske brukerhandlinger med en håndfull tilgjengelige og fleksible varslingsmeldinger.
Eksempler
Varsler er tilgjengelige for alle tekstlengder, samt en valgfri lukkeknapp. For riktig styling, bruk en av de åtte nødvendige kontekstuelle klassene (f.eks. .alert-success
). For innebygd avvisning, bruk JavaScript-pluginen for varsler .
<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>
Formidle mening til hjelpeteknologier
Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .visually-hidden
klassen.
Lenkefarge
Bruk .alert-link
verktøyklassen for raskt å gi matchende fargede lenker i ethvert varsel.
<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>
Ytterligere innhold
Varsler kan også inneholde flere HTML-elementer som overskrifter, avsnitt og skillelinjer.
Bra gjort!
Aww ja, du har lest denne viktige varselmeldingen. Denne eksempelteksten kommer til å løpe litt lenger slik at du kan se hvordan mellomrom i et varsel fungerer med denne typen innhold.
Når du trenger det, sørg for å bruke marginverktøy for å holde ting pent og ryddig.
<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>
Ikoner
På samme måte kan du bruke flexbox-verktøy og Bootstrap-ikoner for å lage varsler med ikoner. Avhengig av ikonene og innholdet ditt, vil du kanskje legge til flere verktøy eller egendefinerte stiler.
<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>
Trenger du mer enn ett ikon for varslene dine? Vurder å bruke flere Bootstrap-ikoner og lage en lokal SVG-sprite slik at du enkelt kan referere til de samme ikonene gjentatte ganger.
<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>
Avviser
Ved å bruke JavaScript-plugin-modulen for varsel, er det mulig å avvise alle inline-varsler. Dette er hvordan:
- Pass på at du har lastet inn varslingsplugin, eller det kompilerte Bootstrap JavaScript.
- Legg til en lukkeknapp og
.alert-dismissible
klassen, som legger til ekstra polstring til høyre for varselet og plasserer lukkeknappen. - På lukkeknappen legger du til
data-bs-dismiss="alert"
attributtet, som utløser JavaScript-funksjonaliteten. Sørg for å bruke<button>
elementet med det for riktig oppførsel på alle enheter. - For å animere varsler når du avviser dem, sørg for å legge til
.fade
klassene og.show
.
Du kan se dette i aksjon med en 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
hendelsen og programmerer
focus()
den mest passende plasseringen på siden. Hvis du planlegger å flytte fokus til et ikke-interaktivt element som normalt ikke mottar fokus, sørg for å legge
tabindex="-1"
til elementet.
Sass
Variabler
$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 blanding
Brukes i kombinasjon med $theme-colors
for å lage kontekstuelle modifikasjonsklasser for varslene våre.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Løkke
Sløyfe som genererer modifikatorklassene med 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-adferd
Utløsere
Aktiver avvisning av et varsel via JavaScript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Eller med data
attributter på en knapp i varselet , som vist ovenfor:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Merk at lukking av et varsel vil fjerne det fra DOM.
Metoder
Du kan opprette en varselforekomst med varselkonstruktøren, for eksempel:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Dette får et varsel til å lytte etter klikkhendelser på etterkommere elementer som har data-bs-dismiss="alert"
attributtet. (Ikke nødvendig når du bruker data-APIs automatiske initialisering.)
Metode | Beskrivelse |
---|---|
close |
Lukker et varsel ved å fjerne det fra DOM. Hvis klassene .fade og .show er til stede på elementet, vil varselet tone ut før det fjernes. |
dispose |
Ødelegger et elements varsling. (Fjerner lagrede data på DOM-elementet) |
getInstance |
Statisk metode som lar deg få varselforekomsten knyttet til et DOM-element, du kan bruke det slik:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Statisk metode som returnerer en varselforekomst knyttet til et DOM-element eller oppretter en ny i tilfelle den ikke ble initialisert. Du kan bruke det slik:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
arrangementer
Bootstraps varslingsplugin avslører noen få hendelser for å koble til varslingsfunksjonalitet.
Begivenhet | Beskrivelse |
---|---|
close.bs.alert |
Avfyres umiddelbart når close instansmetoden kalles. |
closed.bs.alert |
Utløses når varselet er lukket og CSS-overganger er fullført. |
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()
})