Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
in English

Krāsa

Bootstrap atbalsta plaša krāsu sistēma, kas veido mūsu stilus un komponentus. Tas ļauj veikt visaptverošāku pielāgošanu un paplašināšanu jebkuram projektam.

Tēmas krāsas

Mēs izmantojam visu krāsu apakškopu, lai izveidotu mazāku krāsu paleti krāsu shēmu ģenerēšanai, kas ir pieejama arī kā Sass mainīgie un Sass karte Bootstrap scss/_variables.scssfailā.

Primārs
Sekundārais
Panākumi
Briesmas
Brīdinājums
Informācija
Gaisma
Tumšs

Visas šīs krāsas ir pieejamas kā Sass karte, $theme-colors.

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

Apskatiet mūsu Sass karšu un cilpu dokumentus , lai uzzinātu, kā mainīt šīs krāsas.

Visas krāsas

Visas Bootstrap krāsas ir pieejamas kā Sass mainīgie un Sass karte scss/_variables.scssfailā. Lai izvairītos no failu lieluma palielināšanas, mēs neveidojam teksta vai fona krāsu klases katram no šiem mainīgajiem. Tā vietā mēs motīvu paletei izvēlamies šo krāsu apakškopu .

Pielāgojot krāsas, noteikti uzraugiet kontrasta attiecības. Kā parādīts zemāk, katrai galvenajai krāsai esam pievienojuši trīs kontrasta attiecības — vienu parauga pašreizējām krāsām, vienu pret balto un otru pret melno.

$ zils#0d6efd
zils — 100 $
zils — 200 $
zils — 300 $
zils — 400 $
zils — 500 $
zils — 600 $
zils — 700 $
zils — 800 $
zils — 900 $
$indigo#6610f2
Indigo $ 100
Indigo $ 200
Indigo $ 300
Indigo 400 $
Indigo $ 500
Indigo - 600 $
Indigo 700 $
Indigo 800 $
Indigo 900 $
$ violets#6f42c1
violets — 100 $
violets — 200 $
violets — 300 $
violets — 400 $
violets — 500 $
violets — 600 $
violets — 700 $
violets — 800 $
violets — 900 $
$ rozā#d63384
rozā - 100 USD
rozā - 200 USD
Rozā - 300 USD
rozā - 400 USD
Rozā - 500 USD
rozā - 600 USD
rozā - 700 USD
rozā - 800 USD
rozā - 900 USD
$sarkans#dc3545
sarkans — 100 $
sarkans - 200 USD
sarkans - 300 USD
sarkans - 400 USD
sarkans - 500 USD
sarkans - 600 USD
sarkans - 700 USD
sarkans - 800 USD
sarkans - 900 ASV dolāri
$ oranžs#fd7e14
apelsīns - 100 ASV dolāri
apelsīns — 200 $
apelsīns - 300 USD
apelsīns - 400 USD
apelsīns - 500 USD
apelsīns — 600 $
apelsīns - 700 USD
apelsīns - 800 USD
apelsīns — 900 $
$dzeltens#ffc107
Dzeltens — 100 $
Dzeltens — 200 $
Dzeltenais — 300 $
Dzeltenais — 400 $
dzeltens — 500 $
Dzeltenais — 600 $
Dzeltenais — 700 $
dzeltens — 800 $
dzeltens — 900 $
$ zaļš#198754
Zaļie - 100 USD
Zaļie - 200 USD
Zaļie - 300 USD
Zaļie - 400 USD
Zaļie-500 USD
Zaļie - 600 USD
Zaļie - 700 USD
Zaļie-800 USD
Zaļie-900 USD
$teal#20c997
zeltzils-100 $
zeltzils-200 $
zeltzils-300 $
zeltzils-400 $
$ zilganzaļa - 500
zeltzils-600 USD
zeltzils-700 USD
zeltzils-800 USD
Kzelta zila - 900 USD
$ciāna#0dcaf0
ciāna $ 100
ciāna-200 USD
ciāna-300 USD
ciāna-400 USD
ciāna-500 USD
ciāna-600 USD
ciāna-700 USD
ciāna-800 USD
ciāna-900 USD
$ pelēks-500#adb5bd
pelēks — 100 $
$ pelēks-200
pelēks — 300 $
pelēks — 400 $
$ pelēks-500
$ pelēks-600
pelēks — 700 $
$ pelēks-800
$ pelēks-900
$melns#000
$balts#fff

Piezīmes par Sasu

Sass nevar programmatiski ģenerēt mainīgos, tāpēc mēs paši manuāli izveidojām mainīgos katram nokrāsai un tonim. Mēs norādām viduspunkta vērtību (piem., $blue-500) un izmantojam pielāgotas krāsu funkcijas, lai ietonētu (izgaismotu) vai ietonētu (tumšotu) mūsu krāsas, izmantojot Sass mix()krāsu funkciju.

Izmantošana mix()nav tas pats, kas lighten()un darken()— pirmā sajauc norādīto krāsu ar balto vai melno, bet otrā tikai pielāgo katras krāsas gaišuma vērtību. Rezultāts ir daudz pilnīgāks krāsu komplekts, kā parādīts šajā CodePen demonstrācijā .

Mūsu tint-color()un shade-color()funkcijas tiek izmantotas mix()kopā ar mūsu $theme-color-intervalmainīgo, kas nosaka pakāpenisku procentuālo vērtību katrai mūsu ražotajai jauktajai krāsai. Pilnu avota kodu skatiet failos scss/_functions.scssun .scss/_variables.scss

Krāsu Sass kartes

Bootstrap avota Sass failos ir iekļautas trīs kartes, kas palīdz ātri un viegli pārmeklēt krāsu sarakstu un to heksadecimālās vērtības.

  • $colorsuzskaita visas mūsu pieejamās bāzes ( 500) krāsas
  • $theme-colorsuzskaita visas semantiski nosauktās motīvu krāsas (parādītas zemāk)
  • $graysuzskaita visas pelēkās nokrāsas un toņus

Vietnē scss/_variables.scss, jūs atradīsiet Bootstrap krāsu mainīgos un Sass karti. $colorsŠeit ir Sass kartes piemērs :

$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
);

Pievienojiet, noņemiet vai modificējiet vērtības kartē, lai atjauninātu to izmantošanu daudzos citos komponentos. Diemžēl šobrīd ne katrs komponents izmanto šo Sass karti. Turpmākie atjauninājumi centīsies to uzlabot. Līdz tam plānojiet izmantot ${color}mainīgos lielumus un šo Sass karti.

Piemērs

Lūk, kā jūs varat tos izmantot savā Sass:

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

Krāsu vērtību iestatīšanai un lietošanai ir pieejamas arī krāsu un fona lietderības klases .colorbackground-color500