बॅज घालतात

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

ह्या पानाचेर

उदाहरणां

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” ही अधिसुचोवण्यो संख्या अशें समजतात), अतिरिक्त संदर्भ दृश्टीन लिपयल्ल्या अतिरिक्त मजकूराच्या कुडक्या वांगडा समाविष्ट करपाचो विचार करचो.

पोजीशन दिल्लें

.badgea बदलपाक आनी दुवो वा बटणाच्या कोनशांत दवरपाक उपयुक्तताय वापरात .

एचटीएमएल हें नांव

<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 त जोडलां

Bootstrap च्या विकसीत जावपी 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;