Bootstrap 4 Rozetler(Badges)

Bootstrap 4 Bildirimler (Badges)

Bootstrap4'te yazıların yanında küçük oluşturulan küçük bildirimlere badge adı verilir. Badge Türkçe rozet anlamına gelmektedir ancak genelde bildirim oluşturmak için kullanılır.
Bootstrap4'te rozet oluşturmak için genel olarak span etiketi(inline olması sebebiyle) kullanılır.
span nesnesine badge özelliği eklemek için badge badge-* class değeri kullanılır.
Not: * simgesinin yerine renk ismi gelecektir. Örnek : <h5>Bildirimler var! <span class="badge badge-primary">2</span> </h5>

Buton içine badge

Butonlar bir yazıya eklenebileceği gibi buton veya linki gibi tıklanabilir nesnelere de eklenebilirler
Örnek: <button class="btn btn-danger"> Yeni Bildirimler Var! <span class="badge badge-light">6</span> </button>

Yuvarlak Görünümülü Badge(badge-pill)

Yuvarlak görünümlü (pill) badge nesneleri oluşturmak için diğer sınıf özelliklerine ek olarak badge-pill özelliği de nesneye eklenir. <span class="badge badge-pill badge-primary">primary</span>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

İletişim

  • info@frontendokulu.com