Bootstrap 5 Alert Bileşeni: Uyarı Mesajları, Kapatma ve JavaScript Olayları

Temel kullanım ve sekiz renk sınıfı

Belgeler alert için bir renk sınıfını zorunlu sayar: .alert tek başına yalnızca dolgu, alt boşluk, şeffaf kenarlık ve köşe yuvarlaklığı verir, renkleri bağlamsal sınıf getirir. Sekiz sınıf $theme-colors haritasındaki anahtarlardan üretilir: alert-primary, alert-secondary, alert-success, alert-danger, alert-warning, alert-info, alert-light ve alert-dark. Uyarının uzunluğu konusunda bir sınır yoktur; tek satırlık bir bildirimden birkaç paragraflık bir açıklamaya kadar kullanılabilir.

<div class="alert alert-success" role="alert">
  Profiliniz kaydedildi.
</div>
<div class="alert alert-danger" role="alert">
  Ödeme alınamadı. Kart bilgilerinizi kontrol edin.
</div>
<div class="alert alert-warning" role="alert">
  Paketinizin süresi 3 gün içinde doluyor.
</div>

Bootstrap 5.0.2 derlenmiş CSS dosyasında temel sınıf ve bir renk varyantı şöyle tanımlıdır:

.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-primary {
  color: #084298;
  background-color: #cfe2ff;
  border-color: #b6d4fe;
}

Renkler elle seçilmiş değildir. Kaynak koddaki _alert.scss döngüsü her tema rengini shift-color() fonksiyonuyla üç ayrı yöne kaydırır: zemin için $alert-bg-scale (-%80, yani çok açık bir ton), kenarlık için $alert-border-scale (-%70) ve metin için $alert-color-scale (%40, yani koyu bir ton). Ardından metin ile zemin arasındaki kontrast oranı $min-contrast-ratio değerinin altında kalırsa metin rengi yeniden hesaplanır. Bu yüzden kendi tema renginizi eklediğinizde onun alert sınıfı da okunaklı bir tonla otomatik oluşur; renk haritasını genişletmek tema renkleri yazısının konusu.

Alert içinde bağlantı, başlık ve ek içerik

Alert içindeki bir bağlantının rengini mesajın rengine uydurmak için .alert-link sınıfını kullanın. Bu sınıf bağlantıyı kalın yapar ($alert-link-font-weight) ve renk varyantı mixin'i ona metin renginden %20 koyulaştırılmış bir ton verir. Normal bir <a> ise sayfanın genel bağlantı rengini taşır ve renkli zeminde çoğu zaman uyumsuz durur.

Alert yalnızca düz metin taşımak zorunda değildir; başlık, paragraf ve ayırıcı çizgi de içerebilir. Başlık için .alert-heading kullanılır; kaynakta bu sınıf yalnızca color: inherit verir, böylece başlık genel başlık renginden etkilenmeden alert'in rengini alır. Son paragrafın alttaki boşluğu alert'in kendi dolgusuyla birleşip fazla yer kaplamasın diye belgeler son öğeye .mb-0 eklemeyi önerir.

<div class="alert alert-info" role="alert">
  <h4 class="alert-heading">Bakım duyurusu</h4>
  <p>Cumartesi gecesi planlı bakım yapılacak. Bu sürede kontrol paneline kısa süreli erişim kesintisi yaşanabilir.</p>
  <hr>
  <p class="mb-0">Ayrıntılar için <a href="#" class="alert-link">durum sayfasına</a> bakabilirsiniz.</p>
</div>

Geçiş belgesine göre v5'te alert içindeki <hr> için ayrı stiller kaldırıldı, çünkü çizgi zaten currentColor kullanır ve alert'in metin rengini alır. v4'ten gelen diğer farklar geçiş rehberinde toplu olarak anlatılıyor.

İkonlu alert

Alert'e ikon eklemek için ayrı bir sınıf yoktur; belgeler bunu flex yardımcılarıyla kurar. Alert'e d-flex align-items-center verilir, ikona flex-shrink-0 me-2 eklenir, metin de ayrı bir <div> içine konur. flex-shrink-0 metin uzadığında ikonun büzülmesini engeller. Resmî örnekte ikon Bootstrap Icons setinden gelen bir SVG'dir; o set ayrı bir projedir ve Bootstrap CSS paketine dahil değildir.

<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Uyarı:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
  </svg>
  <div>Disk kotanızın yüzde 90'ı doldu.</div>
</div>

SVG'deki fill="currentColor" sayesinde ikon alert'in metin rengini alır, yani alert-warning içinde koyu sarı, alert-danger içinde koyu kırmızı görünür. role="img" ve aria-label="Uyarı:" ikonun anlamını ekran okuyucuya taşır; bu, rengin tek başına anlam taşımaması kuralını karşılamanın pratik bir yoludur. Aynı ikonları sayfada defalarca kullanacaksanız belgeler bir SVG sprite (sembol) dosyası hazırlayıp <use> ile çağırmayı önerir. Flex yardımcılarının tamamı Bootstrap flex yazısında.

Kapatılabilir alert: dört adım

Belgeler kapatılabilir bir alert için dört koşul sayar. Birincisi Alert eklentisinin ya da derlenmiş Bootstrap JavaScript dosyasının sayfada yüklü olmasıdır. İkincisi alert'e .alert-dismissible sınıfının ve içine bir kapatma butonunun eklenmesidir; bu sınıf sağ tarafa ek dolgu koyar ve butonu konumlandırır. Üçüncüsü butona data-bs-dismiss="alert" yazılmasıdır; belgeler tüm cihazlarda doğru davranış için burada <button> öğesini kullanmanızı ister. Dördüncüsü, kapanırken solarak kaybolması için .fade ve .show sınıflarının eklenmesidir.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Dikkat!</strong> Bazı alanları boş bıraktınız.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Kapat"></button>
</div>

Derlenmiş CSS'te .alert-dismissible sağ dolguyu 3rem yapar ($alert-padding-x * 3) ve içindeki .btn-close öğesini position: absolute, top: 0, right: 0, z-index: 2 ile sağ üst köşeye yerleştirir. Böylece uzun metin butonun altına girmez. .fade sınıfı opaklığa 0.15 saniyelik bir geçiş verir, .show kaldırıldığında öğe görünmez olur. Kullanıcı işletim sisteminde azaltılmış hareket tercih etmişse prefers-reduced-motion: reduce sorgusu bu geçişi kapatır. Kapatma butonunun kendisi Bootstrap buton sınıfları yazısında anlatılıyor.

Alert JavaScript eklentisi: yöntemler

Alert'ler sayfa yüklendiğinde veri özniteliği API'si sayesinde kendiliğinden çalışır; data-bs-dismiss="alert" taşıyan bir butona tıklanınca en yakın .alert kapanır. Programla kontrol etmek isterseniz belgelerdeki kurucuyu kullanırsınız. Kurulan örnek, alt öğelerindeki data-bs-dismiss="alert" butonlarının tıklamasını dinler; veri API'sinin otomatik başlatmasını kullanıyorsanız bu adım gerekmez.

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Bu son örnekte dikkat edilmesi gereken bir ayrıntı var: getInstance yalnızca daha önce oluşturulmuş bir örneği bulur. Alert'i daha önce new bootstrap.Alert() ile başlatmadıysanız dönen değer boş olabilir ve close() çağrısı hata verir. Bu durumda getOrCreateInstance daha güvenli bir seçimdir. Örnek oluşturma, getInstance ve olay sisteminin genel mantığı Bootstrap JavaScript API yazısında, dilin kendisi JavaScript öğrenme rehberinde anlatılıyor.

Olaylar: close.bs.alert ve closed.bs.alert

Eklenti iki olay yayar. close.bs.alert, close yöntemi çağrıldığı anda tetiklenir; closed.bs.alert ise alert kapanıp CSS geçişleri bittikten sonra gelir. Odak taşıma gibi işler için ikincisini kullanın, çünkü o anda öğe artık sayfada değildir.

var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  document.getElementById('form-baslik').focus()
})

v5.0.2 kaynak kodundaki close() yöntemi, close.bs.alert olayının varsayılan davranışı engellenmişse (defaultPrevented) alert'i kaldırmadan geri döner. Yani bu olayda event.preventDefault() çağırarak kapanmayı durdurabilirsiniz; örneğin kaydedilmemiş bir değişiklik varsa kullanıcıya önce sormak için. Bu ayrıntı belgelerin olay tablosunda yazmaz, alert.js kaynağından gelir.

Alert mi, toast mı, modal mı?

Bu üç bileşen sık karıştırılır. Alert sayfanın akışı içinde, bulunduğu yerde duran bir mesajdır ve kullanıcı kapatana ya da sayfa yenilenene kadar kalır; form gönderiminden sonra formun üstünde gösterilen sonuç mesajı için idealdir. Toast köşede beliren, genellikle kendiliğinden kaybolan kısa bir bildirimdir ve JavaScript ile başlatılmadan görünmez; ayrıntılar Bootstrap toast yazısında. Modal ise sayfanın geri kalanını engelleyen bir penceredir ve kullanıcıdan karar beklediğiniz durumlar içindir; bkz. Bootstrap modal. Kısaca: bilgi vermek için alert, geçici geri bildirim için toast, onay almak için modal.

Uygulamalı mini örnek: form sonuç mesajı

Sunucu tarafında doğrulama yapan bir iletişim formu düşünün. Gönderim başarılıysa yeşil, hatalıysa kırmızı bir alert gösterilecek ve kullanıcı mesajı kapatabilecek. Mesajın hemen altında bir başlık var; alert kapandığında odağı oraya taşıyacağız.

<h2 id="iletisim-baslik" tabindex="-1">İletişim formu</h2>
<div id="sonuc" class="alert alert-success alert-dismissible fade show" role="alert">
  <h4 class="alert-heading">Mesajınız alındı</h4>
  <p class="mb-0">En geç iki iş günü içinde e-posta ile dönüş yapılacaktır.</p>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Kapat"></button>
</div>

document.getElementById('sonuc').addEventListener('closed.bs.alert', function () {
  document.getElementById('iletisim-baslik').focus()
})

Başlığa tabindex="-1" verildiği için klavyeyle sekmeyle ulaşılamaz ama programla odaklanabilir. Hata durumunda aynı yapıyı alert-danger ile kullanın ve başlığı "Mesaj gönderilemedi" gibi durumu metinle anlatan bir ifade yapın. Alanlara bağlı hata mesajları ise alert'in değil form doğrulamasının işidir; bkz. Bootstrap form doğrulama.

Sass değişkenleri

Renk sınıflarının arkasında mixins/_alert.scss dosyasındaki alert-variant($background, $border, $color) mixin'i vardır. Bu mixin metin rengini atar, zemini gradient-bg() ile boyar (bu yüzden $enable-gradients açıksa alert zemini de degrade alır), kenarlık rengini belirler ve içindeki .alert-link için metin renginden koyulaştırılmış bir ton üretir. Sass ile derliyorsanız tema haritasına eklemeden de bu mixin'i kendi sınıfınızda çağırıp üç rengi elle verebilirsiniz. Varsayılan değerleri ezme sırası ve !default mantığı Sass ile özelleştirme yazısında.

Sık yapılan hatalar

• Renk sınıfını unutmak: Yalnızca .alert yazılan kutu renksiz ve kenarlıksız görünür.
• v4 özniteliğini kullanmak: data-dismiss="alert" v5'te çalışmaz; doğrusu data-bs-dismiss="alert".
• JavaScript dosyasını yüklememek: Yalnızca CSS ile kapatma butonu görünür ama tıklayınca bir şey olmaz.
• Kapatma butonunu a etiketiyle yapmak: Belgeler tutarlı davranış için <button> ister.
• Kapatılan alert'i yeniden göstermeye çalışmak: Kapatma öğeyi DOM'dan siler; tekrar göstermek için yeniden oluşturmanız gerekir.
• role="alert" özniteliğini atlamak: Mesaj görsel olarak görünür ama ekran okuyucuya duyurulmayabilir.
• Odak yönetimini unutmak: Klavye kullanıcısı kapattıktan sonra sayfanın başına düşebilir.

Sık Sorulan Sorular

Alert birkaç saniye sonra kendiliğinden kapanabilir mi?

Alert bileşeninde böyle bir seçenek yoktur. İsterseniz kendi kodunuzla bir süre sonra close() yöntemini çağırabilirsiniz; ama kendiliğinden kaybolan bildirimler için tasarlanmış bileşen toast'tur ve autohide seçeneği vardır.

Kapatma butonu neden alert'in sağ üstünde durmuyor?

Büyük olasılıkla alert'e .alert-dismissible sınıfı eklenmemiştir. Butonu köşeye yerleştiren ve metne yer açan kurallar bu sınıfa bağlıdır.

Alert'i kapatmadan önce kullanıcıya onay sorabilir miyim?

Evet. close.bs.alert olayını dinleyip event.preventDefault() çağırırsanız v5.0.2 kaynak koduna göre kapanma durur. Onay alındıktan sonra close() yöntemini yeniden çağırabilirsiniz.

v4'teki .close sınıfı alert içinde hâlâ çalışır mı?

Hayır. Geçiş belgesine göre .close sınıfının adı .btn-close oldu ve çarpı işareti artık HTML içindeki × karakteriyle değil, gömülü bir SVG arka planla çiziliyor. Eski işaretlemedeki butonun içini boşaltın, sınıfını btn-close yapın ve aria-label ekleyin.

Koyu temalı bir sayfada hangi alert'i kullanmalıyım?

Sekiz varyantın tamamı açık tonlu zemin üretir. Koyu bir arayüzde alert-dark gibi bir varyant seçebilir ya da Sass ile ölçek değişkenlerini değiştirip kendi tonlarınızı derleyebilirsiniz.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Toast bildirimleri · Modal pencere · JavaScript API · Erişilebilirlik · ARIA rol ve öznitelikleri · JavaScript öğrenme rehberi