Dath
Tha Bootstrap a’ faighinn taic bho shiostam dath farsaing a tha mar chuspair ar stoidhlichean agus ar co-phàirtean. Leigidh seo le gnàthachadh agus leudachadh nas coileanta airson pròiseact sam bith.
Dathan cuspair
Bidh sinn a’ cleachdadh fo-sheata de gach dath gus paileas dath nas lugha a chruthachadh airson sgeamaichean dath a ghineadh, cuideachd ri fhaighinn mar chaochladairean Sass agus mapa Sass ann am scss/_variables.scss
faidhle Bootstrap.
Tha na dathan sin uile rim faighinn mar mhapa Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Thoir sùil air na mapaichean Sass agus na docaichean lùban againn airson mar as urrainn dhut na dathan sin atharrachadh.
A h-uile dathan
Tha a h-uile dath Bootstrap ri fhaighinn mar chaochladairean Sass agus mapa Sass ann am scss/_variables.scss
faidhle. Gus meudan faidhle nas motha a sheachnadh, cha bhith sinn a’ cruthachadh clasaichean dath teacsa no cùl-raoin airson gach aon de na caochladairean sin. An àite sin, bidh sinn a’ taghadh fo-sheata de na dathan sin airson paileas cuspair .
Dèan cinnteach gun cùm thu sùil air co-mheasan eadar-dhealaichte fhad ‘s a bhios tu a’ gnàthachadh dathan. Mar a chithear gu h-ìosal, tha sinn air trì co-mheasan eadar-dhealaichte a chuir ri gach prìomh dhathan - aon airson dathan gnàthach an t-swatch, aon airson an aghaidh geal, agus aon airson an aghaidh dubh.
Notaichean air Sass
Chan urrainn dha Sass caochladairean a ghineadh gu prògramach, agus mar sin chruthaich sinn caochladairean le làimh airson a h-uile dath agus sgàil sinn fhìn. Bidh sinn a’ sònrachadh luach meadhan-phuing (me, $blue-500
) agus a’ cleachdadh gnìomhan dath àbhaisteach gus na dathan againn a dhath (lasachadh) no dubhar (dorcha) tro mix()
ghnìomh dath Sass.
Chan eil cleachdadh mix()
an aon rud ri lighten()
agus darken()
- bidh a’ chiad fhear a’ measgachadh an dath ainmichte le geal no dubh, agus chan eil an tè mu dheireadh ag atharrachadh ach luach aotromachd gach dath. Is e an toradh sreath de dhhathan tòrr nas coileanta, mar a chithear san demo CodePen seo .
Bidh na gnìomhan againn tint-color()
agus na shade-color()
gnìomhan againn a’ cleachdadh mix()
còmhla ris a’ $theme-color-interval
chaochladair againn, a tha a’ sònrachadh luach ceudad ceumnaichte airson gach dath measgaichte a bhios sinn a’ dèanamh. Faic na faidhlichean scss/_functions.scss
agus na scss/_variables.scss
faidhlichean airson a’ chòd stòr slàn.
Mapaichean dath Sass
Tha trì mapaichean ann am faidhlichean Sass stòr Bootstrap gus do chuideachadh le bhith a’ lùbadh gu sgiobalta agus gu furasta thairis air liosta de dhhathan agus na luachan hex aca.
$colors
a’ liostadh na500
dathan bunaiteach ( ) a tha rim faighinn againn$theme-colors
a’ liostadh a h-uile dath cuspair ainmichte gu semantach (ri fhaicinn gu h-ìosal)$grays
ag ainmeachadh a h-uile dath agus dath liath
Taobh a-staigh scss/_variables.scss
, lorgaidh tu caochladairean dath Bootstrap agus mapa Sass. Seo eisimpleir de $colors
mhapa 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
);
Cuir ris, thoir air falbh no atharraich luachan taobh a-staigh a’ mhapa gus ùrachadh mar a bhios iad gan cleachdadh ann am mòran phàirtean eile. Gu mì-fhortanach aig an àm seo, chan eil a h- uile pàirt a’ cleachdadh a’ mhapa Sass seo. Bidh ùrachaidhean san àm ri teachd a’ feuchainn ri seo a leasachadh. Gu ruige sin, planadh air cleachdadh nan ${color}
caochladairean agus am mapa Sass seo.
eisimpleir
Seo mar a chleachdas tu iad sin nad Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Tha clasaichean goireasan dath is cùl -fhiosrachaidh rim faighinn cuideachd airson luachan dath a shuidheachadh color
agus background-color
a chleachdadh .500
A 'cruthachadh ghoireasan
Air a chur ris ann an v5.1.0
Chan eil Bootstrap a’ toirt a-steach color
agus background-color
goireasan airson gach caochladair dath, ach faodaidh tu iad sin a ghineadh leis an API goireasach againn agus na mapaichean Sass leudaichte againn air an cur ris ann an v5.1.0.
- Gus tòiseachadh, dèan cinnteach gu bheil thu air ar gnìomhan, caochladairean, measgachadh agus goireasan a thoirt a-steach.
- Cleachd ar
map-merge-multiple()
gnìomh gus grunn mhapaichean Sass a chur còmhla gu sgiobalta ann am mapa ùr. - Cuir còmhla am mapa ùr seo gus goireas sam bith a leudachadh le
{color}-{level}
ainm clas.
Seo eisimpleir a bhios a’ gineadh goireasan dath teacsa (me, .text-purple-500
) a’ cleachdadh nan ceumannan gu h-àrd.
@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";
Ginidh seo .text-{color}-{level}
goireasan ùra airson gach dath agus ìre. Faodaidh tu an aon rud a dhèanamh airson goireas agus seilbh sam bith eile cuideachd.