រំលងទៅមាតិកាសំខាន់ រំលងទៅការរុករកឯកសារ
Check
in English

ពណ៌

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ឯកសារ។ ដើម្បីជៀសវាងការបង្កើនទំហំឯកសារ យើងមិនបង្កើតថ្នាក់ពណ៌អត្ថបទ ឬផ្ទៃខាងក្រោយសម្រាប់អថេរនីមួយៗទាំងនេះទេ។ ជំនួសមកវិញ យើងជ្រើសរើសសំណុំរងនៃពណ៌ទាំងនេះសម្រាប់ ក្ដារលាយពណ៌

ត្រូវប្រាកដថាតាមដានសមាមាត្រកម្រិតពណ៌នៅពេលអ្នកប្ដូរពណ៌តាមបំណង។ ដូចដែលបានបង្ហាញខាងក្រោម យើងបានបន្ថែមសមាមាត្រកម្រិតពណ៌ចំនួនបីចំពោះពណ៌ចម្បងនីមួយៗ មួយសម្រាប់ពណ៌បច្ចុប្បន្នរបស់នាឡិកា មួយសម្រាប់ប្រឆាំងនឹងពណ៌ស និងមួយទៀតសម្រាប់ពណ៌ខ្មៅ។

$ ពណ៌ខៀវ#0d6efd
ខៀវ - ១០០ ដុល្លារ
ពណ៌ខៀវ - ២០០ ដុល្លារ
ពណ៌ខៀវ - ៣០០ ដុល្លារ
ពណ៌ខៀវ - ៤០០ ដុល្លារ
ពណ៌ខៀវ - ៥០០ ដុល្លារ
ពណ៌ខៀវ - ៦០០ ដុល្លារ
ពណ៌ខៀវ - ៧០០ ដុល្លារ
ពណ៌ខៀវ - ៨០០ ដុល្លារ
ពណ៌ខៀវ - ៩០០ ដុល្លារ
$ indigo#6610f2
indigo-100 ដុល្លារ
indigo-200 ដុល្លារ
indigo-៣០០ ដុល្លារ
indigo-៤០០ ដុល្លារ
indigo-500 ដុល្លារ
indigo-600 ដុល្លារ
indigo-700 ដុល្លារ
indigo-800 ដុល្លារ
indigo-900 ដុល្លារ
$ ពណ៌ស្វាយ#6f42c1
ពណ៌ស្វាយ - ១០០ ដុល្លារ
ពណ៌ស្វាយ - ២០០ ដុល្លារ
ពណ៌ស្វាយ - ៣០០ ដុល្លារ
ពណ៌ស្វាយ - ៤០០ ដុល្លារ
ពណ៌ស្វាយ - ៥០០ ដុល្លារ
ពណ៌ស្វាយ - ៦០០ ដុល្លារ
ពណ៌ស្វាយ - ៧០០ ដុល្លារ
ពណ៌ស្វាយ - ៨០០ ដុល្លារ
ពណ៌ស្វាយ - ៩០០ ដុល្លារ
$ ពណ៌ផ្កាឈូក#d63384
ពណ៌ផ្កាឈូក - ១០០ ដុល្លារ
ពណ៌ផ្កាឈូក - ២០០ ដុល្លារ
ពណ៌ផ្កាឈូក - ៣០០ ដុល្លារ
ពណ៌ផ្កាឈូក - ៤០០ ដុល្លារ
ពណ៌ផ្កាឈូក - ៥០០ ដុល្លារ
ពណ៌ផ្កាឈូក - ៦០០ ដុល្លារ
ពណ៌ផ្កាឈូក - ៧០០ ដុល្លារ
ពណ៌ផ្កាឈូក - ៨០០ ដុល្លារ
ពណ៌ផ្កាឈូក - ៩០០ ដុល្លារ
$ ក្រហម#dc3545
ក្រហម - ១០០ ដុល្លារ
ក្រហម - ២០០ ដុល្លារ
ក្រហម - ៣០០ ដុល្លារ
ក្រហម - ៤០០ ដុល្លារ
ក្រហម - ៥០០ ដុល្លារ
ក្រហម - ៦០០ ដុល្លារ
ក្រហម - ៧០០ ដុល្លារ
ក្រហម - ៨០០ ដុល្លារ
ក្រហម - ៩០០ ដុល្លារ
$ ពណ៌ទឹកក្រូច#fd7e14
ទឹកក្រូច - ១០០ ដុល្លារ
ទឹកក្រូច - ២០០ ដុល្លារ
ទឹកក្រូច - ៣០០ ដុល្លារ
ទឹកក្រូច - ៤០០ ដុល្លារ
ទឹកក្រូច - 500 ដុល្លារ
ទឹកក្រូច - ៦០០ ដុល្លារ
ទឹកក្រូច - ៧០០ ដុល្លារ
ទឹកក្រូច - ៨០០ ដុល្លារ
ទឹកក្រូច - ៩០០ ដុល្លារ
$ លឿង#ffc107
លឿង - ១០០ ដុល្លារ
លឿង - ២០០ ដុល្លារ
លឿង - ៣០០ ដុល្លារ
ពណ៌លឿង - ៤០០ ដុល្លារ
ពណ៌លឿង - ៥០០ ដុល្លារ
លឿង - ៦០០ ដុល្លារ
ពណ៌លឿង - ៧០០ ដុល្លារ
លឿង - ៨០០ ដុល្លារ
លឿង - ៩០០ ដុល្លារ
$ បៃតង#១៩៨៧៥៤
បៃតង - ១០០ ដុល្លារ
បៃតង - ២០០ ដុល្លារ
បៃតង - ៣០០ ដុល្លារ
បៃតង - ៤០០ ដុល្លារ
បៃតង - ៥០០ ដុល្លារ
បៃតង - ៦០០ ដុល្លារ
បៃតង - ៧០០ ដុល្លារ
បៃតង - ៨០០ ដុល្លារ
បៃតង - ៩០០ ដុល្លារ
$ ពណ៌ខៀវខ្ចី#20c997
បៃតងខ្ចី - ១០០ ដុល្លារ
ស្លឹកត្នោត - ២០០ ដុល្លារ
- ៣០០ ដុល្លារ
- ៤០០ ដុល្លារ
- 500 ដុល្លារ
បៃតងខ្ចី - ៦០០ ដុល្លារ
បៃតងខ្ចី - ៧០០ ដុល្លារ
ស្លឹកត្នោត - ៨០០ ដុល្លារ
ស្លឹកត្នោត - ៩០០ ដុល្លារ
$ ពណ៌ខៀវ#0dcaf0
ខៀវ - ១០០ ដុល្លារ
ខៀវ - ២០០ ដុល្លារ
ខៀវ - ៣០០ ដុល្លារ
ពណ៌ខៀវ - ៤០០ ដុល្លារ
ពណ៌ខៀវ - 500 ដុល្លារ
ខៀវ - ៦០០ ដុល្លារ
ខៀវ - ៧០០ ដុល្លារ
ខៀវ - ៨០០ ដុល្លារ
ខៀវ - ៩០០ ដុល្លារ
ពណ៌ប្រផេះ - ៥០០ ដុល្លារ#adb5bd
ពណ៌ប្រផេះ - ១០០ ដុល្លារ
ពណ៌ប្រផេះ - ២០០ ដុល្លារ
ពណ៌ប្រផេះ - ៣០០ ដុល្លារ
ពណ៌ប្រផេះ - ៤០០ ដុល្លារ
ពណ៌ប្រផេះ - ៥០០ ដុល្លារ
ពណ៌ប្រផេះ - ៦០០ ដុល្លារ
ពណ៌ប្រផេះ - ៧០០ ដុល្លារ
ពណ៌ប្រផេះ - ៨០០ ដុល្លារ
ពណ៌ប្រផេះ - ៩០០ ដុល្លារ
$ ខ្មៅ#០០០
$ ពណ៌ស#fff

កំណត់ចំណាំនៅលើ 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,
  "black":      $black,
  "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 ។

  1. ដើម្បីចាប់ផ្តើម សូមប្រាកដថាអ្នកបាននាំចូលមុខងារ អថេរ ល្បាយ និងឧបករណ៍ប្រើប្រាស់របស់យើង។
  2. ប្រើ map-merge-multiple()មុខងាររបស់យើងដើម្បីបញ្ចូលផែនទី Sass ជាច្រើនបញ្ចូលគ្នាយ៉ាងរហ័សនៅក្នុងផែនទីថ្មីមួយ។
  3. បញ្ចូលផែនទីរួមបញ្ចូលគ្នាថ្មីនេះ ដើម្បីពង្រីកឧបករណ៍ប្រើប្រាស់ណាមួយដែល {color}-{level}មានឈ្មោះថ្នាក់។

នេះជាឧទាហរណ៍ដែលបង្កើតឧបករណ៍ប្រើប្រាស់ពណ៌អត្ថបទ (ឧ. .text-purple-500) ដោយប្រើជំហានខាងលើ។

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@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}ឧបករណ៍ប្រើប្រាស់ថ្មីសម្រាប់គ្រប់ពណ៌ និងកម្រិត។ អ្នកក៏អាចធ្វើដូចគ្នាសម្រាប់ឧបករណ៍ប្រើប្រាស់ និងទ្រព្យសម្បត្តិផ្សេងទៀតផងដែរ។