रंग
color
रंग उपयोगिता वर्गों के मुट्ठी भर के साथ के माध्यम से अर्थ संप्रेषित | होवर स्टेट्स के साथ स्टाइलिंग लिंक के लेल समर्थन सेहो शामिल अछि.
रंग
रंग उपयोगिताओं के साथ पाठ को रंगें | अगर अहां लिंक के रंगीन करय चाहय छी त अहां .link-*
हेल्पर क्लास के इस्तेमाल क सकय छी जे अछि :hover
आओर :focus
स्टेट्स.
.पाठ-प्राथमिक
.पाठ-माध्यमिक
.पाठ-सफलता
.पाठ-खतरा
.पाठ-चेतावनी
.पाठ-जानकारी
.पाठ-प्रकाश
.पाठ-अन्हार
.पाठ-शरीर
.पाठ-निःशब्द
.पाठ-सफेद
.पाठ-काला-50
.पाठ-सफेद-50
<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 bg-dark">.text-warning</p>
<p class="text-info bg-dark">.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-opacity-*
पाठ उपयोगिताक कें लेल उपयोगिताक आ CSS चर कें
जोड़य कें साथ
, .text-black-50
आ
.text-white-50
v5.1.0 कें रूप मे अप्रत्याशित करल गेलय छै. v6.0.0 मे हटा देल जाएत.
सहायक प्रौद्योगिकी के अर्थ संप्रेषित करब
अर्थ जोड़य कें लेल रंग कें उपयोग करनाय केवल एकटा दृश्य संकेत प्रदान करय छै, जे सहायक प्रौद्योगिकी कें उपयोगकर्ताक कें – जेना स्क्रीन रीडर – कें संप्रेषित नहि कैल जेतय. सुनिश्चित करूं कि रंग सं संकेत कैल गेल जानकारी या त सामग्री सं ही स्पष्ट छै (जैना दृश्यमान पाठ), या वैकल्पिक साधन कें माध्यम सं शामिल कैल गेल छै, जेना कि .visually-hidden
वर्ग कें साथ छिपल अतिरिक्त पाठ.
अस्पष्टता
v5.1.0 मे जोड़ा गेल
v5.1.0 कें रूप मे, पाठ रंग उपयोगिताक कें CSS चर कें उपयोग करयत Sass कें साथ उत्पन्न करल गेलय छै. ई बिना संकलन आरू गतिशील अल्फा पारदर्शिता परिवर्तन के वास्तविक सम�� के रंग परिवर्तन के अनुमति दै छै.
कोना काज करैत अछि
हमर डिफ़ॉल्ट .text-primary
उपयोगिता पर विचार करू।
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
--bs-primary
हम अपनऽ (क मान के साथ ) CSS चर केरऽ एक RGB संस्करण के उपयोग करय छै आरू अल्फा पारदर्शिता के लेलऽ 13, 110, 253
एक दोसरऽ CSS चर, , संलग्न करय छै ( एक स्थानीय CSS चर के बदौलत एक डिफ़ॉल्ट मान के साथ) । मतलब आब कोनो समय अहाँ उपयोग करब, अहाँक गणना मान अछि . प्रत्येक वर्ग कें अंदर स्थानीय CSS चर विरासत मुद्दाक सं बचयत छै अइ कें लेल उपयोगिताक कें नेस्टेड इंस्टेंस मे स्वचालित रूप सं संशोधित अल्फा पारदर्शिता नहि होयत छै.--bs-text-opacity
1
.text-primary
color
rgba(13, 110, 253, 1)
.text-*
उदाहरण
ओहि अस्पष्टता केँ बदलबाक लेल, --bs-text-opacity
कस्टम शैली अथवा इनलाइन शैली क माध्यम सँ ओवरराइड करू.
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>
.text-opacity
अथवा, कोनों उपयोगिता मे सं चुनू :
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>
विशिष्टता
कखनो काल दोसर चयनकर्ताक विशिष्टताक कारण संदर्भ वर्ग लागू नहि कएल जा सकैत अछि । कुछ मामला म॑, एकरऽ पर्याप्त समाधान ई छै कि अपनऽ तत्व केरऽ सामग्री <div>
क॑ वांछित वर्ग के साथ एक या अधिक शब्दार्थ तत्व म॑ लपेटलऽ जाय ।
सस्स
निम्नलिखित Sass कार्यक्षमता के अलावा, रंग आरू बहुत कुछ के लेलऽ हमरऽ शामिल CSS कस्टम गुण (उर्फ CSS चर) के बारे म॑ पढ़ै प॑ विचार करलऽ जाय ।
चर
अधिकांश color
उपयोगिता हमरऽ थीम रंग द्वारा उत्पन्न करलऽ जाय छै, जे हमरऽ जेनेरिक रंग पैलेट चर स॑ पुनः असाइन करलऽ जाय छै ।
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
ग्रेस्केल रंग भी उपलब्ध छै, लेकिन कोनों उपयोगिता पैदा करै लेली केवल एक उपसमूह के उपयोग करलऽ जाय छै.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
नक्शा
तखन थीम रंग क॑ एक सास मैप म॑ डाललऽ जाय छै ताकि हम्मं॑ ओकरा प॑ लूप करी क॑ अपनऽ उपयोगिता, घटक संशोधक, आरू बहुत कुछ पैदा करी सक॑ ।
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
सास मैप के रूप में ग्रेस्केल रंग सेहो उपलब्ध अछि | एहि नक्शाक उपयोग कोनो उपयोगिता उत्पन्न करबा लेल नहि कएल जाइत अछि ।
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
आरजीबी रंग एकटा अलग सस मैप स उत्पन्न कएल गेल अछि:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
आरू रंग अस्पष्टता ओकरा पर अपनऽ नक्शा के साथ निर्माण करै छै जे उपयोगिता एपीआई द्वारा खपत करलऽ जाय छै:
$utilities-text: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
)
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");
उपयोगिता एपीआई
रंग उपयोगिता हमर उपयोगिता एपीआई मे घोषित कएल गेल अछि scss/_utilities.scss
. उपयोगिता एपीआई क उपयोग करब सीखू।
"color": (
property: color,
class: text,
local-vars: (
"text-opacity": 1
),
values: map-merge(
$utilities-text-colors,
(
"muted": $text-muted,
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"reset": inherit,
)
)
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),