Szín
A Bootstrap-et egy kiterjedt színrendszer támogatja, amely stílusainkat és összetevőinket tematizálja. Ez lehetővé teszi bármely projekt átfogóbb testreszabását és bővítését.
Téma színei
Az összes szín egy részhalmazát használjuk, hogy létrehozzunk egy kisebb színpalettát a színsémák létrehozásához, amelyek Sass változókként és Sass térképként is elérhetők a Bootstrap scss/_variables.scss
fájljában.
Mindezek a színek Sass térképként, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Tekintse meg Sass térképeket és hurkokat tartalmazó dokumentumainkat , hogy hogyan módosíthatja ezeket a színeket.
Minden szín
Az összes Bootstrap szín elérhető Sass változóként és Sass térképként scss/_variables.scss
fájlban. A megnövekedett fájlméret elkerülése érdekében nem hozunk létre szöveg- vagy háttérszínosztályokat ezekhez a változókhoz. Ehelyett ezeknek a színeknek egy részhalmazát választjuk ki a témapalettákhoz .
A színek testreszabásakor ügyeljen a kontrasztarányokra. Az alábbiak szerint három kontrasztarányt adtunk minden fő színhez – egyet a minta jelenlegi színeihez, egyet a fehérhez és egyet a feketéhez.
Megjegyzések Sassról
A Sass nem tud programozottan változókat generálni, ezért saját kezűleg hoztunk létre változókat minden árnyalathoz és árnyalathoz. Megadjuk a középpont értékét (pl. $blue-500
), és egyedi színfüggvényekkel színezzük (világosítjuk) vagy árnyékoljuk (sötétítjük) a színeinket a Sass színfunkcióján keresztül mix()
.
A használat mix()
nem ugyanaz, mint lighten()
és darken()
– az előbbi a megadott színt fehérrel vagy feketével keveri, míg az utóbbi csak az egyes színek világosságát állítja be. Az eredmény egy sokkal teljesebb színkészlet, amint azt ez a CodePen bemutató is mutatja .
A mi tint-color()
és a shade-color()
függvényeink mix()
a változónkkal együtt használják $theme-color-interval
, amely lépcsőzetes százalékos értéket ad meg minden egyes előállított kevert színhez. Tekintse meg a scss/_functions.scss
és scss/_variables.scss
fájlokat a teljes forráskódért.
Színes Sass térképek
A Bootstrap Sass forrásfájljai három térképet tartalmaznak, amelyek segítségével gyorsan és egyszerűen áttekintheti a színek listáját és hexadecimális értékeit.
$colors
felsorolja az összes elérhető alapszínünket (500
).$theme-colors
felsorolja az összes szemantikailag elnevezett témaszínt (lent látható)$grays
felsorolja a szürke összes árnyalatát és árnyalatát
Ezen belül scss/_variables.scss
megtalálja a Bootstrap színváltozóit és a Sass térképet. Íme egy példa a $colors
Sass térképre:
$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
);
Adjon hozzá, távolítson el vagy módosítson értékeket a térképen, hogy frissítse azok felhasználási módját sok más összetevőben. Sajnos jelenleg nem minden összetevő használja ezt a Sass térképet. A jövőbeli frissítések ezen javítani fognak. Addig is tervezze a ${color}
változók és a Sass térkép felhasználását.
Példa
A következőképpen használhatja ezeket a Sass-ban:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Szín- és háttérhasználati osztályok is rendelkezésre állnak a színértékek beállításához color
és background-color
használatához .500
Közművek előállítása
Hozzáadva a v5.1.0-hoz
A Bootstrap nem tartalmaz color
és background-color
segédprogramokat minden színváltozóhoz, de ezeket saját maga is létrehozhatja a segédprogram API -val és a v5.1.0-s verzióban hozzáadott kiterjesztett Sass térképeinkkel.
- Kezdésként győződjön meg arról, hogy importálta a függvényeinket, változóinkat, mixeinket és segédprogramjainkat.
- Funkciónkkal
map-merge-multiple()
gyorsan egyesíthet több Sass térképet egy új térképen. - Egyesítse ezt az új kombinált térképet, hogy bármely segédprogramot
{color}-{level}
osztálynévvel bővítsen.
Íme egy példa, amely szövegszín segédprogramokat (pl. .text-purple-500
) hoz létre a fenti lépések segítségével.
@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";
.text-{color}-{level}
Ez minden színhez és szinthez új segédprogramokat generál . Ugyanezt megteheti bármely más közművel és ingatlannal is.