Source

Varsler

Gi kontekstuelle tilbakemeldingsmeldinger for typiske brukerhandlinger med en håndfull tilgjengelige og fleksible varslingsmeldinger.

Eksempler

Varsler er tilgjengelige for alle tekstlengder, samt en valgfri avvisknapp. For riktig styling, bruk en av de åtte nødvendige kontekstuelle klassene (f.eks. .alert-success). For inline avvisning, bruk varsler 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 hjelpeteknologier

Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .sr-onlyklassen.

Bruk .alert-linkverktøyklassen for raskt å gi matchende fargede lenker i ethvert varsel.

<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>

Ytterligere innhold

Varsler kan også inneholde flere HTML-elementer som overskrifter, avsnitt 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>

Avviser

Ved å bruke JavaScript-plugin-modulen for varsel, er det mulig å avvise alle inline-varsler. Dette er hvordan:

  • Pass på at du har lastet inn varslingsplugin, eller det kompilerte Bootstrap JavaScript.
  • Hvis du bygger JavaScript fra kilden, kreverutil.js det . Den kompilerte versjonen inkluderer dette.
  • Legg til en avvisningsknapp og .alert-dismissibleklassen, som legger til ekstra polstring til høyre for varselet og plasserer .closeknappen.
  • På avvis-knappen legger du til data-dismiss="alert"attributtet, som utløser JavaScript-funksjonaliteten. Sørg for å bruke<button> elementet med det for riktig oppførsel på alle enheter.
  • For å animere varsler når du avviser dem, sørg for å legge til .fadeklassene og .show.

Du kan se dette i aksjon 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-adferd

Utløsere

Aktiver avvisning av et varsel via JavaScript:

$('.alert').alert()

Eller med dataattributter på en knapp i varselet , som vist ovenfor:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Merk at lukking av et varsel vil fjerne det fra DOM.

Metoder

Metode Beskrivelse
$().alert() Får et varsel til å lytte etter klikkhendelser på etterkommere elementer som har data-dismiss="alert"attributtet. (Ikke nødvendig når du bruker data-APIs automatiske initialisering.)
$().alert('close') Lukker et varsel ved å fjerne det fra DOM. Hvis klassene .fadeog .shower til stede på elementet, vil varselet tone ut før det fjernes.
$().alert('dispose') Ødelegger et elements varsling. 
$(".alert").alert('close')

arrangementer

Bootstraps varslingsplugin avslører noen få hendelser for å koble til varslingsfunksjonalitet.

Begivenhet Beskrivelse
close.bs.alert Denne hendelsen utløses umiddelbart når closeinstansmetoden kalles.
closed.bs.alert Denne hendelsen utløses når varselet er lukket (vil vente på CSS-overganger for å fullføre). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})