Alert Class
BootStrap'ın div ve benzeri elemanlar için sunduğu hazır css sınıflarından biri alert sınıfıdır.
Alert sınıfı sayesinde div, span vb elemanlara, genellikle ziyaretçiye bir mesaj vermek amacıyla, kolayca hazır görünümler uygulayabiliriz.
Örnek:
Uyarı! Girdiğiniz bilgileri kontrol ediniz.
Yukarıdaki örnekte bir div etiketine alert class uygulanmıştır. Kodları şu şekildedir:
<div class="alert alert-danger">
<strong>Uyarı!</strong> Girdiğiniz bilgileri kontrol ediniz
.
</div>
Div elemanı içerisindeki içerik size bağlıdır.
Div etiketine 2 ayrı class uygulanmış olup, alert-danger seçicisi kırmızı tonlu bir görünüm kazandırmıştır. Diğer seçenekler şu şekildedir:
alert-success seçicisi:
Başarılı! İşleminiz sonuçlanmıştır.
alert-info seçicisi:
Bilgi! Sitemizdeki tüm içerik korunmaktadır.
alert-warning seçicisi:
Uyarı! Kullanım koşullarını lütfen dikkatlice okuyunuz.
Konu örnekleri kısmında kodları inceleyebilir ve kendiniz deneyebilirsiniz.
Alert sınıfı uygulanmış bölümdeki bir linke alert-link seçicisini uygularsak, o link içinde bulunduğu elemanla uyumlu bir renk kazanacaktır:
<div class="alert alert-danger">
<strong>Dikkat!</strong> Bir hata oluştu! <a class="alert-link" href="#">Ana sayfaya dönmek için tıklayınız.</a>
</div>
Kapat Düğmesi
Alert sınıfının uygulandığı div vb elemanın, ziyaretçi tarafından kapatılabilmesini istiyorsak;
-
alert sınıfı yanında alert-dismissible sınıfını da uygulayın.
-
kapat butonu için etiketin içinde bir link veya buton oluşturarak class="close" ve data-dismiss="alert" parametrelerini uygulayın.
Böylece kullanıcı o link veya butona tıklayarak div vb. elemanı gizleyebilir.
X Tebrikler! Başvurunuz onaylandı.
<div class="alert alert-success alert-dismissible">
<a aria-label="close" class="close" data-dismiss="alert" href="#">X</a>
<strong>Tebrikler!</strong> Başvurunuz onaylandı.
</div>
.fade ve .in seçicilerini de uygularsak, kapatma esnasında solma efekti gerçekleşecektir.
<div class="alert alert-danger alert-dismissible fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="#">Kapat</a>
<strong>Uyarı
!</strong> Bilgileri gözden geçiriniz.
</div>
Kapat Uyarı! Bilgileri gözden geçiriniz.
aria-label parametresini kullanmamızda erişilebilirlik açısından fayda vardır.
bootstrap alert kullanımı, alert sınıfı kullanımı, bootstrap alert nedir, alert nasıl kullanılır, bootstrap dersleri alert konusu, kapatılabilir div, kapanabilen div yapma
KONU İLE İLGİLİ ÖRNEKLER
6451 kez okundu.