Tae
Kei te tautokohia a Bootstrap e te punaha tae whanui e whakakaupapa ana i o maatau momo me nga waahanga. Ma tenei ka taea te whakarite me te toronga whanui mo tetahi kaupapa.
Tae kaupapa
Ka whakamahia e matou he waahanga o nga tae katoa hei hanga i tetahi papatae tae iti ake mo te whakaputa kaupapa tae, e waatea ana ano hei taurangi Sass me te mapi Sass i te scss/_variables.scss
konae a Bootstrap.
Ko enei tae katoa e waatea ana hei mapi Sass $theme-colors
,.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Tirohia o maatau mapi Sass me nga tuhinga koropiko mo te whakarereke i enei tae.
Katoa nga tae
Kei te waatea nga tae Bootstrap katoa hei taurangi Sass me te mahere Sass kei roto i scss/_variables.scss
te konae. Hei karo i te rahi ake o nga konae, kare matou e hanga i nga karaehe tuhinga, karaehe tae papamuri mo ia o enei taurangi. Engari, ka whiriwhiria e matou he waahanga o enei tae mo te papatae kaupapa .
Me tino aro turuki i nga owehenga rereke i a koe e whakarite ana i nga tae. Ka rite ki te whakaatu i raro nei, kua taapirihia e matou nga rereketanga rereke e toru ki ia o nga tae matua—kotahi mo nga tae o naianei, kotahi mo te ma, me tetahi mo te pango.
Nga korero mo Sass
Kaore e taea e Sass te whakaputa i nga taurangi, no reira i hangaia e matou nga taurangi mo ia tae me te whakamarumaru ia matou ano. Ka tohua e matou te uara o waenga (hei tauira, $blue-500
) ka whakamahi i nga mahi tae ritenga ki te whakakoi (whakamarama) ki te whakamarumaru ranei (whakapouri) o matou tae ma te mix()
mahi tae a Sass.
Ko te whakamahi mix()
kaore i te rite ki te lighten()
me darken()
—ko te mea o mua ka whakakotahi i te tae kua tohua ki te ma, ki te pango ranei, ko te mea whakamutunga ka whakatika noa i te uara mama o ia tae. Ko te hua he huinga tino pai rawa atu o nga tae, e whakaatuhia ana i tenei whakaaturanga CodePen .
Ka whakamahia a maatau tint-color()
me o maatau shade-color()
mahi ki te mix()
taha o ta maatau $theme-color-interval
taurangi, e tohu ana i te uara pahekeheke mo ia tae whakauru ka mahia e matou. Tirohia te scss/_functions.scss
me nga scss/_variables.scss
konae mo te katoa o te waehere puna.
Mahere Sass Tae
Kei roto i nga konae Sass puna a Bootstrap nga mapi e toru hei awhina i a koe ki te huri tere me te ngawari ki runga i te rarangi o nga tae me o raatau uara hex.
$colors
ka whakarārangihia o maatau turanga (500
) tae katoa$theme-colors
ka whakarārangihia nga tae kaupapa katoa kua whakaingoatia (e whakaatuhia ana i raro nei)$grays
e whakarārangi ana i ngā kakano katoa me ngā atarangi hina
I roto scss/_variables.scss
, ka kitea e koe nga taurangi tae o Bootstrap me te mapi Sass. Anei tetahi tauira o te $colors
mapi 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
);
Tāpiri, tango, whakakē ranei i nga uara i roto i te mapi hei whakahōu me pehea te whakamahi i roto i te maha atu o nga waahanga. Engari i tenei wa, kaore nga waahanga katoa e whakamahi ana i tenei mahere Sass. Ko nga whakahoutanga a meake nei ka ngana ki te whakapai ake i tenei. Kia tae ra ano, whakamaherehia te whakamahi i nga ${color}
taurangi me tenei mahere Sass.
Tauira
Anei me pehea e taea ai e koe te whakamahi i enei i roto i to Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Kei te waatea hoki nga karaehe whaipainga tae me te papamuricolor
mo te whakarite me background-color
te whakamahi i nga 500
uara tae.
Te whakaputa taputapu
Kua taapirihia ki te v5.1.0
Karekau a Bootstrap te whakauru color
me background-color
nga taputapu mo ia taurangi tae, engari ka taea e koe te whakaputa i enei ma o maatau API whaipainga me o maatau mapi Sass kua taapirihia ki te v5.1.0.
- Hei timata, kia mohio kua kawemai koe i o maatau mahi, taurangi, whakauru, me nga taputapu.
- Whakamahia ta maatau
map-merge-multiple()
mahi ki te hanumi i nga mapi Sass maha ki tetahi mapi hou. - Hanumi tenei mapi whakakotahi hou ki te whakawhānui i tetahi taputapu whai
{color}-{level}
ingoa akomanga.
Anei tetahi tauira e whakaputa ana i nga taputapu tae o te kuputuhi (hei tauira, .text-purple-500
) ma te whakamahi i nga waahanga o runga ake nei.
@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";
Ma tenei ka whakaputa .text-{color}-{level}
taputapu hou mo ia tae me nga taumata. Ka taea e koe te mahi pera mo etahi atu taputapu me nga rawa.