in English

Төс

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 картасы. Файл зурлыкларын арттырмас өчен, без бу үзгәрүчәннәрнең һәрберсе өчен текст яки фон төс класслары ясамыйбыз. Киресенчә, без тема палитрасы өчен бу төсләрнең бер өлешен сайлыйбыз .

Төсләрне көйләгәндә контраст ставкаларын күзәтегез. Түбәндә күрсәтелгәнчә, без төп төсләрнең һәрберсенә өч контраст ставкасын өстәдек - берсе светның хәзерге төсләре өчен, берсе акка, икенчесе карага.

$ зәңгәр# 0d6efd

$ зәңгәр-100

$ зәңгәр-200

$ зәңгәр-300

$ зәңгәр-400

$ зәңгәр-500

$ зәңгәр-600

$ зәңгәр-700

$ зәңгәр-800

$ зәңгәр-900

$ индиго# 6610f2

$ индиго-100

$ индиго-200

$ indigo-300

$ индиго-400

$ indigo-500

$ индиго-600

$ indigo-700

$ индиго-800

$ indigo-900

$ кызгылт# 6f42c1

$ кызгылт-100

$ кызгылт-200

$ кызгылт-300

$ кызгылт-400

$ кызгылт-500

$ кызгылт-600

$ кызгылт-700

$ кызгылт-800

$ кызгылт-900

$ алсу# d63384

$ алсу-100

$ алсу-200

$ алсу-300

$ алсу-400

$ алсу-500

$ алсу-600

$ алсу-700

$ алсу-800

$ алсу-900

$ кызыл# dc3545

$ red-100

$ red-200

$ red-300

$ red-400

$ red-500

$ red-600

$ red-700

$ red-800

$ red-900

$ апельсин# fd7e14

$ апельсин-100

$ апельсин-200

$ кызгылт сары-300

$ кызгылт сары-400

$ апельсин-500

$ кызгылт сары-600

$ апельсин-700

$ кызгылт сары-800

$ кызгылт сары-900

$ сары# ffc107

$ сары-100

$ сары-200

$ сары-300

$ сары-400

$ сары-500

$ сары-600

$ сары-700

$ сары-800

$ сары-900

$ яшел# 198754

$ яшел-100

$ яшел-200

$ яшел-300

$ яшел-400

$ яшел-500

$ яшел-600

$ яшел-700

$ яшел-800

$ яшел-900

$ чәй# 20c997

$ чәй-100

$ чәй-200

$ 300

$ чәй-400

$ 500

$ чәй-600

$ 700

$ чәй-800

$ чәй-900

$ циан# 0dcaf0

$ циан-100

$ циан-200

$ циан-300

$ циан-400

$ циан-500

$ cyan-600

$ cyan-700

$ циан-800

$ cyan-900

$ соры-500# adb5bd

$ соры-100

$ соры-200

$ соры-300

$ соры-400

$ соры-500

$ соры-600

$ соры-700

$ соры-800

$ соры-900

$ кара# 000

$ белый#fff

Сасс турында искәрмәләр

Сасс программаль рәвештә үзгәрешләр ясый алмый, шуңа күрә без һәрбер тон өчен үзгәрешләр ясыйбыз һәм үзебезгә күләгә бирәбез. Без урта нокта бәясен күрсәтәбез (мәсәлән, $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,
  "black":      $black,
  "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

Коммуналь хезмәтләр җитештерү

V5.1.0 өстәлде

Bootstrap һәрбер төс үзгәрүчесе өчен кертелми , ләкин сез аларны үзегезнең файдалы APIcolor һәм v5.1.0 өстәлгән киңәйтелгән Sass карталары ярдәмендә ясый аласыз.background-color

Башлау өчен, безнең функцияләрне, үзгәрүчәннәрне, миксиннарны, коммуналь хезмәтләрне импортлаганыгызны тикшерегез.
map-merge-multiple()Берничә картаны тиз арада берләштерү өчен безнең функцияне кулланыгыз .
{color}-{level}Класс исеме белән теләсә нинди ярдәмне киңәйтү өчен бу яңа кушылган картаны берләштерегез .

.text-purple-500Менә өстә китерелгән адымнарны кулланып текст төсе ярдәмчесен (мәсәлән, ) ясый торган мисал.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Бу һәр төс һәм дәрәҗә өчен яңа .text-{color}-{level}коммуналь хезмәтләр тудырачак. Сез бүтән файдалы һәм милек өчен дә шулай эшли аласыз.