BOOTSTRAP 4 – ALERT (UYARI MESAJLARI)

Bootstrap alert class’ları ile istediğimiz amaca uygun uyarı mesajlarını gösterebilir, kullanıcıları bilgilendirebiliriz. Örneğin bir üyelik formu düşünelim. Üye olma işlemlerini gerçekleştirirken birçok durum meydana gelebilir. Eğer herhangi bir hata meydana gelmeden kayıt işlemi başarıyla gerçekleşirse, işlemin başarıyla gerçekleştiğine dair kullanıcıya bir mesaj gösterilebilir. Aynı şekilde bir hata meydana geldiğinde hataya dair uyarı mesajı veya bilgilendirme amaçlı bir mesaj gösterilebilir.

  • Bir div etiketi oluşturup, içerisine mesajımızı yazıyoruz.
  • Oluşturduğumuz div’in class’ına alert yazıyoruz. Bu class’ı tüm alert mesajları için yazıyoruz.
  • Son olarak div’in class’ına hangi amaç için alert mesajı göstermek istiyorsak ona uygun renk class’ı yazılır.

Alert mesajları için renk class’ları şunlardır:

  • alert-success
  • alert-info
  • alert-warning
  • alert-danger
  • alert-primary
  • alert-secondary
  • alert-light
  • alert-dark

 ⇒  Şimdi tüm alert mesajlarını görelim. Kodlarımız şu şekilde;

Alert mesajlarının görünümü;

bootstrap-alert-kullanimi-1

Gördüğünüz gibi div’e vermiş olduğumuz ikinci class’a göre alert mesajlarının rengi değişiyor. Sizde ne için mesaj göstermek istiyorsanız ona uygun class’ı seçmelisiniz.

 ⇒  Yukarda gördüğümüz alert mesajlarını düz metin olarak yazdık. Bu mesajların içerisinde linkler de tanımlayabiliriz. 

Bunun için linkin yani <a> etiketinin class’ına alert-link yazıyoruz. 

İçerisinde link bulunan alert mesajlarının görünümü;

bootstrap-alert-link-kullanimi ⇒  Alert mesajlarını kapatmak için ikon ekleyebiliriz. Kapatma ikonuna tıklandığında alert mesajı kapatılır, sayfa yenilendiğinde mesaj tekrar görünür hale gelir.

Kullanımı şu şekilde; 

Kapatma ikonu bulunan alert mesajlarının görünümü;

bootstrap-alert-close

Umarım sizin için faydalı bir yazı olmuştur.  

Farklı bir yazımda görüşmek üzere.

Yorum Yazın