warna
Bootstrap didhukung dening sistem werna ekstensif sing tema gaya lan komponen kita. Iki mbisakake kustomisasi lan ekstensi sing luwih lengkap kanggo proyek apa wae.
Warna tema
Kita nggunakake subset kabeh warna kanggo nggawe palet warna sing luwih cilik kanggo ngasilake skema warna, uga kasedhiya minangka variabel Sass lan peta Sass ing scss/_variables.scss
file Bootstrap.
Kabeh werna iki kasedhiya minangka peta Sass $theme-colors
,.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Priksa peta Sass lan puteran docs kanggo carane ngowahi werna iki.
Kabeh werna
Kabeh werna Bootstrap kasedhiya minangka variabel Sass lan peta Sass ing scss/_variables.scss
file. Kanggo ngindhari ukuran file sing tambah akeh, kita ora nggawe kelas warna teks utawa latar mburi kanggo saben variabel kasebut. Nanging, kita milih subset saka werna kasebut kanggo palet tema .
Priksa manawa sampeyan ngawasi rasio kontras nalika ngatur warna. Kaya sing dituduhake ing ngisor iki, kita wis nambahake telung rasio kontras kanggo saben warna utama-siji kanggo warna swatch saiki, siji kanggo putih, lan siji kanggo ireng.
Cathetan babagan Sass
Sass ora bisa ngasilake variabel kanthi program, mula kita nggawe variabel kanthi manual kanggo saben warna lan iyub-iyub. Kita nemtokake nilai midpoint (contone, $blue-500
) lan nggunakake fungsi werna adat kanggo tint (entheng) utawa shade (darken) werna liwat mix()
fungsi werna Sass.
Nggunakake mix()
ora padha karo lighten()
lan darken()
- mantan nyampur warna sing ditemtokake karo putih utawa ireng, dene sing terakhir mung nyetel nilai cahya saben werna. Asil kasebut minangka warna sing luwih lengkap, kaya sing ditampilake ing demo CodePen iki .
Kita tint-color()
lan shade-color()
fungsi digunakake mix()
bebarengan karo variabel kita $theme-color-interval
, sing nemtokake nilai persentase langkah kanggo saben warna campuran sing diasilake. Waca scss/_functions.scss
lan scss/_variables.scss
file kanggo kode sumber lengkap.
Peta Warna Sass
File Sass sumber Bootstrap kalebu telung peta kanggo mbantu sampeyan kanthi cepet lan gampang ngubengi dhaptar warna lan nilai hex.
$colors
dhaptar kabeh werna dhasar (500
) sing kasedhiya$theme-colors
dhaptar kabeh warna tema kanthi jeneng semantik (katon ing ngisor iki)$grays
dhaptar kabeh tints lan mbandingake saka werna abu-abu
Ing scss/_variables.scss
, sampeyan bakal nemokake variabel warna Bootstrap lan peta Sass. Punika conto $colors
peta 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
);
Nambah, mbusak, utawa ngowahi nilai ing peta kanggo nganyari cara digunakake ing akeh komponen liyane. Sayange ing wektu iki, ora saben komponen nggunakake peta Sass iki. Nganyari mbesuk bakal ngupayakake supaya bisa nambah. Nganti saiki, rencana nggunakake ${color}
variabel lan peta Sass iki.
Tuladha
Mangkene carane sampeyan bisa nggunakake iki ing Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Kelas sarana warna lan latarcolor
mburi uga kasedhiya kanggo nyetel lan background-color
nggunakake 500
nilai warna.