Theming Bootstrap
يېڭى ئۇسلۇبتىكى Sass ئۆزگەرگۈچى مىقدارلىرى بىلەن Bootstrap 4 نى خاسلاشتۇرۇڭ.
dist
Bootstrap 3 دە ، باشتېما كۆپىنچە LESS ، ئىختىيارى CSS ۋە ھۆججەتلىرىمىزگە كىرگۈزگەن ئايرىم ئۇسلۇب ئۇسلۇبىدىكى ئۆزگىرىشچان قاپلاش ئارقىلىق قوزغىتىلدى . بەزى تىرىشچانلىقلار ئارقىلىق ، يادرولۇق ھۆججەتلەرگە تەگمەيلا Bootstrap 3 نىڭ كۆرۈنۈشىنى پۈتۈنلەي قايتىدىن لايىھىلەپ چىقالايدۇ. Bootstrap 4 تونۇش ، ئەمما سەل ئوخشىمايدىغان ئۇسۇل بىلەن تەمىنلەيدۇ.
ھازىر ، باشتېما Sass ئۆزگەرگۈچى مىقدار ، Sass خەرىتىسى ۋە ئىختىيارى CSS تەرىپىدىن ئورۇندىلىدۇ. بۇنىڭدىن باشقا مەخسۇس ئۇسلۇب ئۇسلۇبى يوق. ئۇنىڭ ئورنىغا ، ئىچىگە قاچىلانغان باشتېمىنى رېشاتكا ، سايە ۋە باشقىلار قوشالايسىز.
مەنبە Sass ھۆججىتىدىن پايدىلىنىپ ئۆزگەرگۈچى مىقدار ، خەرىتە ، ئارىلاشما ۋە باشقىلاردىن پايدىلىنىڭ.
مۇمكىنقەدەر Bootstrap نىڭ يادرولۇق ھۆججەتلىرىنى ئۆزگەرتىشتىن ساقلىنىڭ. Sass ئۈچۈن ، بۇ Bootstrap نى ئىمپورت قىلىدىغان ئۇسلۇب جەدۋىلىنى قۇرۇشنى كۆرسىتىدۇ ، شۇڭا ئۇنى ئۆزگەرتەلەيسىز ۋە كېڭەيتەلەيسىز. ئەگەر سىز npm غا ئوخشاش بوغچا باشقۇرغۇچىنى ئىشلىتىۋاتىسىز دەپ پەرەز قىلسىڭىز ، تۆۋەندىكى ھۆججەت قۇرۇلمىسى بولىدۇ:
ئەگەر بىزنىڭ ئەسلى ھۆججىتىمىزنى چۈشۈرۈپ ، ئورالما باشقۇرغۇچىنى ئىشلەتمىسىڭىز ، Bootstrap نىڭ ئەسلى ھۆججىتىنى ئۆزىڭىزنىڭكىدىن ساقلاپ ، بۇ قۇرۇلمىغا ئوخشايدىغان نەرسىنى قولدا تەڭشىمەكچى بولىسىز.
ئۆزىڭىزدە custom.scss
Bootstrap نىڭ مەنبە Sass ھۆججىتىنى ئەكىرىسىز. سىزنىڭ ئىككى خىل تاللىشىڭىز بار: Bootstrap نىڭ ھەممىسىنى ئۆز ئىچىگە ئالىدۇ ياكى لازىملىق زاپچاسلارنى تاللاڭ. بىز كېيىنكىلەرنى ئىلھاملاندۇرىمىز ، گەرچە زاپچاسلىرىمىزدا بەزى تەلەپ ۋە بېقىنىشلارنىڭ بارلىقىنى بىلىمىز. قىستۇرمىلىرىمىزغا يەنە بىر قىسىم JavaScript نى قوشۇشىڭىز كېرەك.
بۇ تەڭشەكنى جايىدا قىلسىڭىز ، Sass ئۆزگەرگۈچى مىقدار ۋە خەرىتىلەرنى خالىغانچە ئۆزگەرتەلەيسىز custom.scss
. ئېھتىياجغا ئاساسەن بۆلەكنىڭ ئاستىغا Bootstrap نىڭ زاپچاسلىرىنى قوشۇشقا باشلىيالايسىز // Optional
. ھۆججىتىمىزدىن تولۇق ئەكىرىش ساندۇقىنى bootstrap.scss
باشلىنىش نۇقتىسى قىلىپ ئىشلىتىشنى تەۋسىيە قىلىمىز.
Bootstrap 4 دىكى ھەر بىر Sass ئۆزگەرگۈچى مىقدار !default
Bootstrap نىڭ ئەسلى كودىنى ئۆزگەرتمەي تۇرۇپ ، ئۆزىڭىزنىڭ Sass دىكى ئۆزگەرگۈچى مىقدارنىڭ سۈكۈتتىكى قىممىتىنى قاپلىغىلى بولىدىغان بايراقنى ئۆز ئىچىگە ئالىدۇ. ئېھتىياجغا ئاساسەن ئۆزگەرگۈچى مىقدارنى كۆچۈرۈپ چاپلاڭ ، ئۇلارنىڭ قىممىتىنى ئۆزگەرتىڭ ۋە !default
بايراقنى ئېلىڭ. ئەگەر ئۆزگەرگۈچى مىقدار ئاللىبۇرۇن بېكىتىلگەن بولسا ، ئۇ Bootstrap دىكى سۈكۈتتىكى قىممەت بىلەن قايتا تەقسىملەنمەيدۇ.
ئوخشاش Sass ھۆججىتىدىكى ئۆزگەرگۈچى مىقدارلار سۈكۈتتىكى ئۆزگەرگۈچى مىقدارنىڭ ئالدى-كەينىدە كېلىدۇ. قانداقلا بولمىسۇن ، Sass ھۆججىتىنى قاپلىۋەتسىڭىز ، Bootstrap نىڭ Sass ھۆججىتىنى ئەكىرىشتىن بۇرۇن چوقۇم ئېشىپ كېتىشىڭىز كېرەك.
بۇ يەردە npm ئارقىلىق Bootstrap نى ئەكىرىش ۋە تۈزۈشتە ۋە background-color
ئۆزگەرتىدىغان بىر مىسال بار :color
<body>
Bootstrap دىكى ھەر قانداق ئۆزگەرگۈچى مىقدارغا ئېھتىياجلىق بولغاندا تەكرارلاڭ ، تۆۋەندىكى يەر شارى تاللانمىلىرىنىمۇ ئۆز ئىچىگە ئالىدۇ.
Bootstrap 4 بىر قانچە Sass خەرىتىسىنى ئۆز ئىچىگە ئالىدۇ ، مۇھىم قىممەت جۈپلىرى مۇناسىۋەتلىك CSS ئائىلىلىرىنى بارلىققا كەلتۈرۈشكە قولايلىق يارىتىدۇ. بىز Sass خەرىتىسىنى رەڭلىرىمىز ، كاتەكچە بۆلەكلىرىمىز ۋە باشقىلار ئۈچۈن ئىشلىتىمىز. Sass ئۆزگەرگۈچى مىقدارغا ئوخشاش ، بارلىق Sass خەرىتىلىرى !default
بايراقنى ئۆز ئىچىگە ئالىدۇ ، ئۇنى بېسىپ ئۆتۈپ ئۇزارتقىلى بولىدۇ.
بەزى Sass خەرىتىلىرىمىز سۈكۈتتىكى ھالەتتە قۇرۇق خەرىتىلەرگە بىرلەشتۈرۈلدى. بۇ بېرىلگەن Sass خەرىتىسىنى ئاسان كېڭەيتىش ئۈچۈن ئېلىپ بېرىلىدۇ ، ئەمما خەرىتىدىكى نەرسىلەرنى چىقىرىۋېتىش سەل قىيىنغا توختايدۇ.
خەرىتىمىزدە بار بولغان رەڭنى ئۆزگەرتىش ئۈچۈن $theme-colors
تۆۋەندىكى Sass ھۆججىتىڭىزگە تۆۋەندىكىنى قوشۇڭ:
يېڭى رەڭ $theme-colors
قوشۇش ئۈچۈن ، يېڭى ئاچقۇچ ۋە قىممەتنى قوشۇڭ:
$theme-colors
ياكى باشقا خەرىتىدىن رەڭلەرنى ئۆچۈرۈش ئۈچۈن ئىشلىتىڭ map-remove
:
Bootstrap بىز ئىشلەتكەن ۋە ئۆزىمىزنى كېڭەيتكەندە Sass خەرىتىسى ئىچىدە بەزى ئالاھىدە كۇنۇپكىلارنىڭ بارلىقىنى پەرەز قىلىدۇ. سىز كىرگۈزۈلگەن خەرىتىنى ئىختىيارىي قىلسىڭىز ، مەلۇم بىر Sass خەرىتىسىنىڭ ئاچقۇچى ئىشلىتىلىۋاتقان خاتالىقلارغا يولۇقۇشىڭىز مۇمكىن.
مەسىلەن ، بىز primary
، success
ۋە danger
كۇنۇپكىلارنى $theme-colors
ئۇلىنىش ، كۇنۇپكا ۋە شەكىل ھالىتى ئۈچۈن ئىشلىتىمىز. بۇ كۇنۇپكىلارنىڭ قىممىتىنى ئالماشتۇرۇشتا مەسىلە كۆرۈلمەسلىكى كېرەك ، ئەمما ئۇلارنى ئېلىۋېتىش Sass تۈزۈش مەسىلىسىنى كەلتۈرۈپ چىقىرىشى مۇمكىن. بۇ خىل ئەھۋال ئاستىدا ، سىز بۇ قىممەتلەردىن پايدىلىنىدىغان Sass كودىنى ئۆزگەرتىشىڭىز كېرەك.
Bootstrap بىر قانچە Sass ئىقتىدارىنى ئىشلىتىدۇ ، ئەمما ئادەتتىكى باشتېمىغا پەقەت بىر تارماق بۆلەكلا ماس كېلىدۇ. رەڭ خەرىتىسىدىن قىممەتكە ئېرىشىش ئۈچۈن ئۈچ ئىقتىدارنى ئۆز ئىچىگە ئالدۇق:
بۇلار Sass خەرىتىسىدىن v3 دىن رەڭ ئۆزگەرگۈچى مىقدارنى قانداق ئىشلەتكەنلىكىڭىزگە ئوخشاش بىر رەڭنى تاللىيالايسىز.
خەرىتىدىن مەلۇم دەرىجىدىكى رەڭگە ئېرىشىش ئۈچۈن بىزنىڭ يەنە بىر ئىقتىدارىمىز بار . $theme-colors
سەلبىي قىممەتلەر رەڭنى سۇسلاشتۇرىدۇ ، يۇقىرى قاتلاملار قاراڭغۇلىشىدۇ.
ئەمەلىيەتتە ، سىز بۇ ئىقتىدارنى چاقىرىپ ، رەڭنىڭ ئىسمى $theme-colors
(مەسىلەن ، دەسلەپكى ياكى خەتەر) ۋە سان سەۋىيىسىدىن ئىبارەت ئىككى پارامېتىردا ئۆتىسىز.
كەلگۈس��دە قوشۇمچە ئىقتىدارلار ياكى ئۆزىڭىزنىڭ خاس Sass نى قوشسىڭىز بولىدۇ ، ئەگەر تېخىمۇ كۆپ سۆزلىمەكچى بولسىڭىز ، قوشۇمچە Sass خەرىتىسىنىڭ سەۋىيىلىك ئىقتىدارلىرىنى ھاسىل قىلالايسىز.
بىز Bootstrap غا قوشقان قوشۇمچە ئىقتىدار بولسا رەڭ سېلىشتۇرما ئىقتىدارى ، color-yiq
. ئۇ YIQ رەڭ بوشلۇقىدىن#fff
پايدىلىنىپ ، ئاساسىي رەڭگە ئاساسەن سۇس ( ) ياكى قېنىق ( #111
) سېلىشتۇرما رەڭنى ئاپتوماتىك قايتۇرىدۇ . بۇ ئىقتىدار سىز كۆپ سىنىپ ھاسىل قىلىۋاتقان ئارىلاشما ياكى ئايلانما ھالقىلار ئۈچۈن ئالاھىدە پايدىلىق.
مەسىلەن ، $theme-colors
خەرىتىمىزدىن رەڭلىك رەسىم ھاسىل قىلىش:
ئۇنى بىر قېتىملىق سېلىشتۇرما ئېھتىياج ئۈچۈنمۇ ئىشلىتىشكە بولىدۇ:
بىزنىڭ رەڭ خەرىتە ئىقتىدارىمىز بىلەن ئاساسىي رەڭنى بەلگىلىيەلەيسىز:
Bootstrap 4 نى ئۆزىمىزنىڭ خاسلاشتۇرۇلغان ئۆزگەرگۈچى مىقدار ھۆججىتى بىلەن خاسلاشتۇرۇڭ ھەمدە يېڭى $enable-*
Sass ئۆزگەرگۈچى مىقدارلار بىلەن يەرشارى CSS مايىللىقىنى ئاسانلا ئالماشتۇرۇڭ. ئۆزگەرگۈچى مىقدارنىڭ قىممىتىنى قاپلاپ 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 ھەرخىل زاپچاسلاردا ئالدىن بېكىتىلگەن s نى قوزغىتىدۇ . |
$enable-hover-media-query |
true ياكى false (سۈكۈتتىكى) |
ۋاقتى ئۆتكەن |
$enable-grid-classes |
true (سۈكۈتتىكى) ياكىfalse |
تور سىستېمىسى ئۈچۈن CSS سىنىپىنىڭ ئەۋلادلىرىنى قوزغىتىدۇ (مەسىلەن ، ، .container قاتارلىقلار )..row .col-md-1 |
$enable-caret |
true (سۈكۈتتىكى) ياكىfalse |
ساختا ئېلېمېنت پەرۋىشىنى قوزغىتىدۇ .dropdown-toggle . |
$enable-print-styles |
true (سۈكۈتتىكى) ياكىfalse |
بېسىپ چىقىرىشنى ئەلالاشتۇرۇش ئۇسلۇبىنى قوزغىتىدۇ. |
Bootstrap نىڭ نۇرغۇن زاپچاسلىرى ۋە ئەسلىھەلىرى Sass خەرىتىسىدە ئېنىقلانغان بىر يۈرۈش رەڭلەر ئارقىلىق ياسالغان. بۇ خەرىتىنى ساسقا ئايلاندۇرۇپ ، بىر يۈرۈش قائىدىلەرنى تېز ھاسىل قىلغىلى بولىدۇ.
Bootstrap 4 دىكى بارلىق رەڭلەر Sass ئۆزگەرگۈچى مىقدار ۋە scss/_variables.scss
ھۆججىتىمىزدىكى Sass خەرىتىسى سۈپىتىدە تەمىنلىنىدۇ. بۇ كېيىنكى كىچىك تارقىتىلمىلاردا كېڭەيتىلىپ ، بىز ئاللىبۇرۇن كىرگۈزگەن كۈلرەڭ پالتىغا ئوخشاش قوشۇمچە سايە قوشۇلىدۇ.
بۇلارنى Sass دا قانداق ئىشلىتەلەيسىز:
تەڭشەشcolor
ۋە background-color
. _
كەلگۈسىدە بىز تۆۋەندىكى كۈلرەڭ رەڭلەرنى قىلغىنىمىزدەك ، ھەر بىر رەڭنىڭ سايىسى ئۈچۈن Sass خەرىتىسى ۋە ئۆزگەرگۈچى مىقدار بىلەن تەمىنلەشنى مەقسەت قىلىمىز.
بىز ھەر خىل رەڭلەرنىڭ بىر قىسمىنى ئىشلىتىپ ، رەڭ لايىھىسىنى ھاسىل قىلىش ئۈچۈن كىچىكرەك رەڭلىك پالتا ھاسىل قىلىمىز ، بۇ scss/_variables.scss
ھۆججەتتە Sass ئۆزگەرگۈچى مىقدار ۋە Sass خەرىتىسى سۈپىتىدە ئىشلىتىلىدۇ.
كېڭەيتىلگەن كۈلرەڭ ئۆزگەرگۈچى مىقدار ۋە Sass خەرىتىسى scss/_variables.scss
تۈرىڭىزدىكى ئىزچىل كۈلرەڭ رەڭگە ماس كېلىدۇ.
ئىچىدە _variables.scss
، بىزنىڭ رەڭ ئۆزگەرگۈچى مىقدار ۋە Sass خەرىتىسىنى تاپالايسىز. بۇ يەردە $colors
ساس خەرىتىسىنىڭ بىر مىسالى:
خەرىتە ئىچىدىكى قىممەتلەرنى قوشۇش ، ئۆچۈرۈش ياكى ئۆزگەرتىش ئارقىلىق ئۇلارنىڭ باشقا نۇرغۇن زاپچاسلاردا قانداق ئىشلىتىلىدىغانلىقىنى يېڭىلاڭ. بەختكە قارشى ، بۇ ۋاقىتتا ھەر بىر زاپچاس بۇ Sass خەرىتىسىنى ئىشلىتەلمەيدۇ. كەلگۈسىدىكى يېڭىلانمىلار بۇنىڭدىن كېيىن ياخشىلىنىشقا تىرىشىدۇ. شۇ ۋاقىتقىچە ، ${color}
ئۆزگەرگۈچى مىقدار ۋە بۇ Sass خەرىتىسىنى ئىشلىتىشنى پىلانلاڭ.
Bootstrap نىڭ نۇرغۇن زاپچاسلىرى ۋە ئەسلىھەلىرى @each
Sass خەرىتىسىدە تەكرارلىنىدىغان ھالقىلار بىلەن ياسالغان. بۇ بىزنىڭ زاپچاسنىڭ ۋارىيانتلىرىنى ھاسىل قىلىشىمىز $theme-colors
ۋە ھەر بىر بۆسۈش ئېغىزىغا ئىنكاسچان ۋارىيانتلارنى يارىتىشىمىزغا پايدىلىق. بۇ Sass خەرىتىسىنى خاسلاشتۇرسىڭىز ۋە قايتا ھاسىل قىلسىڭىز ، ئۆزگىرىشلىرىڭىزنىڭ بۇ ھالقىلاردا ئەكىس ئەتكەنلىكىنى ئاپتوماتىك كۆرىسىز.
Bootstrap نىڭ نۇرغۇن زاپچاسلىرى ئاساسى ئۆزگەرتكۈچ سىنىپى ئۇسۇلى بىلەن ياسالغان. بۇ ئۇسلۇبنىڭ كۆپ قىسمىنىڭ ئاساسى سىنىپ (مەسىلەن ، .btn
) نى ئۆز ئىچىگە ئالىدىغانلىقىنى بىلدۈرىدۇ ، ئۇسلۇبنىڭ ئۆزگىرىشى پەقەت ئۆزگەرتىش سىنىپى بىلەنلا چەكلىنىدۇ (مەسىلەن ، .btn-danger
). بۇ ئۆزگەرتكۈچ دەرسلىرى $theme-colors
خەرىتە ئارقىلىق ئۆزگەرتىلگەن سىنىپلىرىمىزنىڭ سانى ۋە نامىنى خاسلاشتۇرۇش ئۈچۈن ياسالغان.
بۇ يەردە خەرىتە ئۈستىدە ئايلىنىپ ، زاپچاس ۋە بارلىق ئارقا كۆرۈنۈش ئەسلىھەلىرىمىزنى $theme-colors
ئۆزگەرتكۈچ ھاسىل قىلىدىغانلىقىمىزنىڭ ئىككى مىسالى بار..alert
.bg-*
بۇ Sass ھالقىلىرى رەڭ خەرىتىسى بىلەنلا چەكلەنمەيدۇ. زاپچاسلىرىڭىز ياكى ئەسلىھەلىرىڭىزنىڭ ئىنكاسچان ئۆزگىرىشىنى ھاسىل قىلالايسىز. مىسالغا ئالساق ، Sass خەرىتىسىگە بىر @each
ھالقا ئارىلاشتۇرىمىز.$grid-breakpoints
ئەگەر ئۆزگەرتىشىڭىزگە توغرا كەلسە ، ئۆزگەرتىشلىرىڭىز $grid-breakpoints
بۇ خەرىتە تەكرارلانغان بارلىق ھالقىلارغا ماس كېلىدۇ.
Bootstrap 4 تۈزۈلگەن CSS دىكى 20 نەچچە CSS خاسلىقى (ئۆزگەرگۈچى مىقدار) نى ئۆز ئىچىگە ئالىدۇ . بۇلار تور كۆرگۈڭىزنىڭ تەكشۈرگۈچىسى ، كود ساندۇقى ياكى ئادەتتىكى ئەسلى تىپتا ئىشلىگەندە باشتېمىمىزنىڭ رەڭگى ، بۆسۈش ئېغىزى ۋە دەسلەپكى خەت ساندۇقى قاتارلىق كۆپ ئىشلىتىلىدىغان قىممەتلەرنى ئاسان زىيارەت قىلالايدۇ.
بۇ يەردە بىز ئۆز ئىچىگە ئالغان ئۆزگەرگۈچى مىقدارلار بار (دىققەت قىلىڭ :root
). _root.scss
ئۇلار بىزنىڭ ھۆججىتىمىزگە جايلاشقان .
CSS ئۆزگەرگۈچى مىقدار Sass نىڭ ئۆزگەرگۈچى مىقدارلىرىغا ئوخشاش جانلىقلىقنى تەمىنلەيدۇ ، ئەمما توركۆرگۈچكە يەتكۈزۈلۈشتىن بۇرۇن تۈزۈشنىڭ ھاجىتى يوق. مەسىلەن ، بۇ يەردە بىز بېتىمىزنىڭ خەت نۇسخىسىنى ۋە CSS ئۆزگەرگۈچى مىقدار بىلەن ئۇلىنىش ئۇسلۇبىنى ئەسلىگە كەلتۈرىمىز.
مېدىيا سوئالىڭىزدا بۆسۈشچان ئۆزگەرگۈچى مىقدارنى ئىشلىتەلەيسىز: