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 :
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.
<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ı 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.
<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>
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</button>
<strong>Azkod Alert-light Sınıfı!</strong> Kapanan Uyarılar.
</div>
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.
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</button>
<strong>Azkod Alert-light Sınıfı!</strong> Animasyonlu Uyarılar.
</div>
| Önceki Ders: Bootstrap Jumbotron | Sonraki Ders: Bootstrap Butonlar |