Bootstrap Uyarılar

Bootstrap'ta uyarılar kullanıcılara renkli ve belirgin kutular içinde uyarı mesajları vermek için kullanılmaktadır. Bootstrap uyarı mesajları 4 farklı şekilde kullanılmaktadır. Bunlar :

  • Uyarılar
  • Bağlantılı Uyarılar
  • Kapanan Uyarılar
  • Animasyonlu Uyarılar

Uyarılar

Bootstrap'ta uyarı kutucuğu eklemek için alert sınıfı kullanılmaktadır. Uyarı kutucuğuna istediğimiz rengi vermek için alert-success, alert-info, alert-warning, alert-danger, alert-primary, alert-secondary, alert-dark, alert-light sınıfları kullanılmaktadır.

Azkod alert-success sınıfı uyarı alanı.
Azkod alert-info sınıfı uyarı alanı.
Azkod alert-warning sınıfı uyarı alanı.
Azkod alert-danger sınıfı uyarı alanı.
Azkod alert-primary sınıfı uyarı alanı.
Azkod alert-secondary sınıfı uyarı alanı.
Azkod alert-dark sınıfı uyarı alanı.
Azkod alert-light sınıfı uyarı alanı.

Uyarılar Kodu: 

  <div class="alert alert-success">
    Azkod alert-success sınıfı uyarı alanı.
  </div>

  <div class="alert alert-info">
    Azkod alert-info sınıfı uyarı alanı.
  </div>

  <div class="alert alert-warning">
    Azkod alert-warning sınıfı uyarı alanı.
  </div>

  <div class="alert alert-danger">
   Azkod alert-danger sınıfı uyarı alanı.
  </div>

  <div class="alert alert-primary">
   Azkod alert-primary sınıfı uyarı alanı.
  </div>

  <div class="alert alert-secondary">
   Azkod alert-secondary sınıfı uyarı alanı.
  </div>

  <div class="alert alert-dark">
    Azkod alert-dark sınıfı uyarı alanı.
  </div>

  <div class="alert alert-light">
    Azkod alert-light sınıfı uyarı alanı.
  </div>

 

Bağlantılı Uyarılar

Bağlantılı uyarı eklemek için link etiketinde bulunan sınıfa alert-link verilmesi gerekmektedir. Alert link vermeden de bağlantı ekleyebilirsiniz fakat görüntü olarak düzgün olmayabilir.

Alert-success Bağlantılı Uyarı Alanı Azkod Bootstrap Dersleri.
Alert-info Bağlantılı Uyarı Alanı Azkod Bootstrap Dersleri.
Alert-warning Bağlantılı Uyarı Alanı Azkod Bootstrap Dersleri.
Alert-danger Bağlantılı Uyarı Alanı Azkod Bootstrap Dersleri.
Alert-primary Bağlantılı Uyarı Alanı Azkod Bootstrap Dersleri.
Alert-secondary Bağlantılı Uyarı Alanı Azkod Bootstrap Dersleri.
Alert-dark Bağlantılı Uyarı Alanı Azkod Bootstrap Dersleri.
Alert-light Bağlantılı Uyarı Alanı Azkod Bootstrap Dersleri.

Bağlantılı Uyarılar Kodu:

  <div class="alert alert-success">
    Alert-success Bağlantılı Uyarı Alanı<a href="#" class="alert-link">Azkod Bootstrap Dersleri</a>.
  </div>

  <div class="alert alert-info">
     Alert-info Bağlantılı Uyarı Alanı<a href="#" class="alert-link">Azkod Bootstrap Dersleri</a>.
  </div>

  <div class="alert alert-warning">
     Alert-warning Bağlantılı Uyarı Alanı<a href="#" class="alert-link">Azkod Bootstrap Dersleri</a>.
  </div>

  <div class="alert alert-danger">
     Alert-danger Bağlantılı Uyarı Alanı<a href="#" class="alert-link">Azkod Bootstrap Dersleri</a>.
  </div>

  <div class="alert alert-primary">
     Alert-primary Bağlantılı Uyarı Alanı<a href="#" class="alert-link">Azkod Bootstrap Dersleri</a>.
  </div>

  <div class="alert alert-secondary">
     Alert-secondary Bağlantılı Uyarı Alanı<a href="#" class="alert-link">Azkod Bootstrap Dersleri</a>.
  </div>

  <div class="alert alert-dark">
     Alert-dark Bağlantılı Uyarı Alanı<a href="#" class="alert-link">Azkod Bootstrap Dersleri</a>.
  </div>

  <div class="alert alert-light">
     Alert-light Bağlantılı Uyarı Alanı<a href="#" class="alert-link">Azkod Bootstrap Dersleri</a>.
  </div>

 

Kapanan Uyarılar

Azkod Alert-success Sınıfı! Kapanan Uyarılar.
Azkod Alert-info Sınıfı! Kapanan Uyarılar.
Azkod Alert-warning Sınıfı! Kapanan Uyarılar.
Azkod Alert-danger Sınıfı! Kapanan Uyarılar.
Azkod Alert-primary Sınıfı! Kapanan Uyarılar.
Azkod Alert-secondary Sınıfı! Kapanan Uyarılar.
Azkod Alert-dark Sınıfı! Kapanan Uyarılar.
Azkod Alert-light Sınıfı! Kapanan Uyarılar.

Kapanan Uyarılar Kodu

  <div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-success Sınıfı!</strong> Kapanan Uyarılar.
  </div>

  <div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-info Sınıfı!</strong> Kapanan Uyarılar.
  </div>

  <div class="alert alert-warning alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-warning Sınıfı!</strong> Kapanan Uyarılar.
  </div>

  <div class="alert alert-danger alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-danger Sınıfı!</strong> Kapanan Uyarılar.
  </div>

  <div class="alert alert-primary alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-primary Sınıfı!</strong> Kapanan Uyarılar.
  </div>

  <div class="alert alert-secondary alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-secondary Sınıfı!</strong> Kapanan Uyarılar.
  </div>

  <div class="alert alert-dark alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-dark Sınıfı!</strong> Kapanan Uyarılar.
  </div>

  <div class="alert alert-light alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-light Sınıfı!</strong> Kapanan Uyarılar.
  </div>

 

Animasyonlu Uyarılar

Animasyonlu uyarı kapandığında solarak kapandığı için bu ismi almıştır. Animasyonlu uyarı eklemek için kapanan uyarılar sınıfının yanına fade show eklenmesi gerekir.

Azkod Alert-success Sınıfı! Animasyonlu Uyarılar.
Azkod Alert-info Sınıfı! Animasyonlu Uyarılar.
Azkod Alert-warning Sınıfı! Animasyonlu Uyarılar.
Azkod Alert-danger Sınıfı! Animasyonlu Uyarılar.
Azkod Alert-primary Sınıfı! Animasyonlu Uyarılar.
Azkod Alert-secondary Sınıfı! Animasyonlu Uyarılar.
Azkod Alert-dark Sınıfı! Animasyonlu Uyarılar.
Azkod Alert-light Sınıfı! Animasyonlu Uyarılar.

Animasyonlu Uyarılar Kodu

  <div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-success Sınıfı!</strong> Animasyonlu Uyarılar.
  </div>

  <div class="alert alert-info alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-info Sınıfı!</strong> Animasyonlu Uyarılar.
  </div>

  <div class="alert alert-warning alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-warning Sınıfı!</strong> Animasyonlu Uyarılar.
  </div>

  <div class="alert alert-danger alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-danger Sınıfı!</strong> Animasyonlu Uyarılar.
  </div>

  <div class="alert alert-primary alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-primary Sınıfı!</strong> Animasyonlu Uyarılar.
  </div>

  <div class="alert alert-secondary alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-secondary Sınıfı!</strong> Animasyonlu Uyarılar.
  </div>

  <div class="alert alert-dark alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-dark Sınıfı!</strong> Animasyonlu Uyarılar.
  </div>

  <div class="alert alert-light alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Azkod Alert-light Sınıfı!</strong> Animasyonlu Uyarılar.
  </div>

 

Önceki Ders: Bootstrap Jumbotron Sonraki Ders: Bootstrap Butonlar