Source

वर्णाः

मुष्टिभ्यां वर्णोपयोगितावर्गैः सह वर्णद्वारा अर्थं प्रसारयन्तु। होवर स्टेट्स् इत्यनेन सह स्टाइलिंग् लिङ्क्स् इत्यस्य समर्थनम् अपि अन्तर्भवति ।

वर्णं

.पाठ-प्राथमिक

.पाठ-माध्यमिकम्

.पाठ-सफलता

.पाठ-संकटः

.पाठ-चेतावनी

.पाठ-सूचना

.पाठ-प्रकाशः

.पाठ-अन्धकारः

.पाठ-शरीरम्

.पाठ-निःशब्दः

.पाठ-शुक्लः

.पाठ-कृष्ण-५०

.पाठ-शुक्ल-५०

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

सन्दर्भपाठवर्गाः अपि प्रदत्त-होवर-फोकस-स्थितिभिः सह एंकर-उपरि उत्तमं कार्यं कुर्वन्ति । ध्यानं कुर्वन्तु यत् .text-whiteand .text-mutedवर्गस्य रेखाचित्रात् परं अतिरिक्तं लिङ्क् स्टाइलिंग् नास्ति ।

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

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

सन्दर्भपाठवर्णवर्गाणां सदृशं, कस्यचित् तत्त्वस्य पृष्ठभूमिं कस्यापि सन्दर्भवर्गस्य कृते सहजतया सेट् कुर्वन्तु । Anchor घटकाः hover इत्यत्र अन्धकारं करिष्यन्ति, यथा text classes । Background utilities do not setcolor , अतः केषुचित् सन्दर्भेषु भवान् .text-*utilities इत्यस्य उपयोगं कर्तुम् इच्छति ।

.बग-प्राथमिक
.बग-द्वितीयक
.बग-सफलता
.बग-संकटः
.बग-चेतावनी
.बग-सूचना
.बग-प्रकाशः
.बग-अन्धकारः
.बग-शुक्लः
.बग-पारदर्शी
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

पृष्ठभूमि ढाल

यदा (default is ) $enable-gradientsइति सेट् भवति तदा भवान् उपयोगितावर्गाणां उपयोगं कर्तुं शक्नोति । एतानि वर्गाणि सक्षमीकरणाय अस्माकं Sass विकल्पानां विषये ज्ञातुं शक्नुवन्ति तथा च अधिकम्।truefalse.bg-gradient-

  • .bg-gradient-primary
  • .bg-gradient-secondary
  • .bg-gradient-success
  • .bg-gradient-danger
  • .bg-gradient-warning
  • .bg-gradient-info
  • .bg-gradient-light
  • .bg-gradient-dark

विशिष्टतायाः विषये व्यवहारः

कदाचित् अन्यस्य चयनकस्य विशिष्टतायाः कारणात् सन्दर्भवर्गाः प्रयोक्तुं न शक्यन्ते । केषुचित् सन्दर्भेषु, पर्याप्तं कार्यपरिहारं भवतः एलिमेण्ट् इत्यस्य सामग्रीं <div>वर्गेण सह a इत्यस्मिन् वेष्टयितुं भवति ।

सहायक प्रौद्योगिकियों को अर्थ संप्रेषित करना

अर्थं योजयितुं वर्णस्य उपयोगः केवलं दृश्यसूचकं प्रदाति, यत् सहायकप्रौद्योगिकीनां उपयोक्तृभ्यः – यथा स्क्रीनरीडर्-इत्यादिभ्यः – न प्रसारितं भविष्यति । वर्णेन सूचिता सूचना सामग्रीतः एव स्पष्टा भवति (उदा. दृश्यमानपाठः), अथवा वैकल्पिकसाधनेन समाविष्टा भवति, यथा .sr-onlyवर्गेण सह निगूढः अतिरिक्तपाठः इति सुनिश्चितं कुर्वन्तु