बॅज

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

या पृष्ठावर

उदाहरणे

emसंबंधित फॉन्ट आकार आणि युनिट्स वापरून तात्काळ मूळ घटकाच्या आकाराशी जुळण्यासाठी बॅज स्केल . v5 नुसार, बॅजमध्ये यापुढे लिंक्ससाठी फोकस किंवा होव्हर शैली नाहीत.

मथळे

उदाहरण शीर्षकनवीन

html

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

बटणे

काउंटर प्रदान करण्यासाठी लिंक्स किंवा बटणांचा भाग म्हणून बॅज वापरले जाऊ शकतात.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

लक्षात घ्या की ते कसे वापरले जातात यावर अवलंबून, बॅज स्क्रीन रीडर आणि तत्सम सहायक तंत्रज्ञान वापरकर्त्यांसाठी गोंधळात टाकणारे असू शकतात. बॅजची शैली त्यांच्या उद्देशासाठी एक दृश्य संकेत प्रदान करते, या वापरकर्त्यांना फक्त बॅजची सामग्री सादर केली जाईल. विशिष्ट परिस्थितीनुसार, हे बॅज वाक्य, लिंक किंवा बटणाच्या शेवटी यादृच्छिक अतिरिक्त शब्द किंवा संख्यांसारखे वाटू शकतात.

जोपर्यंत संदर्भ स्पष्ट होत नाही तोपर्यंत (“सूचना” उदाहरणाप्रमाणे, जिथे “4” ही सूचनांची संख्या असल्याचे समजते), अतिरिक्त मजकुराच्या दृश्यात लपवलेल्या भागासह अतिरिक्त संदर्भ समाविष्ट करण्याचा विचार करा.

स्थानबद्ध

ए सुधारित करण्यासाठी उपयुक्तता वापरा .badgeआणि त्यास लिंक किंवा बटणाच्या कोपर्यात ठेवा.

html

<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तुम्ही अधिक जेनेरिक इंडिकेटरची गणना न करता काही अधिक युटिलिटीजसह वर्ग बदलू शकता .

html

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

प्राथमिक दुय्यम यश धोका चेतावणी माहिती प्रकाश गडद

html

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

प्राथमिक दुय्यम यश धोका चेतावणी माहिती प्रकाश गडद

html

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

CSS

चल

v5.2.0 मध्ये जोडले

बूटस्ट्रॅपच्या विकसित होत असलेल्या 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};

Sass चल

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