Төс
Bootstrap безнең стильләр һәм компонентлар темасы булган киң төс системасы белән тәэмин ителә. Бу теләсә нинди проект өчен тулырак көйләү һәм киңәйтү мөмкинлеген бирә.
Тема төсләре
Без төс схемаларын ясау өчен кечерәк төс палитра ясау өчен барлык төсләрнең бер өлешен кулланабыз, шулай ук Sass үзгәрүчәннәре һәм Bootstrap scss/_variables.scss
файлында Sass картасы.
Бу төсләрнең барысы да Sass картасы буларак бар , $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Бу төсләрне ничек үзгәртү турында безнең Sass карталарын һәм цикл документларын карагыз .
Барлык төсләр
Барлык Bootstrap төсләре дә Sass үзгәрүчәннәре һәм scss/_variables.scss
файлда Sass картасы. Файл зурлыкларын арттырмас өчен, без бу үзгәрүчәннәрнең һәрберсе өчен текст яки фон төс класслары ясамыйбыз. Киресенчә, без тема палитрасы өчен бу төсләрнең бер өлешен сайлыйбыз .
Төсләрне көйләгәндә контраст ставкаларын күзәтегез. Түбәндә күрсәтелгәнчә, без төп төсләрнең һәрберсенә өч контраст ставкасын өстәдек - берсе светның хәзерге төсләре өчен, берсе акка, икенчесе карага.
Сасс турында искәрмәләр
Сасс программаль рәвештә үзгәрешләр ясый алмый, шуңа күрә без һәрбер тон өчен үзгәрешләр ясыйбыз һәм үзебезгә күләгә бирәбез. Без урта нокта бәясен күрсәтәбез (мәсәлән, $blue-500
) һәм Sass төс функциясе аша төсләребезне буяу (җиңеләйтү) яки күләгәләү (караңгыландыру) өчен махсус төс функцияләрен кулланабыз mix()
.
Куллану mix()
бер үк түгел lighten()
һәм - darken()
элеккеге төсне ак яки кара белән куша, соңгысы һәр төснең җиңеллеген көйли. Нәтиҗә - бу CodePen демода күрсәтелгәнчә, төсләрнең тулы комплекты .
Безнең tint-color()
һәм shade-color()
функцияләребез mix()
безнең $theme-color-interval
үзгәрүчәннәр белән бергә кулланалар, бу без җитештергән һәр катнаш төс өчен адым процент бәясен күрсәтә. scss/_functions.scss
Тулы чыганак коды өчен scss/_variables.scss
файлларны карагыз .
Төсле Сасс карталары
Bootstrap чыганагы Sass файллары төсләр исемлеген һәм аларның алты кыйммәтләрен тиз һәм җиңел әйләндереп алу өчен өч картаны үз эченә ала.
$colors
безнең барлык булган база (500
) төсләрне күрсәтә$theme-colors
барлык семантик исемле тема исемлекләрен күрсәтә (аста күрсәтелгән)$grays
соры төсләрнең барлык төсләрен күрсәтә
Эчтә 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
);
Карталар эчендә кыйммәтләрне өстәгез, бетерегез яки үзгәртегез, алар башка компонентларда ничек кулланылганнарын яңарту өчен. Кызганычка каршы, бу вакытта һәрбер компонент бу Sass картасын кулланмый. Киләчәк яңартулар моны яхшыртырга тырышачак. Шул вакытка кадәр ${color}
үзгәрүчәннәрне һәм бу Сасс картасын кулланырга планлаштырыгыз.
Мисал
Менә сез аларны Сасста ничек куллана аласыз:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Төсләр һәм фон файдалы класслар төс кыйммәтләрен көйләү color
һәм background-color
куллану өчен дә бар.500