रंगहरू
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>
सहयोगी टेक्नोलोजीहरूको अर्थ बुझाउँदै
अर्थ थप्न रङको प्रयोगले मात्र दृश्य सङ्केत प्रदान गर्दछ, जुन सहायक प्रविधिहरूका प्रयोगकर्ताहरूलाई जानकारी दिइने छैन - जस्तै स्क्रिन रिडरहरू। सुनिश्चित गर्नुहोस् कि रङद्वारा संकेत गरिएको जानकारी या त सामग्रीबाट नै स्पष्ट छ (जस्तै देखिने पाठ), वा वैकल्पिक माध्यमहरू मार्फत समावेश गरिएको छ, जस्तै .visually-hidden
कक्षासँग लुकेको अतिरिक्त पाठ।
विशिष्टता
कहिलेकाहीँ अर्को चयनकर्ताको विशिष्टताको कारणले गर्दा प्रासंगिक कक्षाहरू लागू गर्न सकिँदैन। <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
);
उपयोगिता API
रङ उपयोगिताहरू हाम्रो उपयोगिता API मा घोषणा गरिएको छ scss/_utilities.scss
। उपयोगिता API कसरी प्रयोग गर्ने जान्नुहोस्।
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),