रंगें
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
)
),