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вредности боја.