Aanbevolen cursus:

Bootstrap 5 waarschuwing

Waarschuwing

Bootstrap 5 biedt een eenvoudige manier om vooraf gedefinieerde waarschuwing berichten te maken:

  • Waarschuwing frames worden gemaakt met behulp van de .alert klasse, gevolgd door een van de context classes:
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

Voorbeeld

<div class="alert alert-success">
  <strong>Succes!</strong> Dit waarschuwing frame geeft aan dat een succesvolle of positieve actie is ondernomen.
</div>

Probeer het zelf

.alert-dark

Waarschuwing link .alert-link Klasse wordt toegevoegd aan elke link binnen het waarschuwing frame, om een "passende kleur link" te creëren:

Voorbeeld

<div class="alert alert-success">
  <strong>Succes!</strong> U zou deze melding moeten <a href="#" class="alert-link">lezen</a>.
</div>

Probeer het zelf

Sluit waarschuwing

Om de waarschuwing berichten te sluiten, voeg .alert-dismissible Klasse wordt toegevoegd aan de waarschuwing container. Vervolgens class="btn-close" en data-bs-dismiss="alert" Voeg toe aan een link of knop element (wanneer u erop klikt, verdwijnt het waarschuwing frame).

Voorbeeld

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Succes!</strong> Dit waarschuwing frame geeft aan dat een succesvolle of positieve actie is ondernomen.
</div>

Probeer het zelf

Waarschuwing frame animatie

.fade en .show Klasse wordt toegevoegd bij het sluiten van de waarschuwing berichten met een fade-in-fade-out effect:

Voorbeeld

<div class="alert alert-danger alert-dismissible fade show">

Probeer het zelf