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.
Levende eksempel
Klik på knappen nedenfor for at vise en advarsel (skjult med inline-stile for at starte), og afvis derefter (og ødelægge) den med den indbyggede lukkeknap.
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
Vi bruger følgende JavaScript til at udløse vores live alarmdemo:
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')
})
}
Link farve
Brug .alert-link
værktøjsklassen til hurtigt at give 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
Initialiser
Initialiser elementer som advarsler
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return new bootstrap.Alert(element)
})
Med det ene formål at afvise en advarsel, er det ikke nødvendigt at initialisere komponenten manuelt via JS API. Ved at bruge data-bs-dismiss="alert"
, vil komponenten blive initialiseret automatisk og korrekt afvist.
Se triggersektionen for flere detaljer.
Udløsere
Afvisning kan opnås med data
attributten på en knap i advarslen som vist nedenfor:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
eller på en knap uden for advarslen ved at bruge data-bs-target
som vist nedenfor:
<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>
Bemærk, at lukning af en underretning vil fjerne den fra DOM.
Metoder
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 lagrede 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, der er knyttet til et DOM-element, eller opretter et nyt, hvis det 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øses, 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()
})