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