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.scss
failā.
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.scss
failā. 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.
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-interval
mainī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.scss
un .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.
$colors
uzskaita visas mūsu pieejamās bāzes (500
) krāsas$theme-colors
uzskaita visas semantiski nosauktās motīvu krāsas (parādītas zemāk)$grays
uzskaita 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 .color
background-color
500
Komunālo pakalpojumu ģenerēšana
Pievienots v5.1.0
Bootstrap neietver color
un background-color
utilītas katram krāsu mainīgajam, taču varat tos ģenerēt pats, izmantojot mūsu utilīta API un mūsu paplašinātās Sass kartes, kas pievienotas v5.1.0.
- Lai sāktu, pārliecinieties, vai esat importējis mūsu funkcijas, mainīgos, miksus un utilītas.
- Izmantojiet mūsu
map-merge-multiple()
funkciju, lai ātri apvienotu vairākas Sass kartes jaunā kartē. - Apvienojiet šo jauno kombinēto karti, lai paplašinātu jebkuru utilītu ar
{color}-{level}
klases nosaukumu.
Šeit ir piemērs, kas ģenerē teksta krāsu utilītus (piem., .text-purple-500
), izmantojot iepriekš minētās darbības.
@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";
Tas radīs jaunas .text-{color}-{level}
utilītas katrai krāsai un līmenim. Jūs varat darīt to pašu ar jebkuru citu komunālo pakalpojumu un īpašumu.