Advarsler
Giv kontekstuelle feedbackmeddelelser til typiske brugerhandlinger med den håndfuld tilgængelige og fleksible advarselsmeddelelser.
Eksempler
Advarsler er tilgængelige for enhver tekstlængde, såvel som en valgfri lukkeknap. For korrekt styling skal du bruge en af de otte nødvendige kontekstuelle klasser (f.eks. .alert-success
). Til inline afvisning skal du bruge advarslers 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>
Formidle mening til hjælpeteknologier
Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .visually-hidden
klassen.
Link farve
Brug .alert-link
værktøjsklassen til hurtigt at levere matchende farvede links inden for enhver advarsel.
<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>
Yderligere indhold
Advarsler kan også indeholde yderligere HTML-elementer som overskrifter, afsnit og skillelinjer.
Godt klaret!
Aww ja, du har læst denne vigtige advarselsmeddelelse. Denne eksempeltekst kommer til at køre lidt længere, så du kan se, hvordan afstanden i en advarsel fungerer med denne slags indhold.
Når du har brug for det, skal du sørge for at bruge marginværktøjer til at holde tingene pæne og ryddelige.
<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åde kan du bruge flexbox-værktøjer og Bootstrap-ikoner til at oprette alarmer med ikoner. Afhængigt af dine ikoner og indhold vil du måske tilføje flere hjælpeprogrammer eller brugerdefinerede stilarter.
<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>
Har du brug for mere end ét ikon til dine underretninger? Overvej at bruge flere Bootstrap-ikoner og lave en lokal SVG-sprite som sådan for nemt at referere til de samme ikoner gentagne gange.
<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>
Afviser
Ved at bruge advarsels-JavaScript-plugin'et er det muligt at afvise enhver inline-advarsel. Sådan gør du:
- Sørg for, at du har indlæst advarselsplugin'et eller det kompilerede Bootstrap JavaScript.
- Tilføj en lukkeknap og
.alert-dismissible
klassen, som tilføjer ekstra polstring til højre for advarslen og placerer lukkeknappen. - På lukkeknappen skal du tilføje
data-bs-dismiss="alert"
attributten, som udløser JavaScript-funktionaliteten. Sørg for at bruge<button>
elementet med det for korrekt adfærd på tværs af alle enheder. - For at animere advarsler, når du afviser dem, skal du sørge for at tilføje klasserne
.fade
og ..show
Du kan se dette i aktion 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
begivenheden og programmæssigt indstiller
focus()
til den mest passende placering på siden. Hvis du planlægger at flytte fokus til et ikke-interaktivt element, der normalt ikke modtager fokus, skal du sørge for at tilføje
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
Bruges i kombination med $theme-colors
til at skabe kontekstuelle modifikatorklasser til vores underretninger.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Løkke
Loop, der genererer modifikatorklasserne 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 adfærd
Udløsere
Aktiver afvisning af en advarsel via JavaScript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Eller med data
attributter på en knap i advarslen , som vist ovenfor:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Bemærk, at lukning af en underretning vil fjerne den fra DOM.
Metoder
Du kan oprette en advarselsforekomst med advarselskonstruktøren, for eksempel:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Dette får en advarsel til at lytte efter klikhændelser på efterkommerelementer, som har data-bs-dismiss="alert"
attributten. (Ikke nødvendigt, når du bruger data-API's automatiske initialisering.)
Metode | Beskrivelse |
---|---|
close |
Lukker en advarsel ved at fjerne den fra DOM. Hvis klasserne .fade og .show er til stede på elementet, vil advarslen fade ud, før den fjernes. |
dispose |
Ødelægger et elements alarm. (Fjerner gemte data på DOM-elementet) |
getInstance |
Statisk metode, som giver dig mulighed for at få advarselsforekomsten knyttet til et DOM-element, du kan bruge det sådan her:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Statisk metode, som returnerer en advarselsforekomst knyttet til et DOM-element eller opretter en ny, hvis den ikke blev initialiseret. Du kan bruge det sådan her:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Begivenheder
Bootstraps advarselsplugin afslører nogle få hændelser for at tilslutte sig advarselsfunktionalitet.
Begivenhed | Beskrivelse |
---|---|
close.bs.alert |
Udløses med det samme, når close instansmetoden kaldes. |
closed.bs.alert |
Udløst, når alarmen er blevet lukket, og CSS-overgange er gennemfø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()
})