बैज

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

इस पेज पर

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

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;