Source

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">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a 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 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 ekstra tekst skjult i .sr-onlyklassen.

Brug .alert-linkværktøjsklassen til hurtigt at give matchende farvede links inden for enhver advarsel.

<div class="alert alert-primary" role="alert">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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.

<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æverutil.js det . Den kompilerede version inkluderer dette.
  • Tilføj en afvis-knap og .alert-dismissibleklassen, som tilføjer ekstra polstring til højre for advarslen og placerer .closeknappen.
  • 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 .fadeog ..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">&times;</span>
  </button>
</div>

JavaScript adfærd

Udløsere

Aktiver afvisning af en advarsel via JavaScript:

$('.alert').alert()

Eller med dataattributter på en knap i advarslen , som vist ovenfor:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</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 .fadeog .shower 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 closeinstansmetoden 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…
})