טימינג באָאָצטראַפּ
קאַסטאַמייז Bootstrap 4 מיט אונדזער נייַ געבויט-אין סאַסס וועריאַבאַלז פֿאַר גלאבאלע סטיל פּרעפֿערענצן פֿאַר גרינג טימינג און קאָמפּאָנענט ענדערונגען.
אין Bootstrap 3, טימינג איז לאַרגעלי געטריבן דורך וועריאַבאַל אָוווערריידז אין ווייניקער, מנהג CSS און אַ באַזונדער טעמע סטילעשעעט וואָס מיר ינקלודעד אין אונדזער distטעקעס. מיט עטלעכע מי, איר קענען גאָר רידיזיין די קוק פון Bootstrap 3 אָן רירנדיק די האַרץ טעקעס. Bootstrap 4 גיט אַ באַקאַנט, אָבער אַ ביסל אַנדערש צוגאַנג.
איצט, טימינג איז אַטשיווד דורך סאַס וועריאַבאַלז, סאַס מאַפּס און מנהג קסס. עס איז ניט מער דעדאַקייטאַד טעמע סטילשעעט; אַנשטאָט, איר קענען געבן די געבויט-אין טעמע צו לייגן גראַדיענץ, שאַדאָוז און מער.
ניצן אונדזער מקור סאַסס טעקעס צו נוצן וועריאַבאַלז, מאַפּס, מיקסינס און מער.
ווען מעגלעך, ויסמיידן מאָדיפיצירן Bootstrap ס האַרץ טעקעס. פֿאַר Sass, דאָס מיינט צו שאַפֿן דיין אייגענע סטילעשעעט וואָס ימפּאָרץ Bootstrap אַזוי איר קענען מאָדיפיצירן און פאַרברייטערן עס. אויב איר נוצן אַ פּעקל פאַרוואַלטער ווי npm, איר וועט האָבן אַ טעקע סטרוקטור וואָס קוקט ווי דאָס:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scssאויב איר האָט דאַונלאָודיד אונדזער מקור טעקעס און טאָן ניט נוצן אַ פּעקל פאַרוואַלטער, איר וועט וועלן צו מאַניואַלי סעטאַפּ עפּעס ענלעך צו די סטרוקטור, און האַלטן די מקור טעקעס פון Bootstrap באַזונדער פון דיין אייגענע.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scssאין דיין custom.scss, איר וועט אַרייַנפיר באָאָטסטראַפּ ס מקור סאַס טעקעס. איר האָבן צוויי אָפּציעס: אַרייַננעמען אַלע באָאָטסטראַפּ, אָדער קלייַבן די פּאַרץ איר דאַרפֿן. מיר מוטיקן די יענער, כאָטש זיין אַווער אַז עס זענען עטלעכע רעקווירעמענץ און דיפּענדאַנסיז צווישן אונדזער קאַמפּאָונאַנץ. איר אויך דאַרפֿן צו אַרייַננעמען עטלעכע דזשאַוואַסקריפּט פֿאַר אונדזער פּלוגינס.
// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";// Custom.scss
// Option B: Include parts of Bootstrap
// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";מיט דעם סעטאַפּ אין פּלאַץ, איר קענען אָנהייבן צו מאָדיפיצירן קיין פון די סאַסס וועריאַבאַלז און מאַפּס אין דיין custom.scss. איר קענט אויך אָנהייבן צו לייגן פּאַרץ פון Bootstrap אונטער די // Optionalאָפּטיילונג ווי דארף. מיר פֿאָרשלאָגן ניצן די פול אַרייַנפיר אָנלייגן פון אונדזער bootstrap.scssטעקע ווי דיין סטאַרטינג פונט.
יעדער Sass בייַטעוודיק אין Bootstrap 4 כולל די !defaultפאָן וואָס אַלאַוז איר צו אָווועררייד די פעליקייַט ווערט פון די בייַטעוודיק אין דיין אייגענע Sass אָן מאָדיפיצירן די מקור קאָד פון Bootstrap. נאָכמאַכן און פּאַפּ וועריאַבאַלז ווי דארף, מאָדיפיצירן זייער וואַלועס און באַזייַטיקן די !defaultפאָן. אויב אַ בייַטעוודיק איז שוין אַסיינד, עס וועט נישט זיין שייַעך-אַסיינד דורך די פעליקייַט וואַלועס אין Bootstrap.
וועריאַבאַל אָוווערריידז אין דער זעלביקער סאַסס טעקע קענען קומען איידער אָדער נאָך די פעליקייַט וועריאַבאַלז. אָבער, ווען אָוווערריידינג אַריבער Sass טעקעס, דיין אָוווערריידז מוזן קומען איידער איר אַרייַנפיר באָאָטסטראַפּ ס סאַס טעקעס.
דאָ ס אַ ביישפּיל וואָס ענדערונגען די background-colorאון colorפֿאַר די <body>ווען ימפּאָרטינג און קאַמפּיילינג Bootstrap דורך npm:
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";איבערחזרן ווי נייטיק פֿאַר קיין בייַטעוודיק אין Bootstrap, אַרייַנגערעכנט די גלאבאלע אָפּציעס אונטן.
Bootstrap 4 כולל אַ האַנדפול פון סאַס מאַפּס, שליסל ווערט פּערז וואָס מאַכן עס גרינגער צו דזשענערייט משפחות פון פֿאַרבונדענע CSS. מיר נוצן Sass מאַפּס פֿאַר אונדזער פארבן, גריד ברעאַקפּאָינץ, און מער. פּונקט ווי סאַס וועריאַבאַלז, אַלע סאַס מאַפּס אַרייַננעמען די !defaultפאָן און קענען זיין אָווועררידאַן און עקסטענדעד.
עטלעכע פון אונדזער סאַס מאַפּס זענען מערדזשד אין ליידיק אָנעס דורך פעליקייַט. דאָס איז געטאן צו לאָזן גרינג יקספּאַנשאַן פון אַ געגעבן Sass מאַפּע, אָבער קומט אין די פּרייַז פון מאכן רימוווינג זאכן פון אַ מאַפּע אַ ביסל מער שווער.
צו מאָדיפיצירן אַ יגזיסטינג קאָליר אין אונדזער $theme-colorsמאַפּע, לייג די פאלגענדע צו דיין מנהג Sass טעקע:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);צו לייגן אַ נייַע קאָליר צו $theme-colors, לייג די נייַע שליסל און ווערט:
$theme-colors: (
"custom-color": #900
);צו באַזייַטיקן פארבן פון $theme-colors, אָדער קיין אנדערע מאַפּע, נוצן map-remove:
$theme-colors: map-remove($theme-colors, "success", "info", "danger");באָאָטסטראַפּ אַסומז די בייַזייַן פון עטלעכע ספּעציפיש שליסלען אין Sass מאַפּס ווי מיר געוויינט און פאַרברייטערן די זיך. ווען איר קאַסטאַמייז די ינקלודעד מאַפּס, איר קען טרעפן ערראָרס ווען אַ ספּעציפיש סאַסס מאַפּע ס שליסל איז געניצט.
פֿאַר בייַשפּיל, מיר נוצן די primary, success, און dangerשליסלען פֿון $theme-colorsפֿאַר לינקס, קנעפּלעך און פאָרעם שטאַטן. ריפּלייסינג די וואַלועס פון די שליסלען זאָל נישט פאָרשטעלן קיין ישוז, אָבער רימוווינג זיי קען פאַרשאַפן סאַסס זאַמלונג ישוז. אין די ינסטאַנסיז, איר דאַרפֿן צו מאָדיפיצירן די Sass קאָד וואָס ניצט די וואַלועס.
באָאָטסטראַפּ ניצט עטלעכע סאַס פאַנגקשאַנז, אָבער בלויז אַ סאַבסעט איז אָנווענדלעך צו אַלגעמיין טימינג. מיר האָבן אַרייַנגערעכנט דריי פאַנגקשאַנז צו באַקומען וואַלועס פון די קאָליר מאַפּס:
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}דאָס אַלאַוז איר צו קלייַבן איין קאָליר פון אַ Sass מאַפּע פיל ווי איר וואָלט נוצן אַ קאָליר בייַטעוודיק פון v3.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}מיר אויך האָבן אן אנדער פונקציע צו באַקומען אַ באַזונדער קאָליר פון די $theme-colorsמאַפּע. נעגאַטיוו לעוועלס וואַלועס וועט לייטאַן די קאָליר, בשעת העכער לעוועלס וועט דאַרקאַן.
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}אין פיר, איר'ד רופן די פֿונקציע און פאָרן אין צוויי פּאַראַמעטערס: די נאָמען פון די קאָליר פון $theme-colors(למשל, ערשטיק אָדער געפאַר) און אַ נומעריק מדרגה.
.custom-element {
color: theme-color-level(primary, -10);
}נאָך פאַנגקשאַנז קענען זיין מוסיף אין דער צוקונפֿט אָדער דיין אייגענע מנהג Sass צו שאַפֿן מדרגה פאַנגקשאַנז פֿאַר נאָך סאַס מאַפּס, אָדער אפילו דזשאַנעריק אויב איר ווילט צו זיין מער ווערבאָוס.
איין נאָך פונקציע וואָס מיר אַרייַננעמען אין Bootstrap איז די קאָליר קאַנטראַסט פונקציע, color-yiq. עס ניצט די YIQ קאָליר פּלאַץ צו אויטאָמאַטיש צוריקקומען אַ ליכט ( #fff) אָדער טונקל ( #111) קאַנטראַסט קאָליר באזירט אויף די ספּעסיפיעד באַזע קאָליר. די פֿונקציע איז ספּעציעל נוציק פֿאַר מיקסינס אָדער לופּס ווו איר דזשענערייט קייפל קלאסן.
פֿאַר בייַשפּיל, צו דזשענערייט קאָליר סוואַטשיז פון אונדזער $theme-colorsמאַפּע:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}עס קענען אויך זיין געניצט פֿאַר איין-אַוועק קאַנטראַסט באדערפענישן:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}איר קענט אויך ספּעציפיצירן אַ באַזע קאָליר מיט אונדזער קאָליר מאַפּע פאַנגקשאַנז:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}קאַסטאַמייז Bootstrap 4 מיט אונדזער געבויט-אין מנהג וועריאַבאַלז טעקע און לייכט באַשטימען גלאבאלע CSS פּרעפֿערענצן מיט נייַע $enable-*Sass וועריאַבאַלז. אָווועררייד אַ וועריאַבאַל ווערט און ריקאָמפּילע מיט npm run testווי דארף.
איר קענען געפֿינען און קאַסטאַמייז די וועריאַבאַלז פֿאַר שליסל גלאבאלע אָפּציעס אין אונדזער _variables.scssטעקע.
| וואַריאַבלע | וואַלועס | באַשרייַבונג |
|---|---|---|
$spacer |
1rem(פעליקייַט), אָדער קיין ווערט> 0 |
ספּעציפיצירט די פעליקייַט ספּייסער ווערט צו פּראָגראַממאַטיק דזשענערייט אונדזער ספּייסער יוטילאַטיז . |
$enable-rounded |
true(פעליקייַט) אָדערfalse |
ינייבאַלז פּרעדעפינעד border-radiusסטיילז אויף פאַרשידן קאַמפּאָונאַנץ. |
$enable-shadows |
trueאָדער false(פעליקייַט) |
ינייבאַלז פּרעדעפינעד box-shadowסטיילז אויף פאַרשידן קאַמפּאָונאַנץ. |
$enable-gradients |
trueאָדער false(פעליקייַט) |
ינייבאַלז פּרעדעפינעד גראַדיענץ דורך background-imageסטיילז אויף פאַרשידן קאַמפּאָונאַנץ. |
$enable-transitions |
true(פעליקייַט) אָדערfalse |
ינייבאַלז פּרעדעפינעד transitionס אויף פאַרשידן קאַמפּאָונאַנץ. |
$enable-hover-media-query |
trueאָדער false(פעליקייַט) |
דיפּרישיייטיד |
$enable-grid-classes |
true(פעליקייַט) אָדערfalse |
ינייבאַלז די דור פון קסס קלאסן פֿאַר די גריד סיסטעם (למשל, .container, .row, .col-md-1, אאז"ו ו). |
$enable-caret |
true(פעליקייַט) אָדערfalse |
ינייבאַלז פּסעוודאָ עלעמענט קאַרעט אויף .dropdown-toggle. |
$enable-print-styles |
true(פעליקייַט) אָדערfalse |
ינייבאַלז סטיילז פֿאַר אָפּטימיזינג דרוקן. |
פילע פון באָאָטסטראַפּ ס פאַרשידן קאַמפּאָונאַנץ און יוטילאַטיז זענען געבויט דורך אַ סעריע פון פארבן דיפיינד אין אַ סאַס מאַפּע. די מאַפּע קענען זיין לאָודיד אין Sass צו געשווינד דזשענערייט אַ סעריע פון רולסעץ.
אַלע פֿאַרבן בנימצא אין Bootstrap 4, זענען בנימצא ווי סאַס וועריאַבאַלז און אַ סאַס מאַפּע אין אונדזער scss/_variables.scssטעקע. דאָס וועט זיין יקספּאַנדיד אין סאַבסאַקוואַנט מינערווערטיק ריליסיז צו לייגן נאָך שיידז, פיל ווי די גרייסקאַלע פּאַליטרע מיר שוין אַרייַננעמען.
דאָ ס ווי איר קענען נוצן די אין דיין Sass:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }קאָליר נוצן קלאסן זענען אויך בנימצא פֿאַר באַשטעטיקן colorאון background-color.
אין דער צוקונפֿט, מיר צילן צו צושטעלן Sass מאַפּס און וועריאַבאַלז פֿאַר שיידז פון יעדער קאָליר ווי מיר האָבן געטאן מיט די גרייסקאַלע פארבן אונטן.
מיר נוצן אַ סאַבסעט פון אַלע פארבן צו שאַפֿן אַ קלענערער קאָליר פּאַליטרע פֿאַר דזשענערייטינג קאָליר סקימז, אויך בנימצא ווי Sass וועריאַבאַלז און אַ Sass מאַפּע אין אונדזער scss/_variables.scssטעקע.
אַ ברייט גאַנג פון גרוי וועריאַבאַלז און אַ סאַס מאַפּע scss/_variables.scssפֿאַר קאָנסיסטענט שיידז פון גרוי אין דיין פּרויעקט.
אין _variables.scss, איר וועט געפֿינען אונדזער קאָליר וועריאַבאַלז און Sass מאַפּע. דאָ ס אַ ביישפּיל פון די $colorsSass מאַפּע:
$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
) !default;לייג, אַראָפּנעמען אָדער מאָדיפיצירן וואַלועס אין דער מאַפּע צו דערהייַנטיקן ווי זיי זענען געניצט אין פילע אנדערע קאַמפּאָונאַנץ. צום באַדויערן אין דער צייט, ניט יעדער קאָמפּאָנענט ניצט דעם Sass מאַפּע. צוקונפֿט דערהייַנטיקונגען וועלן שטרעבן צו פֿאַרבעסערן דעם. ביז דעמאָלט, פּלאַן צו נוצן די ${color}וועריאַבאַלז און דעם Sass מאַפּע.
פילע פון Bootstrap ס קאַמפּאָונאַנץ און יוטילאַטיז זענען געבויט מיט @eachלופּס וואָס יטערייט איבער אַ Sass מאַפּע. דאָס איז ספּעציעל נוציק פֿאַר דזשענערייטינג וועריאַנץ פון אַ קאָמפּאָנענט דורך אונדזער $theme-colorsאון קריייטינג אָפּרופיק וועריאַנץ פֿאַר יעדער ברייקפּוינט. ווען איר קאַסטאַמייז די סאַס מאַפּס און ריקאָמפּילע, איר וועט אויטאָמאַטיש זען דיין ענדערונגען שפיגלט אין די לופּס.
פילע פון באָאָטסטראַפּ ס קאַמפּאָונאַנץ זענען געבויט מיט אַ באַזע-מאָדיפיער קלאַס צוגאַנג. דאָס מיינט אַז דער מערהייט פון די סטילינג איז קאַנטיינד צו אַ באַזע קלאַס (למשל, .btn) בשעת נוסח ווערייישאַנז זענען קאַנפיינד צו מאָדיפיער קלאסן (למשל, .btn-danger). די מאָדיפיער קלאסן זענען געבויט פֿון דער $theme-colorsמאַפּע צו קאַסטאַמייז די נומער און נאָמען פון אונדזער מאָדיפיער קלאסן.
דאָ זענען צוויי ביישפילן פון ווי מיר שלייף איבער די $theme-colorsמאַפּע צו דזשענערייט מאָדיפיערס צו די .alertקאָמפּאָנענט און אַלע אונדזער .bg-*הינטערגרונט יוטילאַטיז.
// Generate alert modifier classes
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
}
}
// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}די סאַס לופּס זענען אויך נישט לימיטעד צו קאָליר מאַפּס. איר קענען אויך דזשענערייט אָפּרופיק ווערייישאַנז פון דיין קאַמפּאָונאַנץ אָדער יוטילאַטיז. נעמען פֿאַר בייַשפּיל אונדזער אָפּרופיק טעקסט אַליינמאַנט יוטילאַטיז ווו מיר מישן אַ @eachשלייף פֿאַר די $grid-breakpointsסאַסס מאַפּע מיט אַ מידיאַ אָנפֿרעג.
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.text#{$infix}-left { text-align: left !important; }
.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}אויב איר דאַרפֿן צו מאָדיפיצירן דיין $grid-breakpoints, דיין ענדערונגען וועלן צולייגן צו אַלע די לופּס יטערייטינג איבער די מאַפּע.
Bootstrap 4 ינקלודז אַרום צוויי טוץ CSS מנהג פּראָפּערטיעס (וועריאַבאַלז) אין זיין קאַמפּיילד CSS. די צושטעלן גרינג אַקסעס צו קאַמאַנלי געוויינט וואַלועס ווי אונדזער טעמע פארבן, ברעאַקפּאָינץ און ערשטיק שריפֿט סטאַקס ווען איר אַרבעט אין דיין בלעטערער ס ינספּעקטאָר, אַ קאָד זאַמדקאַסטן אָדער אַלגעמיין פּראָוטאַטייפּ.
דאָ זענען די וועריאַבאַלז מיר אַרייַננעמען (טאָן אַז די :rootאיז פארלאנגט). זיי זענען ליגן אין אונדזער _root.scssטעקע.
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}CSS וועריאַבאַלז פאָרשלאָגן ענלעך בייגיקייַט צו די וועריאַבאַלז פון Sass, אָבער אָן די נויט פֿאַר זאַמלונג איידער זיי געדינט צו דעם בלעטערער. פֿאַר בייַשפּיל, דאָ מיר רעסעטטינג אונדזער בלאַט ס שריפֿט און לינק סטיילז מיט CSS וועריאַבאַלז.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}איר קענט אויך נוצן אונדזער ברייקפּוינט וועריאַבאַלז אין דיין מידיאַ קוויריז:
.content-secondary {
display: none;
}
@media (min-width(var(--breakpoint-sm))) {
.content-secondary {
display: block;
}
}