बैज

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

इस पृष्ठ पर

उदाहरण

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किसी लिंक या बटन के कोने में a को संशोधित करने और स्थिति में लाने के लिए उपयोगिताओं का उपयोग करें।

एचटीएमएल

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