Bootstrap 5 varoitus

Varoitus

Bootstrap 5 tarjoaa yksinkertaisen tavan luoda määritettyjä varoitusviestejä:

Varoitusikkunat luodaan .alert-luokan avulla, seuraa kontekstiluokkaa:

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

Esimerkki

<div class="alert alert-success">
  <strong>Onnistui!</strong>Tämä varoitusikkuna edustaa onnistumista tai positiivista toimintaa.
</div>

Kokeile itse

Varoituslinkki

Lisää .alert-link Lisää luokka varoitusikkunassa olevaan linkkiin, voit luoda "sopivan värisen linkin":

Esimerkki

<div class="alert alert-success">
  <strong>Onnistui!</strong>Sinun tulisi <a href="#" class="alert-link">lukea tämä viesti</a>.
</div>

Kokeile itse

Sulje varoitus

Jos haluat sulkea varoitusviestin, lisää .alert-dismissible Lisää luokka varoitusikkunakonttiin. Sitten class="btn-close" ja data-bs-dismiss="alert" Lisää linkkiin tai painikkeeseen (kun sitä napsautetaan, varoitusikkuna katoaa).

Esimerkki

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Onnistui!</strong>Tämä varoitusikkuna edustaa onnistumista tai positiivista toimintaa.
</div>

Kokeile itse

Varoitusikkunoiden animaatio

.fade ja .show Lisää luokka sulkeutuessaan varoitusviestin, lisää pehmennysvaikutus:

Esimerkki

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

Kokeile itse