बिल्ला

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

इस पेज पर

उदाहरण दे

emबैज रिश्तेदार फॉन्ट आकार ते इकाइयें दा उपयोग करियै तत्काल माता-पिता तत्व दे आकार कन्नै मेल खंदा ऐ स्केल करदे न। v5 दे तौर पर, बैजें च लिंकें लेई फोकस जां होवर शैली नेईं रेही गेई ऐ।

हेडिंग्स

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

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

बटन दे

काउंटर उपलब्ध करोआने लेई बैजें दा इस्तेमाल लिंक जां बटन दे हिस्से दे रूप च कीता जाई सकदा ऐ।

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

ध्यान रक्खो जे इसदा इस्तेमाल कि’यां कीता जंदा ऐ इसदे आधार उप्पर, बैज स्क्रीन रीडर ते इसी जनेही सहायक तकनीकें दे बरतूनी आस्तै भ्रम पैदा करी सकदे न। जदके बिल्लां दी स्टाइलिंग उंदे मकसद दे बारे च इक दृश्य संकेत दिंदा ऐ, तां इनें बरतूनी गी बस बिल्ला दी सामग्री कन्नै पेश कीता जाग। विशिष्ट स्थिति दे आधार उप्पर, एह् बिल्ला कुसै वाक्य, लिंक जां बटन दे अंत च बेतरतीब ढंगै कन्नै अतिरिक्त शब्द जां नंबर लग सकदे न।

जदूं तकर संदर्भ साफ नेईं ऐ (जिऱयां "सूचनाएं" उदाहरन कन्नै, जित्थै एह् समझेआ जंदा ऐ जे "4" सूचनाएं दी संख्या ऐ), तां तकर अतिरिक्त पाठ दे इक नेत्रहीन छिपे दे टुकड़े कन्नै अतिरिक्त संदर्भ गी शामल करने पर विचार करो।

पोजीशन दी

.badgeइक गी संशोधित करने ते इसगी इक लिंक जां बटन दे कोने च रक्खने लेई उपयोगिताएं दा उपयोग करो।

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

तुस .badgeइक होर जेनेरिक संकेतक आस्तै बिना गिनती दे किश होर उपयोगिताएं कन्नै बी वर्ग गी बदली सकदे ओ।

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

पृष्ठभूमि रंग

बिल्ला दी रूप गी जल्दी बदलने लेई साढ़ी बैकग्राउंड यूटिलिटी क्लासें दा इस्तेमाल करो। कृपा करियै ध्यान देओ जे बूटस्ट्रैप दा डिफाल्ट दा इस्तेमाल करदे बेल्लै .bg-light, तुसेंगी संभावना ऐ जे .text-darkउचित स्टाइलिंग आस्तै इक पाठ रंग उपयोगिता दी लोड़ होग. इसदा कारण ऐ जे बैकग्राउंड यूटिलिटीज कुसै बी चीज़ गी सेट नेईं करदी ऐ पर background-color.

मुंढला माध्यमिक दा कामयाबी खतरा चेतावनी इन्फो लो न्हेरा

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

सहायक प्रौद्योगिकियें गी अर्थ संप्रेषित करना

अर्थ जोड़ने आस्तै रंग दा उपयोग करना सिर्फ इक दृश्य संकेत दिंदा ऐ, जेह् ड़ा सहायक तकनीकें दे बरतूनकर्ताएं गी नेईं पजाया जाग – जि’यां स्क्रीन रीडर। एह् सुनिश्चत करो जे रंग कन्नै दर्शाए गेदे जानकारी गी या तां सामग्री थमां गै स्पष्ट ऐ (जियां दिक्खने आह् ला पाठ), जां वैकल्पिक साधनें राहें शामल कीता जा, जि’यां .visually-hiddenवर्ग कन्नै छिपे दा अतिरिक्त पाठ।

गोली बिल्ला

.rounded-pillबिल्लाएं गी इक बड्डे कन्नै होर गोल बनाने लेई उपयोगिता वर्ग दा उपयोग करो border-radius.

मुंढला माध्यमिक दा कामयाबी खतरा चेतावनी इन्फो लो न्हेरा

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

सस्स

चर करने वाले

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;