Source

बैज के बा

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

उदाहरण

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>