Source

טימינג באָאָצטראַפּ

קאַסטאַמייז 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פֿאַר קאָנסיסטענט שיידז פון גרוי אין דיין פּרויעקט.

100
200
300
400
500
600
700
800
900

אין _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, דיין ענדערונגען וועלן צולייגן צו אַלע די לופּס יטערייטינג איבער די מאַפּע.

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, 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;
  }
}