बॅज घालतात

बॅजां खातीर दस्तावेजीकरण आनी उदाहरणां, आमची ल्हान गणना आनी लेबलिंग घटक.

ह्या पानाचेर

उदाहरणां

emसापेक्ष फॉन्ट आकार आनी एकक वापरून तात्काळ पालक घटकाच्या आकाराकडेन जुळोवपाक बॅज स्केल करतात . v5 सावन, बॅजांक आतां दुव्यां खातीर फोकस वा होवर शैली ना.

शीर्षकां

उदाहरण शीर्षकनवें

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

बटणां घालतात

काउंटर दिवपाक बॅज दुव्यांचो वा बटणांचो भाग म्हूण वापरूं येता.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

लक्षांत दवरात की ते कशे वापरतात ताचेर आदारून, बॅज स्क्रीन रीडर आनी तत्सम सहाय्यक तंत्रज्ञान वापरप्यां खातीर गोंदळाचे आसूं येतात. बॅजांची स्टायलिंग तांच्या उद्देशा विशीं दृश्य संकेत दिता आसतना, ह्या वापरप्यांक फकत बॅजाची आशय सादर करतले. विशिश्ट परिस्थितीचेर आदारून, हे बॅज वाक्य, दुवो वा बटणाच्या निमाणें यादीक अतिरिक्त शब्द वा क्रमांक दिसूं येतात.

संदर्भ स्पश्ट ना जाल्यार (“सूचना” उदाहरणा प्रमाण, जंय “4” ही अधिसुचोवण्यो संख्या अशें समजतात), अतिरिक्त संदर्भ दृश्टीन लिपयल्ल्या अतिरिक्त मजकूराच्या कुडक्या वांगडा समाविष्ट करपाचो विचार करचो.

पोजीशन दिल्लें

.badgea बदलपाक आनी दुवो वा बटणाच्या कोनशांत दवरपाक उपयुक्तताय वापरात .

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

.badgeतशेंच चड सामान्य निर्देशका खातीर मेजणी करिनासतना तुमी वर्ग बदलूंक शकतात आनीक कांय उपयुक्तताय.

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

पार्श्वभूंय रंग

बॅजाचें रूप बेगीन बदलपाक आमचे पार्श्वभूंय उपयुक्तताय वर्ग वापरात. उपकार करून लक्षांत दवरात की Bootstrap चें मुलभूत वापरतना .bg-light, तुमकां .text-darkयोग्य स्टायलिंगाखातीर सारकी मजकूर रंग उपयुक्तताय जाय पडटली. कारण पार्श्वभूंय उपयुक्तताय कांयच सेट करिनात पूण background-color.

प्राथमिक दुय्यम येस धोको शिटकावणी माहिती उजवाड काळोख

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

सहाय्यक तंत्रगिन्यानाक अर्थ दिवप

अर्थ जोडपाक रंग वापरप फकत एक दृश्य संकेत दिता, जो सहाय्यक तंत्रगिन्यानाच्या वापरप्यांक पावोवचो ना – जशें स्क्रीन रीडर. रंगान दाखयल्ली म्हायती एक तर सामुग्रींतल्यानच स्पश्ट आसा (देखीक दिसपी मजकूर), वा पर्यायी साधनां वरवीं आस्पाव केला हाची खात्री करात, जशे की .visually-hiddenवर्गा वांगडा लिपयल्लो अतिरिक्त मजकूर.

गोळ्यांचे बॅज

.rounded-pillबॅज चड वाटकुळे करपाक उपयुक्तताय वर्ग वापरात एक व्हड border-radius.

प्राथमिक दुय्यम येस धोको शिटकावणी माहिती उजवाड काळोख

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

सास

चड-उणें

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;