Önyükleme 4 Rozetleri
Örnek başlık Yeni
Örnek başlık Yeni
Örnek başlık Yeni
Örnek başlık Yeni
Örnek başlık Yeni
Örnek başlık Yeni
Rozetler, herhangi bir içeriğe ek bilgi eklemek için kullanılır.
Dikdörtgen rozetler oluşturmak için sınıfı öğeler içinde .badgebağlamsal bir sınıfla (gibi .badge-secondary) birlikte kullanın . <span>Rozetlerin ana öğenin boyutuna (varsa) uyacak şekilde ölçeklendiğini unutmayın:
Örnek
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
Bağlamsal Rozetler
Öncelik
İkincil
Başarı
Tehlike
Uyarı
Bilgi
Işık
Karanlık
.badge-*Bir rozetin rengini değiştirmek için bağlamsal sınıflardan ( ) herhangi birini kullanın :
Örnek
<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>
hap rozetleri
Öncelik
İkincil
Başarı
Tehlike
Uyarı
Bilgi
Işık
Karanlık
.badge-pillRozetleri daha yuvarlak hale getirmek için sınıfı kullanın :
Örnek
<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>
Bir Elementin İçinde Rozet
Düğme içinde rozet kullanımına bir örnek:
Örnek
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>