बिल्ला

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

इस पेज पर

उदाहरण दे

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 text-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>

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

v5.2.0 च जोड़ेआ गेआ

साढ़े मददगारेंbackground-color कन्नै विपरीत अग्रभूमि colorकन्नै इक सेट करो . पैह् ले इसगी स्टाइलिंग आस्तै अपनी पसंद ते उपयोगिताएं गी मैन्युअल रूप कन्नै जोड़ने दी लोड़ ही , जिसदा तुस अजें बी इस्तेमाल करी सकदे ओ जेकर तुस पसंद करो।.text-bg-{color}.text-{color}.bg-{color}

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

एचटीएमएल ऐ

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

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

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

गोली बिल्ला

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

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

एचटीएमएल ऐ

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

सीएसएस दा

चर करने वाले

v5.2.0 च जोड़ेआ गेआ

बूटस्ट्रैप दे विकसित CSS चर दृष्टिकोण दे हिस्से दे रूप च, बैज हून .badgeबधाए गेदे रियल-टाइम अनुकूलन आस्तै लोकल CSS चर दा उपयोग करदे न। CSS चर आस्तै मूल्यें गी Sass दे राहें सेट कीता जंदा ऐ, इसलेई Sass अनुकूलन अजें बी समर्थत ऐ, बी.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

सस्स चर

$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;