BOOTSTRAP 4 – BADGE (ROZETLER)

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;

Görünümü;

bootstrap-kullanimi

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;

Görünümü;

bootstrap-badge-kullanimi

 ⇒  Ş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;

Görünümü;

bootstrap-rozet-kullanimi

Umarım sizin için faydalı bir yazı olmuştur.  

Farklı bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link