Рангҳо
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>Интиқоли маъно ба технологияҳои ёрирасон
Истифодаи ранг барои илова кардани маъно танҳо нишонаи визуалиро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон, интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст, ё аз худи мундариҷа (масалан, матни намоён) равшан аст ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .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;
Харита
Пас аз он рангҳои мавзӯъ ба харитаи 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
);
API Utilities
Утилитаҳои рангӣ дар 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,
)
)
),