Bootstrap badge ile herhangi bir içeriğe ek bilgiler ekleyebiliriz veya içeriğin daha dikkat çekici olması için arkaplan rengi verebiliriz. Örneğin Facebook üzerinden örnek vereyim. Facebook’ta mesaj veya bildirim geldiğinde bunları gösteren link butonların üzerinde ek bilgi olarak mesaj veya bildirim sayısı gösterilir. Sizde böylece okunmamış durumda olan mesaj sayınızı kolaylıkla görebiliyorsunuz.
Başka kullanım alanları nelerdir diye sorarsanız kendi web sitem üzerinden örnek vermek istiyorum. Şuan da bulunduğunuz sitede Anasayfa’da tüm yazılarım listeleniyor. Herbir yazının kategori bilgisinin arkaplan rengine sitenin ana rengini vererek kategori bilgisinin dikkat çekmesi amaçlanıyor. İşte bunlara da badge diyoruz. Yani bir bilginin daha fazla dikkat çekmesi için arkaplan rengini değiştiriyoruz.
⇒ Bootstrap badge oluşturmak için yapmamız gerekenler:
- <span> etiketi içerisine yazmak istediğimiz metni yazıyoruz.
- <span> etiketinin class’ına badge yazıyoruz.
- Son olarak metnin arkaplan renginin ne olmasını istiyorsak ona uygun renk class’ını yazıyoruz.
Bootstrap badge renk class’ları şunlardır:
- badge-success
- badge-info
- badge-warning
- badge-danger
- badge-primary
- badge-secondary
- badge-light
- badge-dark
⇒ Şimdi tüm bootstrap badge örneklerini uygulamalı olarak görelim. Kodlarımız şu şekilde;
|
1 2 3 4 5 6 7 8 9 10 |
<span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-success">Success</span> <span class="badge badge-danger">Danger</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-info">Info</span> <span class="badge badge-light">Light</span> <span class="badge badge-dark">Dark</span> |
Görünümü;
Dikkat ederseniz vermiş olduğumuz ikinci class’a göre rengi değişiyor. Sizde hangisini kullanmak istiyorsanız ona uygun class’ı seçmelisiniz.
⇒ badge-pill class’ını da ekleyerek köşeleri yuvarlatılmış hale getirebiliriz.
Bunları da örnek üzerinde görelim. Kodlarımız şu şekilde;
|
1 2 3 4 5 6 7 8 9 10 |
<span class="badge badge-pill badge-primary">Primary</span> <span class="badge badge-pill badge-secondary">Secondary</span> <span class="badge badge-pill badge-success">Success</span> <span class="badge badge-pill badge-danger">Danger</span> <span class="badge badge-pill badge-warning">Warning</span> <span class="badge badge-pill badge-info">Info</span> <span class="badge badge-pill badge-light">Light</span> <span class="badge badge-pill badge-dark">Dark</span> |
Görünümü;
⇒ Şimdi de yazımızın başında bahsettiğimiz gibi onaylanmayı bekleyen yorum sayısını gösteren bir buton oluşturalım. Bu örneğimizde Bootstrap button ve badge konularını iç içe kullanmış olacağız.
Örneğin 32 tane onaylanmayı bekleyen yorum olduğunu düşünelim. Kodlarımız şu şekilde;
|
1 2 3 4 5 |
<button type="button" class="btn btn-info"> Yorumlar <span class="badge badge-light">32</span> </button> |
Görünümü;
Umarım sizin için faydalı bir yazı olmuştur.
Farklı bir yazımda görüşmek üzere.
){kind=link}