बॅज घालतात

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

उदारण

emसापेक्ष फॉन्ट आकार आनी एकक वापरून तात्काळ पालक घटकाच्या आकाराकडेन जुळोवपाक बॅज स्केल करतात .

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

<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>

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

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

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

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

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

संदर्भांतले बदल

बॅजाचें रूप बदलपाखातीर सकयल दिल्ल्या खंयचेय संशोधक वर्ग जोडात.

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

<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>

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

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

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

बॅज चड वाटकुळे करपाक संशोधक वर्ग वापरात .badge-pill(व्हड border-radiusआनी अतिरिक्त आडव्या सयत padding). v3 कडल्यान बॅज चुकयल्यार उपेगी.

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

<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>

दुवे आसात

एका घटकाचेर संदर्भ .badge-*वर्ग वापरप रोखडेंच होवर आनी फोकस स्थिती आशिल्ले कृती करपाक योग्य बॅज दितात.<a>

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

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