Anbefalet kursus:

Bootstrap 5 Advarsel

Advarsel

Bootstrap 5 tilbyder en enkel måde at oprette foruddefinerede advarselsmeddelelser på:

  • Advarselsbokse oprettes ved hjælp af .alert-klassen, fulgt af en kontekstklasse:
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

Eksempel

<div class="alert alert-success">
  <strong>Succes!</strong> Denne advarselsboks repræsenterer en succes eller en positiv handling.
</div>

Prøv det selv

.alert-dark

Advarselslink .alert-link Klassen tilføjes til ethvert link i advarselsboksen, hvilket kan oprette en "matchende farvelink":

Eksempel

<div class="alert alert-success">
  <strong>Succes!</strong> Du bør <a href="#" class="alert-link">læse denne besked</a>.
</div>

Prøv det selv

Luk advarsel

For at lukke advarselsmeddelelsen, tilføj .alert-dismissible Klassen tilføjes til advarselsbeholderen. Herefter class="btn-close" og data-bs-dismiss="alert" Tilføj til link- eller knapelementer (når du klikker på det, forsvinder advarselsboksen).

Eksempel

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Succes!</strong> Denne advarselsboks repræsenterer en succes eller en positiv handling.
</div>

Prøv det selv

Advarselsboksanimation

.fade og .show Klassen tilføjes til at tilføje en fade-effekt, når advarselsmeddelelsen lukkes:

Eksempel

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

Prøv det selv