बैज

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

इस पृष्ठ पर

उदाहरणानि

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

स्थितः

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

पृष्ठभूमि रंग

बिल्लायाः स्वरूपं शीघ्रं परिवर्तयितुं अस्माकं पृष्ठभूमि-उपयोगितावर्गाणां उपयोगं कुर्वन्तु । कृपया ज्ञातव्यं यत् Bootstrap इत्यस्य पूर्वनिर्धारितस्य उपयोगं कुर्वन् .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;