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.
⇒ Bootstrap alert mesajlarını göstermek için yapmamız gerekenler:
- 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;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert—check it out! </div> <div class="alert alert-success" role="alert"> A simple success alert—check it out! </div> <div class="alert alert-danger" role="alert"> A simple danger alert—check it out! </div> <div class="alert alert-warning" role="alert"> A simple warning alert—check it out! </div> <div class="alert alert-info" role="alert"> A simple info alert—check it out! </div> <div class="alert alert-light" role="alert"> A simple light alert—check it out! </div> <div class="alert alert-dark" role="alert"> A simple dark alert—check it out! </div> |
Alert mesajlarının görünümü;
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.
|
1 2 3 4 5 |
<div class="alert alert-success" role="alert"> A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> |
İçerisinde link bulunan alert mesajlarının görünümü;
⇒ 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;
|
1 2 3 4 5 6 7 8 |
<div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> |
Kapatma ikonu bulunan alert mesajlarının görünümü;
Umarım sizin için faydalı bir yazı olmuştur.
Farklı bir yazımda görüşmek üzere.
){kind=link}