פאַרב
באָאָטסטראַפּ איז געשטיצט דורך אַ ברייט קאָליר סיסטעם וואָס טימז אונדזער סטיילז און קאַמפּאָונאַנץ. דאָס ינייבאַלז מער פולשטענדיק קוסטאָמיזאַטיאָן און פאַרלענגערונג פֿאַר קיין פּרויעקט.
טעמע פארבן
מיר נוצן אַ סאַבסעט פון אַלע פארבן צו שאַפֿן אַ קלענערער קאָליר פּאַליטרע פֿאַר דזשענערייטינג קאָליר סקימז, אויך בנימצא ווי Sass וועריאַבאַלז און אַ Sass מאַפּע אין Bootstrap ס scss/_variables.scss
טעקע.
אַלע די פארבן זענען בנימצא ווי אַ Sass מאַפּע, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
קוק אונדזער Sass מאַפּס און לופּס דאָקס פֿאַר ווי צו מאָדיפיצירן די פארבן.
אַלע פארבן
כל באָאָטסטראַפּ פארבן זענען בנימצא ווי סאַסס וועריאַבאַלז און אַ סאַסס מאַפּע אין scss/_variables.scss
טעקע. צו ויסמיידן געוואקסן טעקע סיזעס, מיר טאָן ניט מאַכן טעקסט אָדער הינטערגרונט פֿאַרב קלאסן פֿאַר יעדער פון די וועריאַבאַלז. אַנשטאָט, מיר קלייַבן אַ סאַבסעט פון די פארבן פֿאַר אַ טעמע פּאַליטרע .
זייט זיכער צו מאָניטאָר קאַנטראַסט ריישיאָוז ווען איר קאַסטאַמייז פארבן. ווי געוויזן אונטן, מיר האָבן צוגעלייגט דריי קאַנטראַסט ריישיאָוז צו יעדער פון די הויפּט פארבן - איינער פֿאַר די קראַנט פארבן פון די סוואַטש, איינער פֿאַר קעגן ווייַס און איינער פֿאַר שוואַרץ.
הערות אויף סאַסס
סאַס קענען נישט פּראָגראַממאַטיק דזשענערייט וועריאַבאַלז, אַזוי מיר מאַניואַלי באשאפן וועריאַבאַלז פֿאַר יעדער טינט און שאָטן זיך. מיר ספּעציפיצירן די מידפּוינט ווערט (למשל, $blue-500
) און נוצן מנהג קאָליר פאַנגקשאַנז צו טינט (ליטאַן) אָדער שאָטן (פינצטער) אונדזער פארבן דורך Sass ס mix()
קאָליר פונקציע.
די נוצן mix()
איז נישט די זעלבע ווי lighten()
און darken()
- די ערשטע בלענדז די ספּעסיפיעד קאָליר מיט ווייַס אָדער שוואַרץ, בשעת די יענער בלויז אַדזשאַסטיד די לייטנאַס ווערט פון יעדער קאָליר. דער רעזולטאַט איז אַ פיל מער פולשטענדיק סוויט פון פארבן, ווי געוויזן אין דעם CodePen דעמאָ .
אונדזער tint-color()
און shade-color()
פאַנגקשאַנז נוצן mix()
צוזאמען אונדזער $theme-color-interval
בייַטעוודיק, וואָס ספּעציפיצירן אַ סטעפּט פּראָצענט ווערט פֿאַר יעדער געמישט קאָליר מיר פּראָדוצירן. זען די scss/_functions.scss
און scss/_variables.scss
טעקעס פֿאַר די פול מקור קאָד.
קאָליר סאַס מאַפּס
באָאָטסטראַפּ ס מקור סאַס טעקעס אַרייַננעמען דריי מאַפּס צו העלפֿן איר געשווינד און לייכט שלייף איבער אַ רשימה פון פארבן און זייער העקס וואַלועס.
$colors
רשימות אַלע אונדזער בנימצא באַזע (500
) פארבן$theme-colors
רשימות אַלע סעמאַנטיקאַללי געהייסן טעמע פארבן (געוויזן אונטן)$grays
רשימות אַלע טינץ און שיידז פון גרוי
ין scss/_variables.scss
, איר וועט געפֿינען Bootstrap ס קאָליר וועריאַבאַלז און Sass מאַפּע. דאָ ס אַ ביישפּיל פון די $colors
Sass מאַפּע:
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
לייג, אַראָפּנעמען אָדער מאָדיפיצירן וואַלועס אין דער מאַפּע צו דערהייַנטיקן ווי זיי זענען געניצט אין פילע אנדערע קאַמפּאָונאַנץ. צום באַדויערן אין דער צייט, ניט יעדער קאָמפּאָנענט ניצט דעם Sass מאַפּע. צוקונפֿט דערהייַנטיקונגען וועלן שטרעבן צו פֿאַרבעסערן דעם. ביז דעמאָלט, פּלאַן צו נוצן די ${color}
וועריאַבאַלז און דעם Sass מאַפּע.
בייַשפּיל
דאָ ס ווי איר קענען נוצן די אין דיין Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
קאָליר און הינטערגרונט נוצן קלאסן זענען אויך בנימצא פֿאַר באַשטעטיקן color
און background-color
ניצן די 500
קאָליר וואַלועס.
דזשענערייטינג יוטילאַטיז
צוגעגעבן אין וו5.1.0
באָאָטסטראַפּ טוט נישט אַרייַננעמען color
און background-color
יוטילאַטיז פֿאַר יעדער קאָליר בייַטעוודיק, אָבער איר קענען דזשענערייט די זיך מיט אונדזער נוצן אַפּי און אונדזער עקסטענדעד סאַס מאַפּס צוגעגעבן אין וו5.1.0.
- צו אָנהייבן, מאַכן זיכער אַז איר האָט ימפּאָרטיד אונדזער פאַנגקשאַנז, וועריאַבאַלז, מיקסינס און יוטילאַטיז.
- ניצן אונדזער
map-merge-multiple()
פונקציע צו געשווינד צונויפגיסן קייפל סאַס מאַפּס צוזאַמען אין אַ נייַע מאַפּע. - צונויפגיסן דעם נייַ קאַמביינד מאַפּע צו פאַרברייטערן קיין נוצן מיט אַ
{color}-{level}
קלאַס נאָמען.
דאָ ס אַ ביישפּיל וואָס דזשענערייץ טעקסט קאָליר יוטילאַטיז (למשל, .text-purple-500
) ניצן די אויבן סטעפּס.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";
דאָס וועט דזשענערייט נייַ .text-{color}-{level}
יוטילאַטיז פֿאַר יעדער קאָליר און מדרגה. איר קענען טאָן די זעלבע פֿאַר קיין אנדערע נוצן און פאַרמאָג.