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 avvisande knapp. För korrekt stil, använd en av de åtta obligatoriska kontextuella klasserna (t.ex. .alert-success
). För inline avvisning, använd alerts jQuery 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>
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 .sr-only
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>
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.
- Om du bygger vårt JavaScript från källan kräver
util.js
det . Den kompilerade versionen innehåller detta. - Lägg till en avvisningsknapp och
.alert-dismissible
klassen, som lägger till extra utfyllnad till höger om varningen och placerar.close
knappen. - På avvis-knappen lägger du till
data-dismiss="alert"
attributet 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="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
JavaScript-beteende
Utlösare
Aktivera avvisande av en varning via JavaScript:
$('.alert').alert()
Eller med data
attribut på en knapp i varningen , som visas ovan:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Observera att om du stänger en varning tas den bort från DOM.
Metoder
Metod | Beskrivning |
---|---|
$().alert() |
Får en varning att lyssna efter klickhändelser på underordnade element som har data-dismiss="alert" attributet. (Inte nödvändigt när du använder data-API:s automatiska initiering.) |
$().alert('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. |
$().alert('dispose') |
Förstör ett elements varning. |
$('.alert').alert('close')
evenemang
Bootstraps varningsplugin avslöjar några händelser för att koppla in varningsfunktioner.
Händelse | Beskrivning |
---|---|
close.bs.alert |
Denna händelse aktiveras omedelbart när close instansmetoden anropas. |
closed.bs.alert |
Den här händelsen utlöses när varningen har stängts (väntar på att CSS-övergångar ska slutföras). |
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})