रंगहरू
colorमुट्ठीभर रंग उपयोगिता कक्षाहरू मार्फत अर्थ बुझाउनुहोस् । होभर राज्यहरूसँग स्टाइल लिङ्कहरूको लागि समर्थन पनि समावेश गर्दछ।
रंगहरू
रंग उपयोगिताहरु संग पाठ रङ। यदि तपाइँ लिङ्कहरू रङ गर्न चाहनुहुन्छ भने, तपाइँ .link-*सहायक वर्गहरू प्रयोग गर्न सक्नुहुन्छ जसमा :hoverर :focusराज्यहरू छन्।
पाठ-प्राथमिक
पाठ-माध्यमिक
पाठ-सफलता
.text- खतरा
.text-चेतावनी
.text-जानकारी
टेक्स्ट-लाइट
टेक्स्ट-गाढा
.text-body
पाठ-म्युट
.text-सेतो
.text-black-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-50v5.1.0
.text-white-50को रूपमा बहिष्कार गरिएको छ। तिनीहरूलाई 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-opacity1.text-primarycolorrgba(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
);
RGB रङहरू अलग सास नक्साबाट उत्पन्न हुन्छन्:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
र रङ अस्पष्टताहरू तिनीहरूको आफ्नै नक्साको साथ निर्माण गर्दछ जुन उपयोगिता API द्वारा खपत हुन्छ:
$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");
उपयोगिता API
रङ उपयोगिताहरू हाम्रो उपयोगिता API मा घोषणा गरिएको छ 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
)
),