טימינג באָאָצטראַפּ
קאַסטאַמייז Bootstrap 4 מיט אונדזער נייַ געבויט-אין סאַסס וועריאַבאַלז פֿאַר גלאבאלע סטיל פּרעפֿערענצן פֿאַר גרינג טימינג און קאָמפּאָנענט ענדערונגען.
הקדמה
אין Bootstrap 3, טימינג איז לאַרגעלי געטריבן דורך וועריאַבאַל אָוווערריידז אין ווייניקער, מנהג CSS און אַ באַזונדער טעמע סטילעשעעט וואָס מיר ינקלודעד אין אונדזער distטעקעס. מיט עטלעכע מי, איר קענען גאָר רידיזיין די קוק פון Bootstrap 3 אָן רירנדיק די האַרץ טעקעס. Bootstrap 4 גיט אַ באַקאַנט, אָבער אַ ביסל אַנדערש צוגאַנג.
איצט, טימינג איז אַטשיווד דורך סאַס וועריאַבאַלז, סאַס מאַפּס און מנהג קסס. עס איז ניט מער דעדאַקייטאַד טעמע סטילשעעט; אַנשטאָט, איר קענען געבן די געבויט-אין טעמע צו לייגן גראַדיענץ, שאַדאָוז און מער.
סאַס
ניצן אונדזער מקור סאַסס טעקעס צו נוצן וועריאַבאַלז, מאַפּס, מיקסינס און מער. אין אונדזער בויען מיר האָבן געוואקסן די סאַסס ראַונדינג פּינטלעכקייַט צו 6 (דורך פעליקייַט עס איז 5) צו פאַרמייַדן ישוז מיט בלעטערער ראַונדינג.
טעקע סטרוקטור
ווען מעגלעך, ויסמיידן מאָדיפיצירן 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.
איר וועט געפֿינען די גאַנץ רשימה פון באָאָטסטראַפּ ס וועריאַבאַלז אין scss/_variables.scss. עטלעכע וועריאַבאַלז זענען באַשטימט צו null, די וועריאַבאַלז טאָן ניט רעזולטאַט די פאַרמאָג סייַדן זיי זענען אָווועררידאַן אין דיין קאַנפיגיעריישאַן.
וועריאַבאַל אָוווערריידז אין דער זעלביקער סאַסס טעקע קענען קומען איידער אָדער נאָך די פעליקייַט וועריאַבאַלז. אָבער, ווען אָוווערריידינג אַריבער 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. זיין אַווער אַז איר מוזן אַרייַנלייגן עס צווישן אונדזער רעקווירעמענץ און אָפּציעס:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...פארלאנגט שליסלען
באָאָטסטראַפּ אַסומז די בייַזייַן פון עטלעכע ספּעציפיש שליסלען אין 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`
}אַנטלויפן SVG
מיר נוצן די escape-svgפונקציע צו אַנטלויפן די <, >און #אותיות פֿאַר SVG הינטערגרונט בילדער. די אותיות דאַרפֿן צו זיין אנטרונען צו רעכט ופפירן די הינטערגרונט בילדער אין IE.
לייג און אַראָפּרעכענען פאַנגקשאַנז
מיר נוצן די addאון subtractפאַנגקשאַנז צו ייַנוויקלען די CSS calcפונקציע. דער ערשטיק ציל פון די פאַנגקשאַנז איז צו ויסמיידן ערראָרס ווען אַ "וניטלעסס" 0ווערט איז דורכגעגאנגען אין אַ calcאויסדרוק. עקספּרעססיאָנס ווי calc(10px - 0)וועט צוריקקומען אַ טעות אין אַלע בראַוזערז, טראָץ זיין מאַטאַמאַטיקאַל ריכטיק.
בייַשפּיל ווו די קאַלק איז גילטיק:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}בייַשפּיל ווו די קאַלק איז פאַרקריפּלט:
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}פּשוט אָפּציעס
קאַסטאַמייז Bootstrap 4 מיט אונדזער געבויט-אין מנהג וועריאַבאַלז טעקע און לייכט באַשטימען גלאבאלע CSS פּרעפֿערענצן מיט נייַע $enable-*Sass וועריאַבאַלז. אָווועררייד אַ וועריאַבאַל ווערט און ריקאָמפּילע מיט npm run testווי דארף.
איר קענען געפֿינען און קאַסטאַמייז די וועריאַבאַלז פֿאַר שליסל גלאבאלע אָפּציעס אין Bootstrap ס scss/_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-prefers-reduced-motion-media-query |
true(פעליקייַט) אָדערfalse |
ינייבאַלז די prefers-reduced-motionמידיאַ אָנפֿרעג , וואָס סאַפּרעסיז זיכער אַנאַמיישאַנז / טראַנזישאַנז באזירט אויף די פּרעפֿערענצן פון די בלעטערער / אָפּערייטינג סיסטעם פון די באַניצער. |
$enable-hover-media-query |
trueאָדער false(פעליקייַט) |
דיפּרישיייטיד |
$enable-grid-classes |
true(פעליקייַט) אָדערfalse |
ינייבאַלז די דור פון CSS קלאסן פֿאַר די גריד סיסטעם (למשל, .container, .row, .col-md-1, אאז"ו ו). |
$enable-caret |
true(פעליקייַט) אָדערfalse |
ינייבאַלז פּסעוודאָ עלעמענט קאַרעט אויף .dropdown-toggle. |
$enable-pointer-cursor-for-buttons |
true(פעליקייַט) אָדערfalse |
לייג "האַנט" לויפֿער צו ניט-פאַרקריפּלט קנעפּל עלעמענטן. |
$enable-print-styles |
true(פעליקייַט) אָדערfalse |
ינייבאַלז סטיילז פֿאַר אָפּטימיזינג דרוקן. |
$enable-responsive-font-sizes |
trueאָדער false(פעליקייַט) |
ינייבאַלז אָפּרופיק שריפֿט סיזעס . |
$enable-validation-icons |
true(פעליקייַט) אָדערfalse |
ינייבאַלז background-imageייקאַנז אין טעקסטשאַוואַל ינפּוץ און עטלעכע מנהג פארמען פֿאַר וואַלאַדיישאַן שטאַטן. |
$enable-deprecation-messages |
trueאָדער false(פעליקייַט) |
שטעלן צו trueצו ווייַזן וואָרנינגז ווען איר נוצן קיין פון די דיפּרישיייטיד מיקסינס און פאַנגקשאַנז וואָס זענען פּלאַננעד צו זיין אַוועקגענומען אין v5. |
פאַרב
פילע פון באָאָטסטראַפּ ס פאַרשידן קאַמפּאָונאַנץ און יוטילאַטיז זענען געבויט דורך אַ סעריע פון פארבן דיפיינד אין אַ סאַס מאַפּע. די מאַפּע קענען זיין לאָודיד אין 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 מאַפּע אין Bootstrap ס scss/_variables.scssטעקע.
גרוי
אַ ברייט גאַנג פון גרוי וועריאַבאַלז און אַ סאַס מאַפּע scss/_variables.scssפֿאַר קאָנסיסטענט שיידז פון גרוי אין דיין פּרויעקט. באַמערקונג אַז דאָס זענען "קיל גרייז", וואָס טענד צו אַ סאַטאַל בלוי טאָן, אלא ווי נייטראַל גריי.
ין scss/_variables.scss, איר וועט געפֿינען Bootstrap ס קאָליר וועריאַבאַלז און 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, דיין ענדערונגען וועלן צולייגן צו אַלע די לופּס יטערייטינג איבער די מאַפּע.
CSS וועריאַבאַלז
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, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--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);
}ברייקפּאָינט וועריאַבאַלז
כאָטש מיר ערידזשנאַלי ינקלודעד ברעאַקפּאָינץ אין אונדזער CSS וועריאַבאַלז (למשל, --breakpoint-md), די זענען נישט געשטיצט אין מעדיע קוויריז , אָבער זיי קענען נאָך זיין געוויינט ין רולעסעץ אין מעדיע קוויריז. די ברייקפּוינט וועריאַבאַלז בלייבן אין די קאַמפּיילד CSS פֿאַר צוריק קאַמפּאַטאַבילאַטי ווייַל זיי קענען זיין יוטאַלייזד דורך דזשאַוואַסקריפּט. לערן מער אין די ספּעציאַליטעט .
דאָ ס אַ ביישפּיל פון וואָס איז נישט געשטיצט:
@media (min-width: var(--breakpoint-sm)) {
...
}און דאָ ס אַ ביישפּיל פון וואָס איז געשטיצט:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}