बैज के बा

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

एह पन्ना पर दिहल गइल बा

उदाहरण खातिर दिहल गइल बा

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 में जोड़ल गइल बा

बूटस्ट्रैप के बिकसित होखे वाला सीएसएस चर दृष्टिकोण के हिस्सा के रूप में, बैज सभ अब .badgeबढ़ल रियल-टाइम कस्टमाइजेशन खातिर लोकल सीएसएस चर सभ के ऑन के इस्तेमाल करे लें। 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;