Ngjyrë
Bootstrap mbështetet nga një sistem i gjerë ngjyrash që thekson stilet dhe komponentët tanë. Kjo mundëson personalizim dhe shtrirje më gjithëpërfshirëse për çdo projekt.
Ngjyrat e temave
Ne përdorim një nëngrup të të gjitha ngjyrave për të krijuar një gamë më të vogël ngjyrash për gjenerimin e skemave të ngjyrave, të disponueshme gjithashtu si variabla Sass dhe një hartë Sass në scss/_variables.scss
skedarin e Bootstrap.
Të gjitha këto ngjyra janë të disponueshme si një hartë Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Shikoni hartat tona Sass dhe dokumentet e sytheve për mënyrën e modifikimit të këtyre ngjyrave.
Të gjitha ngjyrat
Të gjitha ngjyrat e Bootstrap janë të disponueshme si variabla Sass dhe një hartë Sass në scss/_variables.scss
skedar. Për të shmangur rritjen e madhësive të skedarëve, ne nuk krijojmë klasa të ngjyrave të tekstit ose sfondit për secilën prej këtyre variablave. Në vend të kësaj, ne zgjedhim një nëngrup të këtyre ngjyrave për një paletë temash .
Sigurohuni që të monitoroni raportet e kontrastit ndërsa personalizoni ngjyrat. Siç tregohet më poshtë, ne kemi shtuar tre raporte kontrasti në secilën prej ngjyrave kryesore - një për ngjyrat aktuale të modelit, një kundër të bardhës dhe një kundër të zezës.
Shënime mbi Sass
Sass nuk mund të gjenerojë variabla në mënyrë programore, kështu që ne vetë krijuam variabla për çdo nuancë dhe hije. Ne specifikojmë vlerën e pikës së mesit (p.sh., $blue-500
) dhe përdorim funksionet e personalizuara të ngjyrave për të ngjyrosur (ndriçuar) ose hije (errësuar) ngjyrat tona nëpërmjet mix()
funksionit të ngjyrave të Sass.
Përdorimi mix()
nuk është i njëjtë si lighten()
dhe - e darken()
para përzien ngjyrën e specifikuar me të bardhën ose të zezën, ndërsa e dyta rregullon vetëm vlerën e butësisë së secilës ngjyrë. Rezultati është një grup shumë më i plotë ngjyrash, siç tregohet në këtë demonstrim të CodePen .
Funksionet tona tint-color()
dhe shade-color()
përdoren mix()
së bashku me $theme-color-interval
ndryshoren tonë, e cila specifikon një vlerë përqindjeje të shkallëzuar për çdo ngjyrë të përzier që prodhojmë. Shikoni skedarët scss/_functions.scss
dhe scss/_variables.scss
për kodin e plotë burimor.
Hartat me ngjyra Sass
Skedarët burimor Sass të Bootstrap përfshijnë tre harta për t'ju ndihmuar të shikoni shpejt dhe me lehtësi një listë ngjyrash dhe vlerat e tyre heks.
$colors
liston të gjitha500
ngjyrat tona bazë ( ) të disponueshme$theme-colors
liston të gjitha ngjyrat e temave të emërtuara semantikisht (treguar më poshtë)$grays
liston të gjitha nuancat dhe nuancat e grisë
Brenda scss/_variables.scss
, do të gjeni variablat e ngjyrave të Bootstrap dhe hartën Sass. Këtu është një shembull i $colors
hartës Sass:
$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
);
Shtoni, hiqni ose modifikoni vlerat brenda hartës për të përditësuar mënyrën se si ato përdoren në shumë komponentë të tjerë. Fatkeqësisht në këtë kohë, jo çdo komponent e përdor këtë hartë Sass. Përditësimet e ardhshme do të përpiqen ta përmirësojnë këtë. Deri atëherë, planifikoni të përdorni ${color}
variablat dhe këtë hartë Sass.
Shembull
Ja se si mund t'i përdorni këto në Sass tuaj:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Klasat e përdorimit të ngjyrave dhe sfondit janë gjithashtu të disponueshme për vendosjen color
dhe background-color
përdorimin e 500
vlerave të ngjyrave.
Gjenerimi i shërbimeve komunale
Shtuar në v5.1.0
Bootstrap nuk përfshin color
dhe background-color
programe ndihmëse për çdo variabël ngjyrash, por ju mund t'i gjeneroni ato vetë me API-në tonë të shërbimeve dhe hartat tona të zgjeruara Sass të shtuara në v5.1.0.
- Për të filluar, sigurohuni që të keni importuar funksionet, variablat, përzierjet dhe shërbimet tona.
- Përdorni
map-merge-multiple()
funksionin tonë për të bashkuar shpejt disa harta Sass së bashku në një hartë të re. - Bashkoni këtë hartë të re të kombinuar për të zgjeruar çdo mjet me një
{color}-{level}
emër klase.
Ja një shembull që gjeneron shërbime të ngjyrave të tekstit (p.sh., .text-purple-500
) duke përdorur hapat e mësipërm.
@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";
Kjo do të gjenerojë .text-{color}-{level}
shërbime të reja për çdo ngjyrë dhe nivel. Ju mund të bëni të njëjtën gjë edhe për çdo shërbim dhe pronë tjetër.