Тема башлау
Easyиңел тема һәм компонент үзгәрүләре өчен глобаль стиль өстенлекләре өчен Bootstrap 4-ны безнең яңа урнаштырылган Sass үзгәрүләре белән көйләгез.
dist
Bootstrap 3-та тема күбесенчә LESS-ның үзгәрүчән өстәмәләре, махсус CSS һәм без үз файлларыбызга кертелгән аерым тема стиле таблицасы белән идарә ителде . Берникадәр тырышлык белән, төп файлларга кагылмыйча, Bootstrap 3 күренешен тулысынча яңадан ясарга була. Bootstrap 4 таныш, ләкин бераз башка караш бирә.
Хәзер, тема Sass үзгәрүчәннәре, Sass карталары һәм махсус CSS белән башкарыла. Бүтән тема стиле таблицасы юк; киресенчә, сез урнаштырылган теманы градиентлар, күләгәләр һәм башкалар өстәргә мөмкинлек бирә аласыз.
Variзгәрешләр, карталар, миксиннар һәм башкалардан файдалану өчен безнең чыганак Sass файлларын кулланыгыз.
Мөмкин булганда, Bootstrap-ның төп файлларын үзгәртүдән сакланыгыз. Sass өчен, бу Bootstrap импортлаган үз стиль таблицасын булдыру дигән сүз, сез аны үзгәртә һәм киңәйтә аласыз. Npm кебек пакет менеджерын кулланасыз дип уйласагыз, сезнең файл структурасы шундый булыр:
Әгәр дә сез безнең чыганак файлларны йөкләгән булсагыз һәм пакет менеджерын кулланмыйсыз икән, сез Bootstrap чыганак файлларын үзегезнекеннән саклап, бу структурага охшаган нәрсәне кул белән урнаштырырга теләрсез.
Сездә custom.scss
Bootstrap чыганагы Sass файлларын импортлыйсыз. Сездә ике вариант бар: бөтен Bootstrapны кертегез, яки кирәкле өлешләрне сайлагыз. Соңгысын дәртләндерәбез, гәрчә безнең компонентлар арасында кайбер таләпләр һәм бәйләнешләр бар. Сезгә шулай ук безнең плагиннар өчен JavaScript кертергә кирәк булачак.
Бу көйләү урынында сез Sass үзгәрүчәннәрен һәм карталарны үзгәртә аласыз custom.scss
. // Optional
Сез шулай ук кирәк булганда бүлек астына Bootstrap өлешләрен өсти башлый аласыз . Файлдан тулы импорт стакасын 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-ны безнең урнаштырылган үзгәрешләр файллары белән көйләгез һәм глобаль CSS өстенлекләрен яңа $enable-*
Sass үзгәрүчәннәре белән җиңел алыштырыгыз. Aзгәрүченең кыйммәтен кире кагарга һәм 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 картасы. Бу өстәмә күләгәләр өстәү өчен, киләсе кечкенә чыгарылышларда киңәйтеләчәк, без керткән соры палитра кебек .
Менә сез аларны Сасста ничек куллана аласыз:
Төсләр өчен файдалы класслар көйләү өчен дә color
бар background-color
.
Киләчәктә без астагы соры төсләр белән эшләгән кебек, Sass карталарын һәм һәр төснең күләгәсе өчен үзгәрүчәннәрне тәкъдим итәрбез.
Без төс схемаларын ясау өчен кечерәк төс палитрасын булдыру өчен барлык төсләрнең бер өлешен кулланабыз, шулай ук Sass үзгәрүчәннәре һәм безнең scss/_variables.scss
файлда Sass картасы.
scss/_variables.scss
Сезнең проект буенча соры төсләрнең эзлекле күләгәсе өчен киң соры үзгәрүләр җыелмасы һәм Sass картасы .
Эчтә _variables.scss
, безнең төс үзгәрүләрен һәм Сасс картасын табарсыз. $colors
Менә Сасс картасының мисалы :
Карталар эчендә кыйммәтләрне өстәгез, бетерегез яки үзгәртегез, алар башка компонентларда ничек кулланылганнарын яңарту өчен. Кызганычка каршы, бу вакытта һәрбер компонент бу Sass картасын кулланмый. Киләчәк яңартулар моны яхшыртырга тырышачак. Шул вакытка кадәр ${color}
үзгәрүчәннәрне һәм бу Сасс картасын кулланырга планлаштырыгыз.
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 эчендә ике дистәгә якын CSS махсус үзлекләрен (үзгәрүчәннәрне) үз эченә ала . Бу безнең браузер инспекторында эшләгәндә, тема төсләре, нокталар, төп шрифт стеклары кебек еш кулланыла торган кыйммәтләргә җиңел керү мөмкинлеген бирә.
Менә без кертелгән үзгәрүчәннәр (игътибар итегез, :root
кирәк). Алар безнең _root.scss
файлда урнашкан.
CSS үзгәрүчәннәре Sass үзгәрүчәннәренә охшаш сыгылмалар тәкъдим итә, ләкин браузерга хезмәт күрсәткәнче компиляция кирәк түгел. Мәсәлән, монда без битнең шрифтын үзгәртәбез һәм стильләрне CSS үзгәрүчәннәре белән бәйлибез.
Сез шулай ук безнең медиа-сорауда безнең нокта үзгәрүләрен куллана аласыз: