Värv
Bootstrapi toetab ulatuslik värvisüsteem, mis kujundab meie stiilid ja komponendid. See võimaldab iga projekti jaoks põhjalikumat kohandamist ja laiendamist.
Teema värvid
Väiksema värvipaleti loomiseks värviskeemide loomiseks kasutame kõigi värvide alamhulka, mis on saadaval ka Sassi muutujatena ja Sassi kaardina Bootstrapi scss/_variables.scss
failis.
Kõik need värvid on saadaval Sassi kaardina, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Nende värvide muutmise kohta vaadake meie Sassi kaartide ja silmuste dokumente .
Kõik värvid
Kõik Bootstrapi värvid on saadaval Sassi muutujatena ja scss/_variables.scss
failis Sassi kaardina. Failisuuruse suurenemise vältimiseks ei loo me nende muutujate jaoks teksti- ega taustavärviklasse. Selle asemel valime teemapaleti jaoks nende värvide alamhulga .
Värvide kohandamisel jälgige kindlasti kontrastsuse suhet. Nagu allpool näidatud, oleme lisanud igale põhivärvile kolm kontrastsuse suhet – ühe prooviproovi praeguste värvide jaoks, ühe valge ja ühe musta värvi jaoks.
Märkused Sassi kohta
Sass ei saa programmiliselt muutujaid genereerida, seega lõime ise muutujad iga tooni ja tooni jaoks käsitsi. Täpsustame keskpunkti väärtuse (nt $blue-500
) ja kasutame kohandatud värvifunktsioone oma värvide toonimiseks (heledamaks) või varjutamiseks (tumendamiseks) Sassi värvifunktsiooni kaudu mix()
.
Kasutamine mix()
ei ole sama, mis lighten()
ja darken()
– esimene segab määratud värvi valge või mustaga, teine aga reguleerib ainult iga värvi heleduse väärtust. Tulemuseks on palju täiuslikum värvide komplekt, nagu on näidatud selles CodePeni demos .
Meie tint-color()
ja shade-color()
funktsioonid kasutavad mix()
kõrvuti meie $theme-color-interval
muutujaga, mis määrab iga meie toodetava segavärvi jaoks astmelise protsendiväärtuse. Täieliku lähtekoodi leiate failidest scss/_functions.scss
ja .scss/_variables.scss
Värvilised Sassi kaardid
Bootstrapi Sassi lähtefailid sisaldavad kolme kaarti, mis aitavad teil kiiresti ja hõlpsalt värvide loendi ja nende kuueteistkümnendväärtuste üle vaadata.
$colors
loetleb kõik meie saadaolevad500
põhivärvid ( ).$theme-colors
loetleb kõik semantiliselt nimetatud teemavärvid (näidatud allpool)$grays
loetleb kõik halli toonid ja toonid
Seest scss/_variables.scss
leiate Bootstrapi värvimuutujad ja Sassi kaardi. Siin on näide $colors
Sassi kaardist:
$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
);
Lisage, eemaldage või muutke kaardil väärtusi, et värskendada nende kasutamist paljudes teistes komponentides. Kahjuks ei kasuta praegu kõik komponendid seda Sassi kaarti. Tulevased värskendused püüavad seda parandada. Kuni selle ajani ${color}
plaanige muutujaid ja seda Sassi kaarti kasutada.
Näide
Saate neid oma Sassis kasutada järgmiselt.
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Värviväärtustecolor
seadistamiseks ja background-color
kasutamiseks on saadaval ka värvi- ja taustautiliidiklassid500
.