loko
Bootstrap dia tohanan'ny rafitra miloko midadasika izay manome lohahevitra ny fomba sy ny singantsika. Izany dia mamela ny fanamboarana sy fanitarana feno kokoa ho an'ny tetikasa rehetra.
Loko lohahevitra
Mampiasa ampahany amin'ny loko rehetra izahay mba hamoronana palette miloko kely kokoa amin'ny famokarana loko, azo alaina ihany koa amin'ny maha-samihafa Sass sy sarintany Sass ao amin'ny scss/_variables.scss
rakitra Bootstrap.
Ireo loko rehetra ireo dia azo alaina amin'ny sarintany Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Jereo ny sari-tanin'i Sass sy ny dosie loops momba ny fomba hanovana ireo loko ireo.
Ny loko rehetra
Ny loko Bootstrap rehetra dia azo alaina amin'ny maha-samihafa Sass sy sarintany Sass ao scss/_variables.scss
anaty rakitra. Mba hialana amin'ny fitomboan'ny haben'ny rakitra dia tsy mamorona lahatsoratra na kilasy loko fototra ho an'ny tsirairay amin'ireo fari-pahalalana ireo izahay. Fa kosa, misafidy ampahany amin'ireo loko ireo ho an'ny palette lohahevitra izahay .
Aza hadino ny manara-maso ny tahan'ny fifanoherana rehefa manamboatra loko ianao. Araka ny aseho etsy ambany, dia nampiana fifanoherana telo tamin'ny loko lehibe tsirairay izahay—ny iray ho an'ny lokon'ny swatch amin'izao fotoana izao, ny iray manohitra ny fotsy ary ny iray manohitra ny mainty.
Fanamarihana momba ny Sass
Sass dia tsy afaka mamokatra varimbazaha amin'ny programa, noho izany dia namorona varimbazaha ho an'ny loko sy alokaloka rehetra izahay. Manondro ny sandan'ny teboka afovoany (oh, $blue-500
) izahay ary mampiasa ny loko mahazatra mba hanamaivanana (hanamaivana) na hanalokaloka (manamaizina) ny lokonay amin'ny alàlan'ny mix()
fiasan'ny lokon'i Sass.
Ny fampiasana mix()
dia tsy mitovy amin'ny lighten()
ary darken()
— ny teo aloha dia mampifangaro ny loko voatondro amin'ny fotsy na mainty, fa ity farany kosa dia manitsy ny sandan'ny fahamaivanan'ny loko tsirairay. Ny vokatra dia loko feno kokoa, araka ny aseho amin'ity demo CodePen ity .
Ny antsika tint-color()
sy ny shade-color()
fiasa dia ampiasaina mix()
miaraka amin'ny $theme-color-interval
fari-piainantsika, izay mamaritra ny sandan'ny isan-jato amin'ny loko mifangaro tsirairay avoakantsika. Jereo ny scss/_functions.scss
sy ny scss/_variables.scss
rakitra ho an'ny kaody loharano feno.
Color Sass sarintany
Ny rakitra Sass loharanon'ny Bootstrap dia misy sarintany telo hanampy anao haingana sy mora amin'ny lisitry ny loko sy ny sanda hex.
$colors
mitanisa ny500
loko fototra rehetra () misy antsika$theme-colors
mitanisa ny loko lohahevitra rehetra nomena anarana (aseho etsy ambany)$grays
mitanisa ny loko rehetra sy ny loko volondavenona
Ao anatin'ny scss/_variables.scss
, dia ho hitanao ny fiovan'ny loko Bootstrap sy ny sarintany Sass. Ity misy ohatra iray amin'ny $colors
sarintany 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
);
Ampio, esory, na ovao ny soatoavina ao anatin'ny sari-tany mba hanavaozana ny fomba ampiasana azy amin'ny singa maro hafa. Indrisy anefa fa tsy ny singa rehetra no mampiasa ity sari-tany Sass ity. Ny fanavaozana ho avy dia hiezaka hanatsara izany. Mandra-pahatongan'izany, mikasa ny hampiasa ireo ${color}
fari-piainana sy ity sarintany Sass ity.
OHATRA
Ity ny fomba ahafahanao mampiasa ireto amin'ny Sass anao:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Ny kilasin'ny fampiasa amin'ny loko sy ny lamosina dia azo atao ihany koa amin'ny fametrahana color
sy background-color
fampiasana ny 500
sandan'ny loko.