Varningar
Ge kontextuella feedbackmeddelanden för typiska användaråtgärder med en handfull tillgängliga och flexibla varningsmeddelanden.
Exempel
Varningar är tillgängliga för alla textlängder, samt en valfri stängningsknapp. För korrekt stil, använd en av de åtta obligatoriska kontextuella klasserna (t.ex. .alert-success
). För inline avvisning, använd JavaScript-plugin för varningar .
<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>
Förmedla mening till hjälpmedel
Att använda färg för att lägga till mening ger bara en visuell indikation som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (t.ex. den synliga texten), eller är inkluderad på andra sätt, såsom ytterligare text gömd med .visually-hidden
klassen.
Länkfärg
Använd .alert-link
verktygsklassen för att snabbt tillhandahålla matchande färgade länkar i alla varningar.
<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>
Ytterligare innehåll
Varningar kan också innehålla ytterligare HTML-element som rubriker, stycken och avdelare.
Bra gjort!
Aww ja, du har lyckats läsa detta viktiga varningsmeddelande. Den här exempeltexten kommer att köras lite längre så att du kan se hur avståndet i en varning fungerar med den här typen av innehåll.
När du behöver, se till att använda marginalverktyg för att hålla det snyggt och snyggt.
<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å samma sätt kan du använda flexbox-verktyg och Bootstrap-ikoner för att skapa varningar med ikoner. Beroende på dina ikoner och innehåll kanske du vill lägga till fler verktyg eller anpassade stilar.
<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>
Behöver du mer än en ikon för dina varningar? Överväg att använda fler Bootstrap-ikoner och skapa en lokal SVG-sprite som så för att enkelt referera till samma ikoner upprepade gånger.
<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>
Avvisar
Med hjälp av alert JavaScript-plugin, är det möjligt att avvisa alla varningar inline. Här är hur:
- Se till att du har laddat varningsplugin, eller det kompilerade Bootstrap JavaScript.
- Lägg till en stängningsknapp och
.alert-dismissible
klassen, som lägger till extra utfyllnad till höger om varningen och placerar stängningsknappen. - Lägg till attributet på stängningsknappen
data-bs-dismiss="alert"
, som utlöser JavaScript-funktionen. Se till att använda<button>
elementet med det för korrekt beteende på alla enheter. - För att animera varningar när du avvisar dem, se till att lägga till
.fade
klasserna och.show
.
Du kan se detta i aktion med en livedemo:
<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
händelsen och programmässigt ställer
focus()
in den lämpligaste platsen på sidan. Om du planerar att flytta fokus till ett icke-interaktivt element som normalt inte får fokus, se till att lägga
tabindex="-1"
till 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 mixin
Används i kombination med $theme-colors
för att skapa kontextuella modifieringsklasser för våra varningar.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Slinga
Slinga som genererar modifieringsklasserna 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-beteende
Utlösare
Aktivera avvisande av en varning via JavaScript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Eller med data
attribut på en knapp i varningen , som visas ovan:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Observera att om du stänger en varning tas den bort från DOM.
Metoder
Du kan skapa en varningsinstans med varningskonstruktorn, till exempel:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Detta gör att en varning lyssnar efter klickhändelser på underliggande element som har data-bs-dismiss="alert"
attributet. (Inte nödvändigt när du använder data-API:s automatiska initiering.)
Metod | Beskrivning |
---|---|
close |
Stänger en varning genom att ta bort den från DOM. Om klasserna .fade och .show finns på elementet kommer varningen att tona ut innan den tas bort. |
dispose |
Förstör ett elements varning. (Tar bort lagrad data på DOM-elementet) |
getInstance |
Statisk metod som låter dig få varningsinstansen kopplad till ett DOM-element, du kan använda den så här:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Statisk metod som returnerar en varningsinstans kopplad till ett DOM-element eller skapar en ny om den inte initierades. Du kan använda det så här:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
evenemang
Bootstraps varningsplugin avslöjar några händelser för att koppla in varningsfunktioner.
Händelse | Beskrivning |
---|---|
close.bs.alert |
Avfyras omedelbart när close instansmetoden anropas. |
closed.bs.alert |
Utlöst när larmet har stängts och CSS-övergångar har slutförts. |
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()
})