အရောင်များ
color
လက်တစ်ဆုပ်စာ အရောင်အသုံးအဆောင်အတန်းများဖြင့် အဓိပ္ပါယ်ကို ထုတ်ဖော် ပါ။ hover states နှင့် လင့်ခ်ပုံစံပုံသွင်းခြင်းအတွက် ပံ့ပိုးမှုလည်း ပါဝင်သည်။
အရောင်များ
အရောင်အသုံးအဆောင်များဖြင့် စာသားကို အရောင်ခြယ်ပါ။ လင့်ခ်များကို အရောင်ခြယ်လိုပါက၊ နှင့် ဖော်ပြထားသော .link-*
helper အတန်းများကို အသုံးပြုနိုင်ပါသည် ။:hover
:focus
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.စာသားကို အသံတိတ်ထားသည်။
.text-white
.text-black-50
.text-white-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 variable များကို
.text-black-50
ပေါင်း
ထည့်ခြင်းဖြင့်
၊ .text-white-50
v5.1.0 တွင် ငြင်းပယ်ထားသည်။ ၎င်းတို့ကို v6.0.0 တွင် ဖယ်ရှားပါမည်။
အကူအညီပေးသောနည်းပညာများကို အဓိပ္ပာယ်ဖွင့်ဆိုခြင်း။
အဓိပ္ပါယ်ထည့်ရန် အရောင်ကိုအသုံးပြုခြင်းသည် မျက်နှာပြင်ဖတ်စက်များကဲ့သို့သော အထောက်အကူနည်းပညာများကို အသုံးပြုသူများထံ ပေးပို့မည်မဟုတ်သည့် အမြင်အာရုံညွှန်ပြမှုတစ်ခုသာဖြစ်သည်။ အရောင်ဖြင့် ဖော်ပြထားသော အချက်အလက်သည် အကြောင်းအရာ ကိုယ်တိုင် (ဥပမာ မြင်နိုင်သော စာသား) သို့မဟုတ် .visually-hidden
အတန်းထဲတွင် ဝှက်ထားသော အပိုစာသားများကဲ့သို့ အခြားနည်းလမ်းများဖြင့် ပါဝင်ကြောင်း သေချာပါစေ။
အလင်းပိတ်
v5.1.0 တွင် ထည့်သွင်းထားသည်။
v5.1.0 တွင် CSS variable များကို အသုံးပြု၍ Sass ဖြင့် စာသားအရောင်အသုံးအဆောင်များကို ထုတ်လုပ်ပေးပါသည်။ ၎င်းသည် စုစည်းမှု နှင့် တက်ကြွသော အယ်လ်ဖာ ပွင့်လင်းမြင်သာမှု ပြောင်းလဲမှုများမပါဘဲ အချိန်နှင့်တပြေးညီ အရောင်ပြောင်းလဲမှုများကို ပြုလုပ်နိုင်စေပါသည်။
ဘယ်လိုအလုပ်လုပ်လဲ
ကျွန်ုပ်တို့၏ မူရင်း .text-primary
အသုံးဝင်မှုကို သုံးသပ်ကြည့်ပါ။
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
--bs-primary
ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ (တန်ဖိုးနှင့် ) CSS variable ၏ RGB ဗားရှင်းကို အသုံးပြုပြီး alpha ပွင့်လင်းမြင်သာမှုအတွက် ( ဒေသခံ CSS variable ကြောင့် မူရင်းတန်ဖိုးဖြင့် 13, 110, 253
) ဒုတိယ CSS variable ကို ပူးတွဲထားသည် ။ ဆိုလိုသည်မှာ သင် ယခုအသုံးပြုသည့်အချိန်တိုင်း၊ သင်၏တွက်ချက်ထားသော တန်ဖိုးဖြစ်သည် ။ class တစ်ခုစီရှိ local CSS variable သည် အမွေဆက်ခံခြင်းဆိုင်ရာ ပြဿနာများကို ရှောင်ရှားနိုင်သောကြောင့် အသုံးချပရိုဂရမ်များ၏ nested instance များသည် အလိုအလျောက် ပြုပြင်ထားသော alpha ပွင့်လင်းမြင်သာမှု မရှိနိုင်ပါ။--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 စိတ်ကြိုက်ဂုဏ်သတ္တိများ (aka CSS variables) များအကြောင်း ဖတ်ကြည့်ပါ။
ကိန်းရှင်များ
အသုံးအဆောင် အများစုကို color
ကျွန်ုပ်တို့၏ ယေဘူယျအရောင် palette variable များမှ ပြန်လည်သတ်မှတ်ထားသော ကျွန်ုပ်တို့၏ ဆောင်ပုဒ်အရောင်များဖြင့် ထုတ်ပေးပါသည်။
$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;
မီးခိုးရောင်စကေးအရောင်များလည်း ရနိုင်သော်လည်း မည်သည့် utilities များထုတ်လုပ်ရန်အတွက်မဆို အစုခွဲတစ်ခုကိုသာ အသုံးပြုပါသည်။
$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
);
Grayscale အရောင်များကို Sass မြေပုံအဖြစ်လည်း ရနိုင်သည်။ ဤမြေပုံကို မည်သည့် အသုံးဝင်မှုများ ဖန်တီးရန် အသုံးမပြုပါ။
$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 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
Color utilities များကို ကျွန်ုပ်တို့၏ utilities API တွင် ကြေငြာ scss/_utilities.scss
ထားသည်။ utilities 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
)
),