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 afvis-knap. For korrekt styling skal du bruge en af de otte nødvendige kontekstuelle klasser (f.eks. .alert-success
). Til inline afvisning skal du bruge advarsler 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>
Formidle mening til hjælpeteknologier
Brug af farve til at tilføje mening giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier – såsom skærmlæsere. Sørg for, at informationer, 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 yderligere tekst skjult i .sr-only
klassen.
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>
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.
- Hvis du bygger vores JavaScript fra kilden, kræver
util.js
det . Den kompilerede version inkluderer dette. - Tilføj en afvis-knap og
.alert-dismissible
klassen, som tilføjer ekstra polstring til højre for advarslen og placerer.close
knappen. - På afvis-knappen skal du tilføje
data-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="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
JavaScript adfærd
Udløsere
Aktiver afvisning af en advarsel via JavaScript:
$('.alert').alert()
Eller med data
attributter på en knap i advarslen , som vist ovenfor:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Bemærk, at lukning af en underretning vil fjerne den fra DOM.
Metoder
Metode | Beskrivelse |
---|---|
$().alert() |
Får en advarsel til at lytte efter klikhændelser på efterkommerelementer, som har data-dismiss="alert" attributten. (Ikke nødvendigt, når du bruger data-API's automatiske initialisering.) |
$().alert('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. |
$().alert('dispose') |
Ødelægger et elements alarm. |
$('.alert').alert('close')
Begivenheder
Bootstraps advarselsplugin afslører nogle få hændelser for at tilslutte sig advarselsfunktionalitet.
Begivenhed | Beskrivelse |
---|---|
close.bs.alert |
Denne hændelse udløses med det samme, når close instansmetoden kaldes. |
closed.bs.alert |
Denne hændelse udløses, når alarmen er blevet lukket (vil vente på, at CSS-overgange er fuldført). |
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})