बैज

बैज्स् कृते दस्तावेजीकरणं उदाहरणानि च, अस्माकं लघुगणना तथा लेबलिंग घटकम्।

इस पृष्ठ पर

उदाहरणानि

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” सूचनानां संख्या इति अवगम्यते), तावत् अतिरिक्तं सन्दर्भं दृग्गतरूपेण निगूढेन अतिरिक्तपाठस्य खण्डेन सह समावेशयितुं विचारयन्तु

स्थितः

.badgea परिवर्त्य लिङ्कस्य अथवा बटनस्य कोणे स्थापयितुं उपयोगितानां उपयोगं कुर्वन्तु ।

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 इत्यस्मिन् योजितम्

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;