बैज के बा
बैज खातिर दस्तावेजीकरण आ उदाहरण, हमनी के छोट गिनती आ लेबलिंग घटक।
उदाहरण
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>