Bootstrap’ta Alert (uyarı) bileşeni, kullanıcıya bilgi vermek veya belirli bir durumu belirtmek için kullanılan görsel bir bileşendir. Alert bileşeni, başarı, hata, uyarı ve bilgi mesajları gibi çeşitli durumları belirtmek için farklı renklerde ve stillerde sunulabilir. Aşağıda Bootstrap alert bileşeni hakkında detaylı bilgi ve örnekler bulunmaktadır.
1. Temel Yapı
Bootstrap Alert bileşeni, temel olarak aşağıdaki yapıya sahiptir:
<div class="alert alert-{type}" role="alert">
{message}
</div>
Burada {type} kısmı, mesajın türünü belirtir (örn. success, danger, warning, info vb.) ve {message} kısmı, kullanıcıya iletmek istediğiniz mesajı içerir.
2. Alert Türleri
Bootstrap, aşağıdaki temel alert türlerini destekler:
-
alert-success: Başarı mesajları için (yeşil arka plan). -
alert-danger: Hata mesajları için (kırmızı arka plan). -
alert-warning: Uyarı mesajları için (sarı arka plan). -
alert-info: Bilgi mesajları için (mavi arka plan). -
alert-light: Açık renkli arka plan. -
alert-dark: Koyu renkli arka plan.
3. Temel Örnek
Aşağıda Bootstrap ile basit alert örnekleri bulunmaktadır:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Alert Örneği</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h2>Bootstrap Alert Örnekleri</h2>
<div class="alert alert-success" role="alert">
Başarı! İşleminiz başarılı bir şekilde gerçekleştirildi.
</div>
<div class="alert alert-danger" role="alert">
Hata! Bir hata oluştu, lütfen tekrar deneyin.
</div>
<div class="alert alert-warning" role="alert">
Uyarı! Dikkatli olun, bazı bilgiler eksik.
</div>
<div class="alert alert-info" role="alert">
Bilgi! Yeni güncellemeler mevcut.
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/js/bootstrap.min.js">
</script>
</body>
</html>
4. Alert Kapatma Özelliği
Bootstrap, alert bileşenine kapatma işlevi eklemek için bir buton sağlar. Aşağıdaki örnekte, kullanıcıların alert'i kapatabilmesi için gerekli kod gösterilmektedir:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
Uyarı! Dikkatli olun, bazı bilgiler eksik.
<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
-
alert-dismissible: Kapatma özelliğini etkinleştirir. -
fade: Animasyon efekti için. -
show: Alert'in başlangıçta görünür olmasını sağlar. -
data-bs-dismiss="alert": Butona tıklandığında alert'i kapatır.
5. Örnek: Kapatılabilir Alert
Kapatılabilir alert içeren tam bir örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Alert Kapatma Örneği</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h2>Bootstrap Alert Kapatma Örneği</h2>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
Hata! Bir hata oluştu, lütfen tekrar deneyin.
<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/js/bootstrap.min.js">
</script>
</body>
</html>
6. Özet
Bootstrap Alert bileşeni, kullanıcıya önemli bilgileri iletmek için etkili bir yoldur. Farklı stiller ve kapatma seçenekleri ile özelleştirilebilir. Kullanıcı deneyimini artırmak için mesajları dikkat çekici ve anlaşılır bir şekilde sunar. Daha fazla bilgi ve detaylar için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.