Ga naar hoofdinhoud Ga naar navigatie in documenten
in English

Waarschuwingen

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

Op deze pagina

Voorbeelden

Waarschuwingen zijn beschikbaar voor elke lengte 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 JavaScript-plug-in alerts .

<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>
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 .visually-hiddenklasse.

Live voorbeeld

Klik op de onderstaande knop om een ​​waarschuwing weer te geven (verborgen met inline-stijlen om te starten), en sluit deze vervolgens af (en vernietig) met de ingebouwde sluitknop.

<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

We gebruiken het volgende JavaScript om onze live alert-demo te activeren:

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
  var wrapper = document.createElement('div')
  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

  alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
  alertTrigger.addEventListener('click', function () {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

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

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

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>

pictogrammen

Op dezelfde manier kunt u flexbox-hulpprogramma's en Bootstrap-pictogrammen gebruiken om waarschuwingen met pictogrammen te maken. Afhankelijk van uw pictogrammen en inhoud, wilt u misschien meer hulpprogramma's of aangepaste stijlen toevoegen.

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

Heeft u meer dan één pictogram nodig voor uw meldingen? Overweeg om meer Bootstrap-pictogrammen te gebruiken en een lokale SVG-sprite te maken, zodat u gemakkelijk herhaaldelijk naar dezelfde pictogrammen kunt verwijzen.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</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.
  • Voeg een sluitknop en de .alert-dismissibleklasse toe, die extra opvulling rechts van de waarschuwing toevoegt en de sluitknop positioneert.
  • Voeg op de sluitknop het data-bs-dismiss="alert"attribuut 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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Wanneer een waarschuwing wordt genegeerd, wordt het element volledig uit de paginastructuur verwijderd. Als een toetsenbordgebruiker de waarschuwing negeert met de sluitknop, zal zijn focus plotseling verloren gaan en, afhankelijk van de browser, worden teruggezet naar het begin van de pagina/het document. Om deze reden raden we aan extra JavaScript toe te voegen dat luistert naar de closed.bs.alertgebeurtenis en programmatisch instelt focus()op de meest geschikte locatie op de pagina. Als je van plan bent de focus te verplaatsen naar een niet-interactief element dat normaal gesproken geen focus krijgt, zorg er dan voor dat je tabindex="-1"het element toevoegt.

Sass

Variabelen

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Variant mixen

Gebruikt in combinatie met $theme-colorsom contextuele modificatieklassen te maken voor onze waarschuwingen.

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Lus

Loop die de modifier-klassen genereert met de alert-variant()mixin.

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

JavaScript-gedrag

Initialiseren

Elementen initialiseren als waarschuwingen

var alertList = document.querySelectorAll('.alert')
var alerts =  [].slice.call(alertList).map(function (element) {
  return new bootstrap.Alert(element)
})

Voor het enige doel van het negeren van een waarschuwing is het niet nodig om de component handmatig te initialiseren via de JS API. Door gebruik te maken van data-bs-dismiss="alert", wordt het onderdeel automatisch geïnitialiseerd en correct gesloten.

Zie het gedeelte over triggers voor meer informatie.

Triggers

Ontslag kan worden bereikt met het datakenmerk op een knop in de waarschuwing , zoals hieronder wordt aangetoond:

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

of op een knop buiten de waarschuwing met behulp van de data-bs-targetonderstaande afbeelding:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

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

Methoden:

Methode Beschrijving
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.
dispose Vernietigt de waarschuwing van een element. (Verwijdert opgeslagen gegevens op het DOM-element)
getInstance Statische methode waarmee u de waarschuwingsinstantie kunt krijgen die is gekoppeld aan een DOM-element, u kunt deze als volgt gebruiken:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Statische methode die een waarschuwingsinstantie retourneert die is gekoppeld aan een DOM-element of een nieuwe maakt voor het geval deze niet is geïnitialiseerd. Je kunt het als volgt gebruiken:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Evenementen

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

Evenement Beschrijving
close.bs.alert Wordt onmiddellijk geactiveerd wanneer de closeinstantiemethode wordt aangeroepen.
closed.bs.alert Wordt geactiveerd wanneer de waarschuwing is gesloten en de CSS-overgangen zijn voltooid. 
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})