Bootstrap Alerts, kullanıcılarınıza bilgi, uyarı veya hata mesajları göstermek için kullanılan şık ve kullanışlı bileşenlerdir. Renkli ve farklı tasarımlar sunan bu uyarılar, mesajınızı görsel olarak ön plana çıkarır.
Temel Kullanım
Bootstrap Alerts, .alert sınıfı kullanılarak oluşturulur. Farklı türde mesajlar için belirli sınıflar eklenir:
.alert-primary– Bilgi mesajları için..alert-secondary– Nötr mesajlar için..alert-success– Başarı mesajları için..alert-danger– Hata mesajları için..alert-warning– Uyarı mesajları için..alert-info– Bilgilendirme mesajları için..alert-light– Hafif mesajlar için..alert-dark– Koyu tema mesajlar için.
Temel Örnek:
<div class="alert alert-success" role="alert">
Bu bir başarı mesajıdır!
</div>
Bootstrap Alerts Türleri
| Sınıf | Kullanım Amacı |
|---|---|
.alert-primary | Bilgilendirme mesajı. |
.alert-secondary | İkincil mesajlar veya nötr içerikler. |
.alert-success | Başarı mesajları. |
.alert-danger | Hata veya olumsuz durumları göstermek için. |
.alert-warning | Kullanıcıyı uyarmak için kullanılan sarı tonlu mesajlar. |
.alert-info | Kullanıcıya bilgi vermek için. |
.alert-light | Hafif tasarıma sahip mesajlar. |
.alert-dark | Koyu arka planlı mesajlar için. |
Kapatılabilir (Dismissible) Alerts
Kapatılabilir uyarılar, kullanıcıların mesajları kapatmasına olanak tanır. Bunun için .alert-dismissible sınıfı ve kapatma butonu kullanılır.
Örnek:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Dikkat!</strong> Bu bir uyarı mesajıdır.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Not: Kapatılabilir uyarıların düzgün çalışması için Bootstrap JavaScript dosyalarını projeye eklediğinizden emin olun.
Daha Fazla Özelleştirme
Bağlantılar Eklemek
Uyarı içerisine bağlantılar eklemek için alert-link sınıfı kullanılır.
<div class="alert alert-info" role="alert">
Daha fazla bilgi almak için <a href="#" class="alert-link">bu bağlantıya</a> tıklayın.
</div>
İçerik Formatlama
Uyarılara başlık, paragraf veya başka HTML elemanları eklenebilir:
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Başarı!</h4>
<p>Bu, başarıyla tamamlanan bir işlem hakkında kısa bir mesajdır.</p>
<hr>
<p class="mb-0">Gerektiğinde başka bilgi de eklenebilir.</p>
</div>
Responsive (Duyarlı) Tasarım
Bootstrap Alerts, ekran boyutuna uyum sağlayacak şekilde tasarlanmıştır. İçeriğiniz, cihazın genişliğine göre otomatik olarak ayarlanır.
Bootstrap Alerts ile İlgili Örnekler
Birden Fazla Uyarı
<div class="alert alert-primary" role="alert">
Bu bir bilgi mesajıdır.
</div>
<div class="alert alert-danger" role="alert">
Bu bir hata mesajıdır!
</div>
<div class="alert alert-success" role="alert">
Tebrikler! İşleminiz başarılı.
</div>
Kapatılabilir Uyarılar
<div class="alert alert-light alert-dismissible fade show" role="alert">
Bu bir kapatılabilir uyarıdır.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>