Пређи на главни садржај Прескочи на навигацију докумената
in English

Боја

Боотстрап је подржан опсежним системом боја који обрађује наше стилове и компоненте. Ово омогућава свеобухватније прилагођавање и проширење за било који пројекат.

Боје теме

Користимо подскуп свих боја да креирамо мању палету боја за генерисање шема боја, такође доступне као Сасс променљиве и Сасс мапа у Боотстрап scss/_variables.scssдатотеци.

Примарни
Секундарни
Успех
Опасност
Упозорење
Инфо
Светлост
Дарк

Све ове боје су доступне као Сасс мапа, $theme-colors.

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

Погледајте наше Сасс мапе и документе о петљама како да измените ове боје.

Све боје

Све Боотстрап боје су доступне као Сасс променљиве и Сасс мапа у scss/_variables.scssдатотеци. Да бисмо избегли повећање величине датотека, не креирамо класе боја текста или позадине за сваку од ових променљивих. Уместо тога, бирамо подскуп ових боја за палету тема .

Обавезно пратите однос контраста док прилагођавате боје. Као што је приказано у наставку, додали смо три односа контраста свакој од главних боја — један за тренутне боје узорка, један за белу и једну за црну.

$плаво#0д6ефд
$плави-100
$плави-200
$плави-300
$плави-400
$плави-500
$плави-600
плава-700 долара
$плави-800
$плави-900
$индиго#6610ф2
$индиго-100
$индиго-200
$индиго-300
$индиго-400
$индиго-500
$индиго-600
$индиго-700
$индиго-800
$индиго-900
$пурпле#6ф42ц1
$љубичасто-100
$љубичаста-200
љубичаста-300 долара
љубичаста-400 долара
љубичаста-500 долара
љубичаста-600 долара
љубичаста-700 долара
љубичаста-800 долара
љубичаста-900 долара
$пинк#д63384
$розе-100
Пинк-200
$розе-300
$розе-400
Пинк-500
$ружичасто-600
Пинк-700
$ружичасто-800
$пинк-900
$ред#дц3545
$црвена-100
црвена-200 долара
црвена-300 долара
црвена-400 долара
црвена-500 долара
црвена-600 долара
црвена-700 долара
црвена-800 долара
црвена-900 долара
$оранге#фд7е14
наранџаста-100 долара
наранџаста-200 долара
наранџаста-300 долара
наранџаста-400 долара
наранџаста-500 долара
наранџаста-600 долара
наранџаста-700 долара
наранџаста-800 долара
наранџаста-900 долара
$иеллов#ффц107
$ жути-100
$ жути-200
$ жути-300
$ жути-400
$ жути-500
$ жути-600
$ жути-700
$ жути-800
$ жути-900
$зелено#198754
$зелено-100
$зелено-200
$зелено-300
$зелено-400
$зелено-500
$зелено-600
$зелено-700
$зелено-800
$зелено-900
$теал#20ц997
$теал-100
$теал-200
$теал-300
$теал-400
$теал-500
$теал-600
$теал-700
$теал-800
$теал-900
$циан#0дцаф0
цијан-100 долара
цијан-200 долара
цијан-300 долара
цијан-400 долара
цијан-500 долара
цијан-600 долара
цијан-700 долара
цијан-800 долара
цијан-900 долара
$сива-500#адб5бд
$сива-100
$сива-200
$сива-300
$сива-400
$сива-500
$сива-600
$сива-700
$сива-800
$сива-900
$блацк#000
$вхите#ффф

Белешке о Сасс-у

Сасс не може програмски да генерише променљиве, па смо сами ручно креирали променљиве за сваку нијансу и нијансу. Ми специфицирамо вредност средње тачке (нпр. $blue-500) и користимо прилагођене функције боја да нијансирамо (светлимо) или сенчимо (потамнимо) наше боје преко Сасс-ове mix()функције боје.

Употреба mix()није исто што lighten()и darken()—прва меша наведену боју са белом или црном, док друга само прилагођава вредност светлости сваке боје. Резултат је много потпунији скуп боја, као што је приказано у овом ЦодеПен демо-у .

Наше tint-color()и shade-color()функције користе mix()заједно са нашом $theme-color-intervalпроменљивом, која одређује степенасту процентуалну вредност за сваку мешану боју коју производимо. Погледајте scss/_functions.scssи scss/_variables.scssдатотеке за цео изворни код.

Цолор Сасс мапе

Изворне Сасс датотеке Боотстрапа укључују три мапе које ће вам помоћи да брзо и лако пређете преко листе боја и њихових хексадецималних вредности.

  • $colorsнаводи све наше доступне основне ( 500) боје
  • $theme-colorsнаводи све семантички именоване боје теме (приказане испод)
  • $graysнаводи све нијансе и нијансе сиве

Унутар scss/_variables.scss, наћи ћете Боотстрап-ове променљиве боја и Сасс мапу. Ево примера $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
);

Додајте, уклоните или измените вредности унутар мапе да бисте ажурирали начин на који се користе у многим другим компонентама. Нажалост, у овом тренутку, не користи свака компонента ову Сасс мапу. Будућа ажурирања ће настојати да то побољшају. До тада, планирајте да користите ${color}варијабле и ову Сасс мапу.

Пример

Ево како их можете користити у свом Сасс-у:

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

Корисне класе боја и позадинеcolor су такође доступне за подешавање и background-colorкоришћење 500вредности боја.

Генерисање комуналних услуга

Додато у в5.1.0

Боотстрап не укључује colorуслужне background-colorпрограме за сваку променљиву боје, али их можете сами генерисати помоћу нашег услужног АПИ-ја и наших проширених Сасс мапа додатих у в5.1.0.

  1. За почетак, уверите се да сте увезли наше функције, променљиве, миксине и услужне програме.
  2. Користите нашу map-merge-multiple()функцију да брзо спојите више Сасс мапа у нову мапу.
  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}услужне програме за сваку боју и ниво. Исто можете учинити и за било који други комунални програм и имовину.