Source

Theming Bootstrap

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

تونۇشتۇرۇش

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

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

Sass

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

// 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";

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

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

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

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

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

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

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

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

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

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

بىز 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ھەر خىل زاپچاسلاردا ئالدىن بېكىتىلگەن ئۇسلۇبلارنى قوزغىتىدۇ .
$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(سۈكۈتتىكى) trueچىقىرىۋېتىشنى پىلانلىغان ۋاقتى ئۆتكەن ئارىلاشمىلار ۋە ئىقتىدارلارنى ئىشلەتكەندە ئاگاھلاندۇرۇش كۆرسىتىشكە تەڭشەڭ v5.

رەڭ

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

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

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

كۆك
Indigo
بىنەپشە
ھالرەڭ
قىزىل
ئاپېلسىن
سېرىق
يېشىل
Teal
Cyan

بۇلارنى 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
Secondary
مۇۋەپپەقىيەت
خەتەر
ئاگاھلاندۇرۇش
ئۇچۇر
نۇر
قاراڭغۇ

كۈلرەڭ

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

100
200
300
400
500
600
700
800
900

ئىچىدە 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", 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);
  }
}