Theming Bootstrap

يېڭى ئۇسلۇبتىكى Sass ئۆزگەرگۈچى مىقدارلىرى بىلەن Bootstrap 4 نى خاسلاشتۇرۇڭ.

تونۇشتۇرۇش

Bootstrap 3 دە ، تېما ئاساسلىقى LESS ، ئىختىيارى CSS ۋە distھۆججەتلىرىمىزگە كىرگۈزگەن ئايرىم ئۇسلۇب ئۇسلۇبىدىكى ئۆزگىرىشچان قاپلاش ئارقىلىق قوزغىتىلدى. بەزى تىرىشچانلىقلار ئارقىلىق ، يادرولۇق ھۆججەتلەرگە تەگمەيلا Bootstrap 3 نىڭ كۆرۈنۈشىنى پۈتۈنلەي قايتىدىن لايىھىلەپ چىقالايدۇ. Bootstrap 4 تونۇش ، ئەمما سەل ئوخشىمايدىغان ئۇسۇل بىلەن تەمىنلەيدۇ.

ھازىر ، باشتېما Sass ئۆزگەرگۈچى مىقدار ، Sass خەرىتىسى ۋە ئىختىيارى CSS تەرىپىدىن ئورۇندىلىدۇ. بۇنىڭدىن باشقا مەخسۇس ئۇسلۇب ئۇسلۇبى يوق. ئۇنىڭ ئورنىغا ، ئىچىگە قاچىلانغان باشتېمىنى رېشاتكا ، سايە ۋە باشقىلار قوشالايسىز.

Sass

مەنبە Sass ھۆججىتىدىن پايدىلىنىپ ، ئۆزىڭىزنىڭ مۈلۈك تۇرۇبا يولى ئارقىلىق Sass نى تۈزگەندە ئۆزگىرىشچان ، خەرىتە ، ئارىلاشما ۋە باشقىلاردىن پايدىلىنىڭ.

ھۆججەت قۇرۇلمىسى

مۇمكىنقەدەر Bootstrap نىڭ يادرولۇق ھۆججەتلىرىنى ئۆزگەرتىشتىن ساقلىنىڭ. Sass ئۈچۈن ، بۇ Bootstrap نى ئىمپورت قىلىدىغان ئۇسلۇب جەدۋىلىنى قۇرۇشنى كۆرسىتىدۇ ، شۇڭا ئۇنى ئۆزگەرتەلەيسىز ۋە كېڭەيتەلەيسىز. ئەگەر سىز npm غا ئوخشاش بوغچا باشقۇرغۇچىنى ئىشلىتىۋاتىسىز دەپ پەرەز قىلسىڭىز ، تۆۋەندىكى ھۆججەت قۇرۇلمىسى بولىدۇ:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

ئەگەر بىزنىڭ ئەسلى ھۆججىتىمىزنى چۈشۈرۈپ ، ئورالما باشقۇرغۇچىنى ئىشلەتمىسىڭىز ، Bootstrap نىڭ ئەسلى ھۆججىتىنى ئۆزىڭىزنىڭكىدىن ساقلاپ ، بۇ قۇرۇلمىغا ئوخشايدىغان نەرسىنى قولدا تەڭشىمەكچى بولىسىز.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

ئەكىرىش

ئۆزىڭىزدە custom.scssBootstrap نىڭ مەنبە Sass ھۆججىتىنى ئەكىرىسىز. سىزنىڭ ئىككى خىل تاللىشىڭىز بار: Bootstrap نىڭ ھەممىسىنى ئۆز ئىچىگە ئالىدۇ ياكى لازىملىق زاپچاسلارنى تاللاڭ. بىز كېيىنكىلەرنى ئىلھاملاندۇرىمىز ، گەرچە زاپچاسلىرىمىزدا بەزى تەلەپ ۋە بېقىنىشلارنىڭ بارلىقىنى بىلىمىز. قىستۇرمىلىرىمىزغا يەنە بىر قىسىم JavaScript نى قوشۇشىڭىز كېرەك.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@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";

بۇ تەڭشەكنى جايىدا قىلسىڭىز ، Sass ئۆزگەرگۈچى مىقدار ۋە خەرىتىلەرنى خالىغانچە ئۆزگەرتەلەيسىز custom.scss. ئېھتىياجغا ئاساسەن بۆلەكنىڭ ئاستىغا Bootstrap نىڭ زاپچاسلىرىنى قوشۇشقا باشلىيالايسىز // Optional. ھۆججىتىمىزدىن تولۇق ئەكىرىش ساندۇقىنى bootstrap.scssباشلىنىش نۇقتىسى قىلىپ ئىشلىتىشنى تەۋسىيە قىلىمىز.

ئۆزگەرگۈچى مىقدار

Bootstrap دىكى ھەر بىر Sass ئۆزگەرگۈچى مىقدار !defaultبايراقنى ئۆز ئىچىگە ئالىدۇ. ئېھتىياجغا ئاساسەن ئۆزگەرگۈچى مىقدارنى كۆچۈرۈپ چاپلاڭ ، ئۇلارنىڭ قىممىتىنى ئۆزگەرتىڭ ۋە !defaultبايراقنى ئېلىڭ. ئەگەر ئۆزگەرگۈچى مىقدار ئاللىبۇرۇن بېكىتىلگەن بولسا ، ئۇ Bootstrap دىكى سۈكۈتتىكى قىممەت بىلەن قايتا تەقسىملەنمەيدۇ.

سىز Bootstrap نىڭ ئۆزگەرگۈچى مىقدارلىرىنىڭ تولۇق تىزىملىكىنى تاپالايسىز scss/_variables.scss. بەزى ئۆزگەرگۈچى مىقدارلار تەڭشەلدى null، بۇ ئۆزگەرگۈچى مىقدارلار سىزنىڭ سەپلىمىسىڭىزدە ئېشىپ كەتمىسە خاسلىقنى چىقارمايدۇ.

ئۆزگەرگۈچى مىقدارلار بىزنىڭ فۇنكسىيەمىز ، ئۆزگەرگۈچى مىقدار ۋە ئارىلاشمىلار ئىمپورت قىلىنغاندىن كېيىن كېلىشى كېرەك ، ئەمما باشقا ئىمپورتتىن بۇرۇن.

بۇ يەردە npm ئارقىلىق Bootstrap نى ئىمپورت قىلغاندا ۋە تۈزگەندە background-colorۋە ئۆزگەرتىدىغان بىر مىسال بار color:<body>

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

تۆۋەندىكى يەر شارى تاللاشلىرىنى ئۆز ئىچىگە ئالغان Bootstrap دىكى ھەر قانداق ئۆزگەرگۈچى مىقدارغا ئېھتىياجلىق بولغاندا تەكرارلاڭ.

باشلاش تۈرىمىز بىلەن npm ئارقىلىق Bootstrap بىلەن باشلاڭ! Twbs / bootstrap-npm-starter قېلىپ ئامبىرىغا بېرىپ ، ئۆزىڭىزنىڭ npm تۈرىدە Bootstrap نى قانداق قۇرۇش ۋە خاسلاشتۇرۇشنى كۆرۈڭ. Sass تۈزگۈچى ، Autoprefixer ، Stylelint ، PurgeCSS ۋە Bootstrap سىنبەلگىسىنى ئۆز ئىچىگە ئالىدۇ.

خەرىتە ۋە ئايلانما

Bootstrap 4 بىر قانچە Sass خەرىتىسىنى ئۆز ئىچىگە ئالىدۇ ، مۇھىم قىممەت جۈپلىرى مۇناسىۋەتلىك CSS ئائىلىلىرىنى بارلىققا كەلتۈرۈشكە قولايلىق يارىتىدۇ. بىز Sass خەرىتىسىنى رەڭلىرىمىز ، كاتەكچە بۆلەكلىرىمىز ۋە باشقىلار ئۈچۈن ئىشلىتىمىز. Sass ئۆزگەرگۈچى مىقدارغا ئوخشاش ، بارلىق Sass خەرىتىلىرى !defaultبايراقنى ئۆز ئىچىگە ئالىدۇ ، ئۇنى بېسىپ ئۆتۈپ ئۇزارتقىلى بولىدۇ.

بەزى Sass خەرىتىلىرىمىز سۈكۈتتىكى ھالەتتە قۇرۇق خەرىتىلەرگە بىرلەشتۈرۈلدى. بۇ بېرىلگەن 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";
...

لازىملىق كۇنۇپكىلار

Bootstrap بىز ئىشلەتكەن ۋە ئۆزىمىزنى كېڭەيتكەندە Sass خەرىتىسى ئىچىدە بەزى ئالاھىدە كۇنۇپكىلارنىڭ بارلىقىنى پەرەز قىلىدۇ. سىز كىرگۈزۈلگەن خەرىتىنى ئىختىيارىي قىلسىڭىز ، مەلۇم بىر Sass خەرىتىسىنىڭ ئاچقۇچى ئىشلىتىلىۋاتقان خاتالىقلارغا يولۇقۇشىڭىز مۇمكىن.

مەسىلەن ، بىز primary، successۋە dangerكۇنۇپكىلارنى $theme-colorsئۇلىنىش ، كۇنۇپكا ۋە شەكىل ھالىتى ئۈچۈن ئىشلىتىمىز. بۇ كۇنۇپكىلارنىڭ قىممىتىنى ئالماشتۇرۇشتا مەسىلە كۆرۈلمەسلىكى كېرەك ، ئەمما ئۇلارنى ئېلىۋېتىش Sass تۈزۈش مەسىلىسىنى كەلتۈرۈپ چىقىرىشى مۇمكىن. بۇ خىل ئەھۋال ئاستىدا ، سىز بۇ قىممەتلەردىن پايدىلىنىدىغان Sass كودىنى ئۆزگەرتىشىڭىز كېرەك.

ئىقتىدارلىرى

Bootstrap بىر قانچە 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 نى قوشسىڭىز بولىدۇ ، ئەگەر تېخىمۇ كۆپ سۆزلىمەكچى بولسىڭىز ، قوشۇمچە 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 دىكى تەگلىك رەسىملەرنى توغرا كۆرسىتىش ئۈچۈن بۇ ھەرپلەردىن قېچىش كېرەك. ئىقتىدارنى ئىشلەتكەندە ، URI سانلىق مەلۇماتلىرىنى نەقىل كەلتۈرۈش كېرەك.>#escape-svg

ئىقتىدار قوشۇش ۋە ئېلىش

بىز CSS ئىقتىدارىنى ئوراش ئۈچۈن addۋە ئىقتىدارلارنى ئىشلىتىمىز . بۇ ئىقتىدارلارنىڭ ئاساسلىق مەقسىتى «بىرلىكسىز» قىممەت ئىپادىلەشكە ئۆتكەندە خاتالىقلاردىن ساقلىنىش. بۇنىڭغا ئوخشاش ئىپادىلەر ماتېماتىكىلىق توغرا بولسىمۇ ، بارلىق توركۆرگۈچلەردە خاتالىق قايتۇرىدۇ.subtractcalc0calccalc(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);
}

Sass تاللانمىلىرى

Bootstrap 4 نى ئۆزىمىزنىڭ خاسلاشتۇرۇلغان ئۆزگەرگۈچى مىقدار ھۆججىتى بىلەن خاسلاشتۇرۇڭ ھەمدە يېڭى $enable-*Sass ئۆزگەرگۈچى مىقدارلار بىلەن يەرشارى CSS مايىللىقىنى ئاسانلا ئالماشتۇرۇڭ. ئۆزگەرگۈچى مىقدارنىڭ قىممىتىنى قاپلاپ npm run test، ئېھتىياجغا قاراپ تولۇقلاڭ.

scss/_variables.scssBootstrap ھۆججىتىدىكى يەرشارىدىكى مۇھىم تاللاشلار ئۈچۈن بۇ ئۆزگەرگۈچى مىقدارلارنى تاپالايسىز ۋە خاسلاشتۇرالايسىز .

ئۆزگىرىشچان	قىممەت	چۈشەندۈرۈش
`$spacer`	`1rem`(سۈكۈتتىكى) ياكى ھەر قانداق قىممەت> 0	بىزنىڭ بوشلۇق ئەسلىھەلىرىمىزنى پروگرامما خاراكتېرلىك ھاسىل قىلىدىغان سۈكۈتتىكى بوشلۇق قىممىتىنى بەلگىلەيدۇ .
`$enable-rounded`	`true`(سۈكۈتتىكى) ياكى`false`	`border-radius`ھەر خىل زاپچاسلاردا ئالدىن بېكىتىلگەن ئۇسلۇبلارنى قوزغىتىدۇ .
`$enable-shadows`	`true`ياكى `false`(سۈكۈتتىكى)	`box-shadow`ھەر خىل زاپچاسلاردا ئالدىن بېكىتىلگەن بېزەك ئۇسلۇبىنى قوزغىتىدۇ . `box-shadow`فوكۇس ھالىتى ئۈچۈن ئىشلىتىلىدىغان s غا تەسىر كۆرسەتمەيدۇ .
`$enable-gradients`	`true`ياكى `false`(سۈكۈتتىكى)	`background-image`ھەرخىل زاپچاسلاردىكى ئۇسلۇبلار ئارقىلىق ئالدىن بېكىتىلگەن رېشاتكىلارنى قوزغىتىدۇ .
`$enable-transitions`	`true`(سۈكۈتتىكى) ياكى`false`	`transition`ھەرخىل زاپچاسلاردا ئالدىن بېكىتىلگەن s نى قوزغىتىدۇ .
`$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`	`false`چىقىرىۋېتىشنى پىلانلىغان ۋاقتى ئۆتكەن ئارىلاشمىلار ۋە ئىقتىدارلارنى ئىشلەتكەندە ئاگاھلاندۇرۇشنى يوشۇرۇشقا تەڭشەڭ `v5`.

رەڭ

Bootstrap نىڭ نۇرغۇن زاپچاسلىرى ۋە ئەسلىھەلىرى Sass خەرىتىسىدە ئېنىقلانغان بىر يۈرۈش رەڭلەر ئارقىلىق ياسالغان. بۇ خەرىتىنى ساسقا ئايلاندۇرۇپ ، بىر قاتار قائىدىلەرنى تېز ھاسىل قىلغىلى بولىدۇ.

بارلىق رەڭلەر

Bootstrap 4 دىكى بارلىق رەڭلەر Sass ئۆزگەرگۈچى مىقدار ۋە scss/_variables.scssھۆججەتتىكى Sass خەرىتىسى سۈپىتىدە بار. بۇ كېيىنكى كىچىك تارقىتىلمىلاردا كېڭەيتىلىپ ، بىز ئاللىبۇرۇن كىرگۈزگەن كۈلرەڭ پالتىغا ئوخشاش قوشۇمچە سايە قوشۇلىدۇ.

$ كۆك # 007bff

$ indigo # 6610f2

$ بىنەپشە # 6f42c1

$ ھالرەڭ # e83e8c

$ red # dc3545

$ ئاپېلسىن # fd7e14

$ سېرىق # ffc107

$ green # 28a745

$ teal # 20c997

$ cyan # 17a2b8

بۇلارنى Sass دا قانداق ئىشلىتەلەيسىز:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

تەڭشەشcolor ۋە background-color. _

كەلگۈسىدە بىز تۆۋەندىكى كۈلرەڭ رەڭلەرنى قىلغىنىمىزدەك ، ھەر بىر رەڭنىڭ سايىسى ئۈچۈن Sass خەرىتىسى ۋە ئۆزگەرگۈچى مىقدار بىلەن تەمىنلەشنى مەقسەت قىلىمىز.

ئۇسلۇب رەڭلىرى

بىز ھەر خىل رەڭلەرنىڭ بىر قىسمىنى ئىشلىتىپ ، رەڭ لايىھىسىنى ھاسىل قىلىش ئۈچۈن كىچىكرەك رەڭلىك پالتا ھاسىل قىلىمىز ، بۇ يەنە Sass ئۆزگەرگۈچى مىقدار ۋە Bootstrap scss/_variables.scssھۆججىتىدىكى Sass خەرىتىسى سۈپىتىدە ئىشلىتىلىدۇ.

$ primary # 007bff

$ ئىككىلەمچى # 6c757d

$ مۇۋەپپەقىيەت # 28a745

$ خەتەر # dc3545

$ ئاگاھلاندۇرۇش # ffc107

$ ئۇچۇر # 17a2b8

$ light # f8f9fa

$ قاراڭغۇ # 343a40

كۈلرەڭ

كېڭەيتىلگەن كۈلرەڭ ئۆزگەرگۈچى مىقدار ۋە Sass خەرىتىسى scss/_variables.scssتۈرىڭىزدىكى ئىزچىل كۈلرەڭ رەڭگە ماس كېلىدۇ. شۇنىڭغا دىققەت قىلىڭكى ، بۇلار «قالتىس كۈلرەڭ» بولۇپ ، نېيترال كۈلرەڭگە ئەمەس ، ئىنچىكە كۆك رەڭگە مايىل.

$ 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

ئىچىدە scss/_variables.scss، Bootstrap نىڭ رەڭ ئۆزگەرگۈچى مىقدارلىرى ۋە Sass خەرىتىسىنى تاپالايسىز. بۇ يەردە $colorsساس خەرىتىسىنىڭ بىر مىسالى:

$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 نىڭ نۇرغۇن زاپچاسلىرى ۋە ئەسلىھەلىرى @eachSass خەرىتىسىدە تەكرارلىنىدىغان ھالقىلار بىلەن ياسالغان. بۇ بىزنىڭ زاپچاسنىڭ ۋارىيانتلىرىنى ھاسىل قىلىشىمىز $theme-colorsۋە ھەر بىر بۆسۈش ئېغىزىغا ئىنكاسچان ۋارىيانتلارنى يارىتىشىمىزغا پايدىلىق. بۇ Sass خەرىتىسىنى خاسلاشتۇرسىڭىز ۋە قايتا ھاسىل قىلسىڭىز ، ئۆزگىرىشلىرىڭىزنىڭ بۇ ھالقىلاردا ئەكس ئەتكەنلىكىنى ئاپتوماتىك كۆرىسىز.

ئۆزگەرتكۈچ

Bootstrap نىڭ نۇرغۇن زاپچاسلىرى ئاساسى ئۆزگەرتكۈچ سىنىپى ئۇسۇلى بىلەن ياسالغان. بۇ ئۇسلۇبنىڭ كۆپ قىسمىنىڭ ئاساسى سىنىپ (مەسىلەن ، .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);
}

Responsive

بۇ Sass ھالقىلىرى رەڭ خەرىتىسى بىلەنلا چەكلەنمەيدۇ. زاپچاسلىرىڭىز ياكى ئەسلىھەلىرىڭىزنىڭ ئىنكاسچان ئۆزگىرىشىنى ھاسىل قىلالايسىز. مىسالغا ئالساق ، Sass خەرىتىسىگە بىر @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 دىكى 20 نەچچە 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", "Liberation 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);
}

Breakpoint ئۆزگەرگۈچى مىقدار

بىز ئەسلىدە CSS ئۆزگەرگۈچى مىقدارلىرىمىزغا بۆسۈش ھاسىل قىلغان بولساقمۇ ، مەسىلەن ، --breakpoint-mdمېدىيا سوئاللىرىدا بۇلار قوللىمايدۇ ، ئەمما ئۇلار يەنىلا مېدىيا سوئاللىرىدىكى قائىدە ئىچىدە ئىشلىتىلىدۇ. بۇ بۆسۈشچان ئۆزگەرگۈچى مىقدارلار JavaScript ئارقىلىق ئىشلىتەلەيدىغان بولغاچقا ، قالاق ماسلىشىشچانلىقى ئۈچۈن تۈزۈلگەن CSS دا ساقلىنىدۇ. تەپسىلاتىنى تېخىمۇ كۆپ بىلىۋېلىڭ .

قوللىمايدىغان نەرسىنىڭ بىر مىسالى :

@media (min-width: var(--breakpoint-sm)) {
  ...
}

قوللايدىغان نەرسىنىڭ بىر مىسالى :

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}