Bootstrap Bileşenler Badge
Bootstrap’ta Badge (rozet) bileşeni, belirli bir içeriği vurgulamak veya ek bilgi sağlamak amacıyla kullanılan küçük, renkli etiketlerdir. Genellikle bildirim sayıları, durumları veya kategorileri belirtmek için kullanılır. Badge’ler, içerik üzerinde belirli bir anlam taşır ve kullanıcıların dikkatini çekmek için etkili bir görsel araçtır.
1. Temel Yapı
Bootstrap badge bileşeni, temel olarak aşağıdaki yapıya sahiptir:
<span class="badge badge-{type}"> {content} </span> Burada {type} kısmı, rozetin stilini belirtir (örn. primary, secondary, success, danger, warning, info, light, dark) ve {content} kısmı, göstermek istediğiniz metni içerir.
2. Badge Türleri
Bootstrap, aşağıdaki temel badge türlerini destekler:
-
badge-primary: Ana renk (mavi). -
badge-secondary: İkincil renk (gri). -
badge-success: Başarı durumu (yeşil). -
badge-danger: Hata durumu (kırmızı). -
badge-warning: Uyarı durumu (sarı). -
badge-info: Bilgi durumu (mavi). -
badge-light: Açık renk. -
badge-dark: Koyu renk.
3. Temel Örnek
Aşağıda basit bir Bootstrap badge örneği 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 Badge Ö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 Badge Örnekleri</h2> <h1> Örnek Başlık <span class="badge badge-primary">Yeni</span> </h1> <p> Bu metin, <span class="badge badge-success">başarılı</span> bir durumu belirtmek için bir rozet içeriyor. </p> <p> Hata durumu: <span class="badge badge-danger">Hata!</span> </p> <p> Uyarı durumu: <span class="badge badge-warning">Dikkat!</span> </p> </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. Badge İçerikleri
Badge’ler, metin, sayılar veya simgeler gibi çeşitli içerikler içerebilir. Özellikle bildirim sayıları için kullanıldığında, sayıları vurgulamak için oldukça etkilidir. Örneğin:
<span class="badge badge-danger">5</span> Bildirim 5. Badge ve Diğer Bileşenler
Badge bileşenleri, butonlar, listeler ve navigasyon gibi diğer Bootstrap bileşenleriyle birlikte kullanılabilir. Örneğin:
<a href="#" class="btn btn-primary"> Mesajlar <span class="badge badge-light">4</span> </a> 6. Örnek: Badge Kullanımı
Aşağıda, badge bileşeninin buton ile kullanıldığı bir örnek verilmiştir:
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Badge Buton Ö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>Bildirim Butonu</h2> <a href="#" class="btn btn-primary"> Bildirimler <span class="badge badge-light">3</span> </a> </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> 7. Özet
Bootstrap badge bileşeni, içeriği vurgulamak veya belirli bilgileri belirtmek için etkili bir görsel araçtır. Farklı stiller ve boyutlar ile özelleştirilebilir ve diğer bileşenlerle birlikte kullanılabilir. Daha fazla bilgi ve detaylar için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.
Bu ders size yardımcı oldu mu? Puan verin!
Geri bildiriminiz içeriğimizi sürekli güncel ve kaliteli tutmamızı sağlar.
Sıkça Sorulan Sorular (SSS)
Bu ders ve konuyla ilgili en çok merak edilenler
Bootstrap Bileşenler Badge dersini öğrenmek için ön koşul var mı?
Bu eğitim temel seviyeden ileri seviyeye adım adım hazırlanmıştır. Kodları kopyalayıp Canlı Editör üzerinde test ederek kolayca pratik yapabilirsiniz.
Örnek kodları kendi projelerimde ücretsiz kullanabilir miyim?
Evet, PHP Hocası üzerindeki tüm kod örnekleri açık kaynak mantığıyla sunulmaktadır. Ticari veya kişisel projelerinizde serbestçe kullanabilirsiniz.
Takıldığım bir yerde nereden soru sorabilirim?
Dersin altındaki topluluk yorumları bölümünden sorunuzu sorabilirsiniz. Eğitmenlerimiz ve topluluk üyelerimiz kısa sürede yanıt verecektir.
Topluluk Yorumları (0)
Ders Hakkında Yorum Yap veya Soru Sor
Henüz yorum yapılmamış. İlk yorumu siz yazın!