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

विपरीतरूपेण अग्रभूमिवर्णेन सह पृष्ठभूमिवर्णं सेट् कुर्वन्तु ।

इस पृष्ठ पर

अवलोकनम्

v5.2.0 इत्यस्मिन् योजितम्

वर्णपृष्ठसहायकाः अस्माकं .text-*उपयोगितानां उपयोगितानां .bg-*च शक्तिं एकस्मिन् वर्गे संयोजयन्ति। अस्माकं Sass function इत्यस्य उपयोगेन वयं स्वयमेव कस्यचित् विशेषस्य कृते color-contrast()contrasting निर्धारयामः ।colorbackground-color

शिरः उपरि ! सम्प्रति CSS-देशीय-कार्यस्य समर्थनं नास्ति color-contrast, अतः वयं Sass मार्गेण स्वस्य उपयोगं कुर्मः । अस्य अर्थः अस्ति यत् CSS चरद्वारा अस्माकं विषयवर्णानां अनुकूलनं एतेषां उपयोगितानां सह वर्णविपरीततायाः समस्यां जनयितुं शक्नोति ।

विपरीतवर्णयुक्तं प्राथमिकम्

विपरीतवर्णयुक्तं गौणम्

विपरीतवर्णेन सह सफलता

विपरीतवर्णयुक्तं संकटम्

विपरीतवर्णेन सह चेतावनी

विपरीत रंग के साथ जानकारी

विपरीतवर्णयुक्तं प्रकाशम्

विपरीतवर्णयुक्तं कृष्णम्

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

अवयवैः सह

.text-*संयुक्तस्य वर्गस्य च स्थाने तान् उपयुज्यताम् .bg-*, यथा बिल्लासु :

प्राथमिक इन्फो

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

पत्तकेषु वा : .

शीर्षकम्

कार्डस्य शीर्षकस्य उपरि निर्माणं कर्तुं कार्डस्य सामग्रीयाः बृहत् भागं निर्मातुं च केचन द्रुतम् उदाहरणपाठः।

शीर्षकम्

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>