रंग की
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-*
बहिष्करण : टेक्स्ट उपयोगिताओं के लिए उपयोगिताओं और सीएसएस चर
के अतिरिक्त के साथ
, .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
(के मूल्य के साथ 13, 110, 253
) सीएसएस चर के आरजीबी संस्करण का उपयोग करते हैं और अल्फा पारदर्शिता के लिए एक दूसरा सीएसएस चर संलग्न करते हैं --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;
नक्शा
थीम रंगों को फिर एक Sass मानचित्र में डाल दिया जाता है ताकि हम अपनी उपयोगिताओं, घटक संशोधक, और बहुत कुछ उत्पन्न करने के लिए उन पर लूप कर सकें।
$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
);
RGB रंग एक अलग Sass मानचित्र से उत्पन्न होते हैं:
$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
. उपयोगिताओं API का उपयोग करना सीखें।
"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
)
),