Source

Waarschuwingen

Bied contextuele feedbackberichten voor typische gebruikersacties met een handvol beschikbare en flexibele waarschuwingsberichten.

Voorbeelden

Waarschuwingen zijn beschikbaar voor elke lengte van de tekst, evenals een optionele sluitknop. Gebruik voor de juiste styling een van de acht vereiste contextuele klassen (bijv. .alert-success). Gebruik voor inline ontslag de jQuery-plug-in voor waarschuwingen .

<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>
Betekenis overbrengen aan ondersteunende technologieën

Het gebruik van kleur om betekenis toe te voegen geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (bijv. de zichtbare tekst), of op alternatieve manieren wordt opgenomen, zoals extra tekst die verborgen is bij de .sr-onlyklasse.

Gebruik de .alert-linkutility-klasse om snel bijpassende gekleurde links te geven binnen een alert.

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

Extra content

Waarschuwingen kunnen ook extra HTML-elementen bevatten, zoals koppen, alinea's en scheidingslijnen.

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

afwijzen

Met behulp van de waarschuwing JavaScript-plug-in is het mogelijk om elke waarschuwing inline te sluiten. Hier is hoe:

  • Zorg ervoor dat u de waarschuwingsplug-in of het gecompileerde Bootstrap JavaScript hebt geladen.
  • Als u ons JavaScript vanaf de bron bouwt, isutil.js . De gecompileerde versie bevat dit.
  • Voeg een sluitknop en de .alert-dismissibleklasse toe, die extra opvulling rechts van de waarschuwing toevoegt en de .closeknop positioneert.
  • Voeg op de sluitknop het data-dismiss="alert"kenmerk toe, dat de JavaScript-functionaliteit activeert. Zorg ervoor dat u het <button>element ermee gebruikt voor correct gedrag op alle apparaten.
  • Als u waarschuwingen wilt animeren wanneer u ze verwijdert, moet u de klassen .fadeen toevoegen..show

Je kunt dit in actie zien met een 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-gedrag

Triggers

Afwijzing van een waarschuwing via JavaScript inschakelen:

$('.alert').alert()

Of met dataattributen op een knop binnen de alert , zoals hierboven aangetoond:

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

Houd er rekening mee dat als u een waarschuwing sluit, deze uit de DOM wordt verwijderd.

Methoden:

Methode Beschrijving
$().alert() Laat een alert luisteren naar klikgebeurtenissen op onderliggende elementen die het data-dismiss="alert"attribuut hebben. (Niet nodig bij gebruik van de automatische initialisatie van de data-api.)
$().alert('close') Sluit een waarschuwing door deze uit de DOM te verwijderen. Als de klassen .fadeen .showaanwezig zijn op het element, verdwijnt de waarschuwing voordat deze wordt verwijderd.
$().alert('dispose') Vernietigt de waarschuwing van een element. 
$(".alert").alert('close')

Evenementen

De waarschuwingsplug-in van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op de waarschuwingsfunctionaliteit.

Evenement Beschrijving
close.bs.alert Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de closeinstantiemethode wordt aangeroepen.
closed.bs.alert Deze gebeurtenis wordt geactiveerd wanneer de waarschuwing is gesloten (wacht tot de CSS-overgangen zijn voltooid). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})