Spalva
„Bootstrap“ palaiko plati spalvų sistema, kuri atitinka mūsų stilius ir komponentus. Tai leidžia išsamiau pritaikyti ir išplėsti bet kurį projektą.
Temos spalvos
Naudojame visų spalvų poaibį, kad sukurtume mažesnę spalvų paletę spalvų schemoms generuoti, taip pat kaip Sass kintamieji ir Sass žemėlapis Bootstrap scss/_variables.scss
faile.
Visos šios spalvos galimos kaip Sass žemėlapis, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Peržiūrėkite mūsų Sass žemėlapių ir kilpų dokumentus , kaip pakeisti šias spalvas.
Visos spalvos
Visos Bootstrap spalvos galimos kaip Sass kintamieji ir Sass žemėlapis scss/_variables.scss
faile. Kad nepadidėtų failų dydžiai, nekuriame teksto ar fono spalvų klasių kiekvienam iš šių kintamųjų. Vietoj to mes pasirenkame šių spalvų poaibį temos paletei .
Tinkindami spalvas būtinai stebėkite kontrasto santykį. Kaip parodyta toliau, kiekvienai iš pagrindinių spalvų pridėjome tris kontrasto santykius – vieną – esamoms pavyzdžio spalvoms, vieną – prieš baltą ir kitą – prieš juodą.
Pastabos apie Sasą
„Sass“ negali programiškai generuoti kintamųjų, todėl patys sukūrėme kintamuosius kiekvienam atspalviui ir atspalviui. Mes nurodome vidurio taško reikšmę (pvz., $blue-500
) ir naudojame pasirinktines spalvų funkcijas, kad atspalvintume (šviesintume) arba atspalvintume (tamsintume) savo spalvas per Sass mix()
spalvų funkciją.
Naudojimas mix()
nėra tas pats, kas lighten()
ir darken()
– pirmasis sulieja nurodytą spalvą su balta arba juoda, o antroji tik koreguoja kiekvienos spalvos šviesumo reikšmę. Rezultatas yra daug išsamesnis spalvų rinkinys, kaip parodyta šioje CodePen demonstracijoje .
Mūsų tint-color()
ir shade-color()
funkcijos naudojamos mix()
kartu su mūsų $theme-color-interval
kintamuoju, kuris nurodo kiekvienos mūsų gaminamos mišrios spalvos procentinę reikšmę. Visą šaltinio kodą rasite scss/_functions.scss
ir failuose.scss/_variables.scss
Spalvoti Sass žemėlapiai
„Bootstrap“ šaltinio „Sass“ failuose yra trys žemėlapiai, kurie padės greitai ir lengvai peržiūrėti spalvų sąrašą ir jų šešioliktaines reikšmes.
$colors
pateikiamos visos mūsų turimos bazinės (500
) spalvos$theme-colors
pateikiamos visos semantiškai pavadintos temos spalvos (parodyta žemiau)$grays
pateikiami visi pilkos spalvos atspalviai ir atspalviai
scss/_variables.scss
Svetainėje rasite „Bootstrap“ spalvų kintamuosius ir „Sass“ žemėlapį . $colors
Štai Sass žemėlapio pavyzdys :
$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
);
Pridėkite, pašalinkite arba keiskite reikšmes žemėlapyje, kad atnaujintumėte, kaip jos naudojamos daugelyje kitų komponentų. Deja, šiuo metu ne kiekvienas komponentas naudoja šį Sass žemėlapį. Būsimi atnaujinimai stengsis tai pagerinti. Iki tol planuokite naudotis ${color}
kintamaisiais ir šiuo Sass žemėlapiu.
Pavyzdys
Štai kaip galite juos naudoti savo „Sass“:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Taip pat galimos spalvų ir fonocolor
naudingumo klasės, leidžiančios nustatyti ir background-color
naudoti 500
spalvų reikšmes.