बैज

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

इस पेज पर

उदाहरण के लिये

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;