Culore
Bootstrap hè sustinutu da un vastu sistema di culore chì tematiche i nostri stili è cumpunenti. Questu permette una persunalizazione più cumpleta è estensione per ogni prughjettu.
Culori tematichi
Utilizemu un subset di tutti i culori per creà una paleta di culori più chjuca per generà schemi di culori, ancu dispunibili cum'è variabili Sass è una mappa Sass in u scss/_variables.scss
schedariu Bootstrap.
Tutti questi culori sò dispunibuli cum'è una mappa Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Scuprite i nostri documenti Sass maps and loops per cumu mudificà questi culori.
Tutti i culori
Tutti i culori di Bootstrap sò dispunibuli cum'è variabili Sass è una mappa Sass in scss/_variables.scss
u schedariu. Per evità l'aumentu di dimensioni di i schedari, ùn avemu micca creatu testu o classi di culore di fondu per ognuna di sti variàbili. Invece, scegliemu un subset di sti culori per una paleta di tema .
Assicuratevi di monitorà i rapporti di cuntrastu mentre personalizzate i culori. Cum'è mostratu quì sottu, avemu aghjustatu trè rapporti di cuntrastu à ognunu di i culori principali - unu per i culori attuali di u swatch, unu per u biancu è unu per u neru.
Note nantu à Sass
Sass ùn pò micca generà variabili in modu programmaticu, cusì avemu creatu manualmente variabili per ogni tinta è ombra noi stessi. Specificemu u valore di u puntu mediu (per esempiu, $blue-500
) è utilizemu funzioni di culore persunalizati per tinte (illuminà) o ombrezza (scurisce) i nostri culori via a mix()
funzione di culore di Sass.
L' usu mix()
ùn hè micca u listessu cum'è lighten()
è darken()
- l'anzianu combina u culore specificatu cù biancu o neru, mentre chì l'ultimu solu aghjusta u valore di luminosità di ogni culore. U risultatu hè una suite di culori assai più cumpleta, cum'è mostra in questa demo CodePen .
U nostru tint-color()
è e shade-color()
funzioni utilizanu mix()
à fiancu à a nostra $theme-color-interval
variàbile, chì specifica un valore percentuale scalatu per ogni culore mistu chì pruduciamu. Vede i schedari scss/_functions.scss
è scss/_variables.scss
per u codice surghjente sanu.
Carte Sass di culore
I schedarii Sass d'urighjini di Bootstrap includenu trè mappe per aiutà vi chjappà rapidamente è facilmente una lista di culori è i so valori hex.
$colors
500
elenca tutti i nostri culori basi dispunibuli ( ).$theme-colors
elenca tutti i culori di tema semanticamente chjamati (mostratu sottu)$grays
elenca tutte e tinte è sfumature di grisgiu
Dentru scss/_variables.scss
, truverete e variabili di culore di Bootstrap è a mappa Sass. Eccu un esempiu di a $colors
mappa 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
);
Aghjunghjite, sguassate o mudificà i valori in a mappa per aghjurnà cumu sò usati in parechji altri cumpunenti. Sfortunatamente à questu tempu, micca tutti i cumpunenti utilizanu sta mappa Sass. L'aghjurnamenti futuri s'impegnanu à migliurà questu. Finu à tandu, pensa à aduprà e ${color}
variàbili è sta mappa Sass.
Esempiu
Eccu cumu pudete aduprà questi in u vostru Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
E classi di utilità di culore è di fonducolor
sò ancu dispunibili per stabilisce è background-color
aduprà i 500
valori di culore.
Generazione di utilità
Aggiuntu in v5.1.0
Bootstrap ùn include micca color
e background-color
utilità per ogni variabile di culore, ma pudete generà sti stessi cù a nostra API di utilità è e nostre mape Sass estese aghjunte in v5.1.0.
- Per principià, assicuratevi di avè impurtatu e nostre funzioni, variabili, mixin è utilità.
- Aduprate a nostra
map-merge-multiple()
funzione per unisce rapidamente parechje carte Sass in una nova mappa. - Unisce sta nova mappa cumminata per allargà ogni utilità cù un
{color}-{level}
nome di classa.
Eccu un esempiu chì genera utilità di culore di testu (per esempiu, .text-purple-500
) utilizendu i passi sopra.
@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";
Questu generà novi .text-{color}-{level}
utilità per ogni culore è livellu. Pudete fà u listessu per qualsiasi altra utilità è pruprietà ancu.