Boja
Bootstrap je podržan opsežnim sustavom boja koji tematizira naše stilove i komponente. To omogućuje sveobuhvatniju prilagodbu i proširenje za svaki projekt.
Tematske boje
Koristimo podskup svih boja za stvaranje manje palete boja za generiranje shema boja, također dostupnih kao Sass varijable i Sass mapa u Bootstrapovoj scss/_variables.scss
datoteci.
Sve ove boje dostupne su kao Sass karta, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Pogledajte naše Sass mape i dokumente o petljama da biste saznali kako izmijeniti ove boje.
Sve boje
Sve Bootstrap boje dostupne su kao Sass varijable i Sass mapa u scss/_variables.scss
datoteci. Kako bismo izbjegli povećane veličine datoteka, ne stvaramo klase boja teksta ili pozadine za svaku od ovih varijabli. Umjesto toga, odabiremo podskup ovih boja za tematsku paletu .
Obavezno pratite omjere kontrasta dok prilagođavate boje. Kao što je prikazano u nastavku, dodali smo tri omjera kontrasta svakoj od glavnih boja — jedan za trenutne boje uzorka, jedan za bijelu i jedan za crnu.
Bilješke o Sassu
Sass ne može programski generirati varijable, pa smo sami ručno kreirali varijable za svaku nijansu i nijansu. Određujemo srednju vrijednost (npr. $blue-500
) i koristimo prilagođene funkcije boja za nijansiranje (posvijetljenje) ili sjenčanje (tamnjenje) naših boja putem Sassove mix()
funkcije boja.
Korištenje mix()
nije isto što lighten()
i darken()
— prvo miješa navedenu boju s bijelom ili crnom, dok potonje samo prilagođava vrijednost svjetline svake boje. Rezultat je mnogo potpuniji paket boja, kao što je prikazano u ovoj demonstraciji CodePen .
Naše tint-color()
i shade-color()
funkcije koriste se mix()
zajedno s našom $theme-color-interval
varijablom, koja navodi stepenastu postotnu vrijednost za svaku miješanu boju koju proizvodimo. Za puni izvorni kod pogledajte datoteke scss/_functions.scss
i .scss/_variables.scss
Obojite Sass karte
Bootstrapove izvorne Sass datoteke uključuju tri mape koje vam pomažu da brzo i jednostavno pređete preko popisa boja i njihovih hex vrijednosti.
$colors
navodi sve naše dostupne osnovne (500
) boje$theme-colors
navodi sve semantički imenovane boje teme (prikazano u nastavku)$grays
navodi sve nijanse i nijanse sive
Unutar scss/_variables.scss
ćete pronaći Bootstrapove varijable boja i Sass mapu. Evo primjera $colors
Sass karte:
$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
);
Dodajte, uklonite ili modificirajte vrijednosti unutar karte kako biste ažurirali način na koji se koriste u mnogim drugim komponentama. Nažalost, u ovom trenutku ne koristi svaka komponenta ovu Sass mapu. Buduća ažuriranja nastojat će to poboljšati. Do tada planirajte koristiti ${color}
varijable i ovu Sass mapu.
Primjer
Evo kako ih možete koristiti u svom Sassu:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Klase korisnih boja i pozadine također su dostupne za postavljanje color
i background-color
korištenje 500
vrijednosti boja.