Bootstrap 5 Varning

Varning

Bootstrap 5 erbjuder ett enkelt sätt att skapa fördefinierade varningsmeddelanden:

Varningsrutor skapas med .alert-klassen följt av en kontextuell klass:

  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light
  • .alert-dark

Exempel

<div class="alert alert-success">
  <strong>Lyckat!</strong> Denna varningsruta indikerar framgång eller positiv handling.
</div>

Prova själv

Varningslänk

Lägg till .alert-link Lägg till klass till någon länk inom varningsrutan för att skapa en "matchande färglänk":

Exempel

<div class="alert alert-success">
  <strong>Lyckat!</strong> Du bör <a href="#" class="alert-link">läsa detta meddelande</a>.
</div>

Prova själv

Stäng varning

För att stänga varningsmeddelandet, lägg till .alert-dismissible Lägg till klass till varningscontainer. Sedan class="btn-close" och data-bs-dismiss="alert" Lägg till i länk- eller knappelement (när du klickar på det försvinner varningen).

Exempel

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Lyckat!</strong> Denna varningsruta indikerar framgång eller positiv handling.
</div>

Prova själv

Varningar animationer

.fade och .show Lägg till en in- och uteffekt när varningen stängs:

Exempel

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

Prova själv