Bootstrap 4 Alerts(Uyarı Kutuları)

Bootstrap 4 Uyarı Yazıları (Alerts)

Sitemizde kullanıcıları uyarmak için görüntülenen veya herhangi bir olan gerçekleştikten sonra kullanıcıya bildirim olarak görünen alanlar uyarı yazıları ya da bilinen adıyla alert adı verilir.
Boostrap4'te bulunan hazır renk sayısı kadar alert çeşidi bulunmaktadır.
Herhangi bir div elemanına alert görünümü vermek için alert alert-* class özelliği verilmesi yeterlidir.
* işaretli yere renk adı yazılır.
Örnek: class="alert alert-primary" gibi.

Bootstrap4 Kapatılabilir Alert

Bootstrap4'te oluşturulan alert'ler tıklamaya bağlı olarak kapatılabilme özelliğine sahiptir.
Bu işlem için mecburi yapılması gereken işlemler aşağıdadır.
1- Tabii bunun için jquery.js ve bootstrap.js dosyalarının sayfamıza çağırılması şarttır. Bu dosyalar tıklama olayını algılayıp işlem yaptıran dosyalardır.
2- alert özelliği verdiğimiz HTML elemanına role="alert" parametresi ve değerini mutlaka vermeliyiz.
3- Kapatma işlemi için kapatılacak düğme mutlaka alert div'inin içinde bulunmalıdır.
Örnek: <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Merhaba</strong> Bu div x işaretine basılarak kapatılabilir. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

İletişim

  • info@frontendokulu.com