बैज के बा

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

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

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

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;