Рангҳо
colorБо якчанд синфҳои рангҳои рангӣ маънои онро расонед . Дастгирии истинодҳои ороиширо бо ҳолати ҳовер низ дар бар мегирад.
Рангҳо
Матнро бо утилитҳои рангӣ ранг кунед. Агар шумо хоҳед, ки пайвандҳоро ранг кунед, шумо метавонед .link-*синфҳои ёрирасонро истифода баред, ки дорои :hoverва :focusдавлатҳо мебошанд.
.матни ибтидоӣ
.матн — дуюмдарача
.матн-муваффакият
.матн-хатар
.матн-огохй
.text-info
.матн-нур
.матн-торик
.матн-бадан
.матн хомӯш карда шудааст
.матн-сафед
.матн-сиёх-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, утилитаҳои ранги матн бо Sass бо истифода аз тағирёбандаҳои CSS тавлид мешаванд. Ин имкон медиҳад, ки дар вақти воқеӣ тағир додани ранг бидуни таҳия ва тағирёбии шаффофияти динамикии алфа.
Он чӣ гуна кор мекунад
Утилити пешфарзи моро баррасӣ кунед .text-primary.
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Мо версияи RGB-и тағирёбандаи CSS-и --bs-primaryхудро (бо арзиши ) истифода мебарем ва барои шаффофияти алфа 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;
Харита
Пас аз он рангҳои мавзӯъ ба харитаи Sass ҷойгир карда мешаванд, то мо метавонем онҳоро аз болои онҳо гардиш карда, утилитаҳои худ, тағирдиҳандаҳои ҷузъҳо ва ғайраро тавлид кунем.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Рангҳои хокистарранг инчунин ҳамчун харитаи 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");
Ва ношаффофияти рангҳо дар асоси он бо харитаи худ, ки аз ҷониби 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 Utilities
Утилитаҳои рангӣ дар 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
)
),