Kurs Önerileri:

Bootstrap 5 Uyarı

Uyarı

Bootstrap 5, önceden tanımlanmış uyarı mesajları oluşturmak için basit bir yöntem sunar:

  • Uyarı kutuları, .alert sınıfı ardından bir bağlam sınıfı ile oluşturulur:
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

Örnek

<div class="alert alert-success">
  <strong> Başarılı! </strong> Bu uyarı kutusu, başarılı veya olumlu bir eylemi gösterir.
</div>

Kendiniz Deneyin

.alert-dark

Uyarı bağlantısı .alert-link Uyarı kutusu içindeki herhangi bir bağlantıya sınıf ekleyerek "eşleşen renkli bağlantı" oluşturabilirsiniz:

Örnek

<div class="alert alert-success">
  <strong> Başarılı! </strong> Bu mesajı <a href="#" class="alert-link">okumalısınız</a>.
</div>

Kendiniz Deneyin

Uyarı Kapat

Uyarı mesajını kapatmak için .alert-dismissible Uyarı konteynerine sınıf ekleyin. Sonra class="btn-close" ve data-bs-dismiss="alert" Bağlantı veya düğme elementlerine ekleyin (üzerine tıkladığınızda uyarı kutusu kapanır).

Örnek

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong> Başarılı! </strong> Bu uyarı kutusu, başarılı veya olumlu bir eylemi gösterir.
</div>

Kendiniz Deneyin

Uyarı kutusu animasyonu

.fade ve .show Uyarı mesajını kapatarken yavaş yavaş girmek için sınıf ekleyin:

Örnek

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

Kendiniz Deneyin