Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
in English

Колер

Bootstrap падтрымліваецца шырокай каляровай сістэмай, якая тэматызуе нашы стылі і кампаненты. Гэта дазваляе больш комплексна наладжваць і пашыраць любы праект.

Колеры тэмы

Мы выкарыстоўваем падмноства ўсіх колераў для стварэння меншай каляровай палітры для стварэння каляровых схем, таксама даступных у выглядзе зменных Sass і карты Sass у scss/_variables.scssфайле Bootstrap.

Першасны
Другасны
Поспех
Небяспека
Папярэджанне
Інфармацыя
Святло
Цёмны

Усе гэтыя колеры даступныя ў выглядзе карты Sass $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Праверце нашы карты і цыклы Sass , каб даведацца, як змяніць гэтыя колеры.

Усе колеры

Усе колеры Bootstrap даступныя ў выглядзе зменных Sass і карты Sass у scss/_variables.scssфайле. Каб пазбегнуць павелічэння памераў файлаў, мы не ствараем класы колеру тэксту або фону для кожнай з гэтых зменных. Замест гэтага мы выбіраем падмноства гэтых колераў для тэматычнай палітры .

Не забудзьцеся сачыць за каэфіцыентам кантраснасці, калі вы наладжваеце колеры. Як паказана ніжэй, мы дадалі тры каэфіцыента кантраснасці да кожнага з асноўных колераў — адзін для бягучых колераў узору, адзін для белага і адзін для чорнага.

$сіні#0d6efd
сіні - 100 долараў
сіні - 200 даляраў
сіні - 300 даляраў
сіні - 400 даляраў
сіні - 500 даляраў
сіні - 600 даляраў
сіні - 700 даляраў
сіні - 800 даляраў
сіні - 900 даляраў
$індыга#6610f2
$індыга-100
Індыга-200 даляраў
Індыга-300 даляраў
Індыга-400 даляраў
Індыга-500 даляраў
Індыга-600 даляраў
Індыга-700 даляраў
Індыга-800 даляраў
Індыга-900 даляраў
$фіялетавы#6f42c1
фіялетавы $100
фіялетавы - 200 даляраў
фіялетавы - 300 даляраў
фіялетавы - 400 даляраў
фіялетавы - 500 даляраў
фіялетавы - 600 даляраў
фіялетавы - 700 даляраў
фіялетавы - 800 даляраў
фіялетавы - 900 даляраў
$ружовы#d63384
ружовы-100 даляраў
ружовы - 200 даляраў
ружовы - 300 даляраў
ружовы - 400 даляраў
ружовы - 500 даляраў
ружовы-600 даляраў
ружовы-700 даляраў
ружовы - 800 даляраў
ружовы-900 даляраў
$чырвоны#dc3545
чырвоны - 100 долараў
чырвоны - 200 долараў
чырвоны - 300 даляраў
Чырвоны - 400 даляраў
чырвоны - 500 даляраў
чырвоны - 600 даляраў
чырвоны - 700 даляраў
чырвоны - 800 даляраў
чырвоны - 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 цыан
600 цыан
700 цыан
800 долараў ЗША
900 цыан
шэры-500 даляраў#adb5bd
$шэры-100
$шэры-200
шэры-300 даляраў
$шэры-400
шэры-500 даляраў
шэры-600 даляраў
шэры-700 даляраў
шэры-800 даляраў
шэры-900 даляраў
$чорны#000
$белы#fff

Нататкі пра Sass

Sass не можа праграмна генераваць зменныя, таму мы самі стварылі зменныя для кожнага адцення і адцення. Мы вызначаем сярэдняе значэнне (напрыклад, $blue-500) і выкарыстоўваем карыстальніцкія функцыі колеру, каб адцяніць (асвятліць) або адцяніць (пацямніць) колеры з дапамогай mix()функцыі колеру Sass.

Выкарыстанне mix()не тое ж самае, што lighten()і darken()— першае змешвае ўказаны колер з белым або чорным, у той час як другое толькі рэгулюе значэнне асветленасці кожнага колеру. У выніку атрымліваецца значна больш поўны набор колераў, як паказана ў гэтай дэманстрацыі CodePen .

Нашы tint-color()і shade-color()функцыі выкарыстоўваюць mix()разам з нашай $theme-color-intervalзменнай, якая вызначае ступеньчатае працэнтнае значэнне для кожнага змешанага колеру, які мы вырабляем. Поўны зыходны код глядзіце ў файлах scss/_functions.scssі .scss/_variables.scss

Каляровыя карты Sass

Зыходныя файлы Sass Bootstrap уключаюць тры карты, якія дапамогуць вам хутка і лёгка перабіраць спіс колераў і іх шаснаццатковыя значэнні.

  • $colorsпералічвае ўсе нашы даступныя базавыя ( 500) колеры
  • $theme-colorsпералічвае ўсе семантычна названыя колеры тэмы (паказана ніжэй)
  • $graysпералічвае ўсе адценні і адценні шэрага

Унутры scss/_variables.scssвы знойдзеце каляровыя зменныя Bootstrap і карту Sass. Вось прыклад $colorsкарты Sass:

$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}зменныя і гэтую карту Sass.

Прыклад

Вось як вы можаце выкарыстоўваць іх у сваім Sass:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Дапаможныя класы колеру і фону таксама даступныя для ўстаноўкі colorі background-colorвыкарыстання 500значэнняў колеру.

Стварэнне камунальных паслуг

Дададзена ў v5.1.0

Bootstrap не ўключае ўтыліты colorдля background-colorкожнай зменнай колеру, але вы можаце стварыць іх самастойна з дапамогай нашага API утыліт і нашых пашыраных карт Sass, дададзеных у v5.1.0.

  1. Для пачатку пераканайцеся, што вы імпартавалі нашы функцыі, зменныя, міксіны і ўтыліты.
  2. Выкарыстоўвайце нашу map-merge-multiple()функцыю, каб хутка аб'яднаць некалькі карт Sass у новую карту.
  3. Аб'яднайце гэтую новую камбінаваную карту, каб пашырыць любую ўтыліту з {color}-{level}назвай класа.

Вось прыклад, які стварае ўтыліты колеру тэксту (напрыклад, .text-purple-500), выкарыстоўваючы апісаныя вышэй дзеянні.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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}ўтыліты для кожнага колеру і ўзроўню. Вы можаце зрабіць тое ж самае для любой іншай камунальнай гаспадаркі і маёмасці.