1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (1 Kişi oy verdi, 5 üzerinden ortalama puan: 5,00.
Bu yazıya oy vermek ister misiniz?)
Loading...
Bootstrap

Bootstrap Alerts (Uyarılar)

Bootstrap önceden tanımlanmış uyarı iletileri oluşturmak için kolay bir yol sunar.

Alertler .alert classı ile oluşturulur ve ardından 4 içeriğe uygun class tanımlanır. Başarılı durumlar için .alert-success classı, bilgilendirme yapılacak durumlar için .alert-info classı, uyarı verilecek durumlar için .alert-warning classı, tehlikeli durumları belirtmek için .alert-danger classı kullanılır

 

Şekil *.1: .alert classlarının kullanımı

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

Şekil *.2: .alert classlarının kullanımı ile ortaya çıkan sonuç (uyarıların kapanması işlemi yok)

7

 

Alertlerinin Kapanması

Alert mesajını kapatmak için class=”close” ve data-dismiss=”alert”  <a> etiketine eklenir. Ve bu <a> etiketi alert oluşturulan divin içinde yer alır.

Şekil *.3: Kapama butonu ile alert uygulaması

<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

aria-* ve &times; niteliklerinin kullanılması

Erişilebilirlik uygulamalarında ekran koruyucu kullanan kullanıcılar için aria-label=”close” nitelik kapatma işlemi için kullanılacak butona eklenebilir.

&times; kapatma butonları için X harfi yerine kullanılır (x) close işlemi için uygun bir şekil ortaya çıkarır.

 

Animasyonlu Alertler (fade efekti ile kapanan)

 

Bir alert mesajı kapanırken fade efekti vermek için .fade ve .in classları kullanılır.

Şekil *.4: .fade ve .in classlarının kullanılması

<div class="alert alert-success fade in">

 

Yorum Yap