வண்ணங்கள்
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 மாறிகளைப் பயன்படுத்தி சாஸ் மூலம் உரை வண்ணப் பயன்பாடுகள் உருவாக்கப்படுகின்றன. இது தொகுத்தல் மற்றும் மாறும் ஆல்பா வெளிப்படைத்தன்மை மாற்றங்கள் இல்லாமல் நிகழ் நேர வண்ண மாற்றங்களை அனுமதிக்கிறது.
எப்படி இது செயல்படுகிறது
எங்கள் இயல்புநிலை .text-primary
பயன்பாட்டைக் கவனியுங்கள்.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
ஆல்ஃபா வெளிப்படைத்தன்மைக்காக ( உள்ளூர் CSS மாறிக்கு நன்றி செலுத்தும் இயல்புநிலை மதிப்புடன்) எங்களின் --bs-primary
(மதிப்புடன் ) CSS மாறியின் RGB பதிப்பைப் பயன்படுத்துகிறோம், மேலும் 13, 110, 253
இரண்டாவது 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
);
RGB வண்ணங்கள் ஒரு தனி Sass வரைபடத்தில் இருந்து உருவாக்கப்படுகின்றன:
$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
)
),