වර්ණ
color
වර්ණ උපයෝගිතා පන්ති අතලොස්සක් සමඟින් අර්ථය ප්රකාශ කරන්න. hover තත්ත්වයන් සමඟින් හැඩගැන්වීම් සබැඳි සඳහා ද සහය ඇතුළත් වේ.
වර්ණ
වර්ණ උපයෝගිතා සමඟ පෙළ වර්ණවත් කරන්න. ඔබට සබැඳි වර්ණ ගැන්වීමට අවශ්ය නම්, ඔබට ඇති සහ ප්රාන්තවල .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 විචල්යයකට ස්තූතිවන්ත වන පරිදි --bs-text-opacity
පෙරනිමි අගයක් සමඟ ). 1
ඒ කියන්නේ ඔබ .text-primary
දැන් භාවිතා කරන ඕනෑම වේලාවක, ඔබේ ගණනය කළ color
අගය වේ rgba(13, 110, 253, 1)
. එක් එක් පන්තිය තුළ ඇති දේශීය CSS විචල්යය .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");
සහ වර්ණ පාරාන්ධතාවයන් උපයෝගිතා 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
)
),