קאָלאָרס
איבערגעבן טייַטש 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>
קאַנווייינג טייַטש צו אַסיסטיוו טעקנאַלאַדזשיז
ניצן קאָליר צו לייגן טייַטש בלויז גיט אַ וויזשאַוואַל אָנווייַז, וואָס וועט נישט זיין קאַנווייד צו יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז - אַזאַ ווי פאַרשטעלן לייענער. פאַרזיכערן אַז אינפֿאָרמאַציע דינאָוטיד דורך די קאָליר איז קלאָר ווי דער טאָג פון די אינהאַלט זיך (למשל די קענטיק טעקסט), אָדער איז אַרייַנגערעכנט דורך אָלטערנאַטיוו מיטל, אַזאַ ווי נאָך טעקסט פאַרבאָרגן מיט די .visually-hidden
קלאַס.
ספּעציפֿישקייט
מאל קאָנטעקסטואַל קלאסן קענען ניט זיין געווענדט רעכט צו דער ספּעציפֿישקייט פון אן אנדער סעלעקטאָר. אין עטלעכע קאַסעס, אַ גענוג וואָרקאַראָונד איז צו ייַנוויקלען די אינהאַלט פון דיין עלעמענט אין אַ <div>
אָדער מער סעמאַנטיק עלעמענט מיט דער געוואלט קלאַס.
סאַס
אין אַדישאַן צו די פאלגענדע סאַס פאַנגקשאַנאַליטי, באַטראַכטן לייענען וועגן אונדזער אַרייַנגערעכנט 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
);
Utilities API
קאָליר יוטילאַטיז זענען דערקלערט אין אונדזער יוטילאַטיז אַפּי אין scss/_utilities.scss
. לערנען ווי צו נוצן די Utilities 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,
)
)
),