ពណ៌
Bootstrap ត្រូវបានគាំទ្រដោយប្រព័ន្ធពណ៌យ៉ាងទូលំទូលាយដែលកំណត់រចនាប័ទ្មនិងសមាសធាតុរបស់យើង។ នេះអនុញ្ញាតឱ្យមានការប្ដូរតាមបំណង និងផ្នែកបន្ថែមដ៏ទូលំទូលាយបន្ថែមទៀតសម្រាប់គម្រោងណាមួយ។
ពណ៌ប្រធានបទ
យើងប្រើសំណុំរងនៃពណ៌ទាំងអស់ដើម្បីបង្កើតក្ដារលាយពណ៌តូចជាងសម្រាប់បង្កើតពណ៌ចម្រុះ ក៏មានជាអថេរ Sass និងផែនទី Sass នៅក្នុង scss/_variables.scss
ឯកសាររបស់ Bootstrap ។
ពណ៌ទាំងអស់នេះមានជាផែនទី Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
សូមពិនិត្យមើល ផែនទី Sass និងឯកសាររង្វិលជុំរបស់យើង សម្រាប់របៀបកែប្រែពណ៌ទាំងនេះ។
ពណ៌ទាំងអស់។
ពណ៌ Bootstrap ទាំងអស់មានជាអថេរ Sass និងផែនទី Sass នៅក្នុង scss/_variables.scss
ឯកសារ។ ដើម្បីជៀសវាងការបង្កើនទំហំឯកសារ យើងមិនបង្កើតថ្នាក់ពណ៌អត្ថបទ ឬផ្ទៃខាងក្រោយសម្រាប់អថេរនីមួយៗទាំងនេះទេ។ ជំនួសមកវិញ យើងជ្រើសរើសសំណុំរងនៃពណ៌ទាំងនេះសម្រាប់ ក្ដារលាយពណ៌ ។
ត្រូវប្រាកដថាតាមដានសមាមាត្រកម្រិតពណ៌នៅពេលអ្នកប្ដូរពណ៌តាមបំណង។ ដូចដែលបានបង្ហាញខាងក្រោម យើងបានបន្ថែមសមាមាត្រកម្រិតពណ៌ចំនួនបីចំពោះពណ៌ចម្បងនីមួយៗ មួយសម្រាប់ពណ៌បច្ចុប្បន្នរបស់នាឡិកា មួយសម្រាប់ប្រឆាំងនឹងពណ៌ស និងមួយទៀតសម្រាប់ពណ៌ខ្មៅ។
កំណត់ចំណាំនៅលើ Sass
Sass មិនអាចបង្កើតអថេរតាមកម្មវិធីបានទេ ដូច្នេះយើងបានបង្កើតអថេរសម្រាប់រាល់ពណ៌ និងដាក់ស្រមោលដោយខ្លួនឯង។ យើងបញ្ជាក់តម្លៃចំណុចកណ្តាល (ឧ. ) ហើយប្រើមុខងារពណ៌ផ្ទាល់ខ្លួនដើម្បី tint (lighten) ឬ shade ( darken) ពណ៌របស់យើងតាមរយៈ មុខងារពណ៌ $blue-500
របស់ Sass ។mix()
ការប្រើប្រាស់ mix()
គឺមិនដូចគ្នាទេ lighten()
ហើយ darken()
- អតីតលាយពណ៌ដែលបានបញ្ជាក់ជាមួយពណ៌ស ឬខ្មៅ ខណៈពេលដែលពណ៌ក្រោយកែសំរួលតែតម្លៃពន្លឺនៃពណ៌នីមួយៗប៉ុណ្ណោះ។ លទ្ធផលគឺជាឈុតពណ៌ដែលមានលក្ខណៈពេញលេញជាងនេះ ដូចដែល បានបង្ហាញក្នុងការបង្ហាញ CodePen នេះ ។
មុខងារ របស់យើង tint-color()
និង shade-color()
ប្រើប្រាស់ mix()
ជាមួយ $theme-color-interval
អថេររបស់យើង ដែលបញ្ជាក់តម្លៃភាគរយជាជំហានៗសម្រាប់ពណ៌ចម្រុះនីមួយៗដែលយើងផលិត។ សូមមើល scss/_functions.scss
និង scss/_variables.scss
ឯកសារសម្រាប់កូដប្រភពពេញលេញ។
ផែនទីពណ៌ Sass
ឯកសារ Sass ប្រភពរបស់ Bootstrap រួមមានផែនទីចំនួនបីដើម្បីជួយអ្នកបានយ៉ាងរហ័ស និងងាយស្រូលលើបញ្ជីពណ៌ និងតម្លៃគោលដប់ប្រាំមួយ។
$colors
រាយ500
ពណ៌មូលដ្ឋានដែលមាន () របស់យើងទាំងអស់។$theme-colors
រាយពណ៌ស្បែកដែលមានឈ្មោះតាមន័យធៀបទាំងអស់ (បង្ហាញខាងក្រោម)$grays
រាយពណ៌ និងស្រមោលពណ៌ប្រផេះទាំងអស់។
នៅខាងក្នុង scss/_variables.scss
អ្នកនឹងឃើញអថេរពណ៌របស់ Bootstrap និងផែនទី Sass ។ នេះជាឧទាហរណ៍នៃ $colors
ផែនទី 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
);
បន្ថែម លុប ឬកែប្រែតម្លៃនៅក្នុងផែនទី ដើម្បីធ្វើបច្ចុប្បន្នភាពពីរបៀបដែលពួកវាត្រូវបានប្រើប្រាស់នៅក្នុងសមាសធាតុជាច្រើនទៀត។ ជាអកុសលនៅពេលនេះ មិនមែន គ្រប់ សមាសធាតុទាំងអស់ប្រើប្រាស់ផែនទី Sass នេះទេ។ ការធ្វើបច្ចុប្បន្នភាពនាពេលអនាគតនឹងខិតខំកែលម្អលើបញ្ហានេះ។ រហូតមកដល់ពេលនោះ គ្រោងនឹងប្រើប្រាស់ ${color}
អថេរ និងផែនទី Sass នេះ។
ឧទាហរណ៍
នេះជារបៀបដែលអ្នកអាចប្រើវានៅក្នុង Sass របស់អ្នក៖
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
ថ្នាក់ឧបករណ៍ប្រើប្រាស់ ពណ៌ និង ផ្ទៃខាងក្រោយ ក៏មានសម្រាប់កំណត់ color
និង background-color
ប្រើប្រាស់ 500
តម្លៃពណ៌ផងដែរ។
ការបង្កើតឧបករណ៍ប្រើប្រាស់
បានបន្ថែមនៅក្នុង v5.1.0
Bootstrap មិនរួមបញ្ចូល color
និង background-color
ឧបករណ៍ប្រើប្រាស់សម្រាប់រាល់អថេរពណ៌ទាំងអស់ ប៉ុន្តែអ្នកអាចបង្កើតវាដោយខ្លួនឯងជាមួយនឹង Utility API និងផែនទី Sass ដែលបានបន្ថែមរបស់យើងដែលបានបន្ថែមនៅក្នុង v5.1.0 ។
- ដើម្បីចាប់ផ្តើម សូមប្រាកដថាអ្នកបាននាំចូលមុខងារ អថេរ ល្បាយ និងឧបករណ៍ប្រើប្រាស់របស់យើង។
- ប្រើ
map-merge-multiple()
មុខងាររបស់យើងដើម្បីបញ្ចូលផែនទី Sass ជាច្រើនបញ្ចូលគ្នាយ៉ាងរហ័សនៅក្នុងផែនទីថ្មីមួយ។ - បញ្ចូលផែនទីរួមបញ្ចូលគ្នាថ្មីនេះ ដើម្បីពង្រីកឧបករណ៍ប្រើប្រាស់ណាមួយដែល
{color}-{level}
មានឈ្មោះថ្នាក់។
នេះជាឧទាហរណ៍ដែលបង្កើតឧបករណ៍ប្រើប្រាស់ពណ៌អត្ថបទ (ឧ. .text-purple-500
) ដោយប្រើជំហានខាងលើ។
@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";
វានឹងបង្កើត .text-{color}-{level}
ឧបករណ៍ប្រើប្រាស់ថ្មីសម្រាប់គ្រប់ពណ៌ និងកម្រិត។ អ្នកក៏អាចធ្វើដូចគ្នាសម្រាប់ឧបករណ៍ប្រើប្រាស់ និងទ្រព្យសម្បត្តិផ្សេងទៀតផងដែរ។