बैज

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

उदाहरण

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>