in English

Theming Bootstrap

ប្ដូរ Bootstrap 4 តាមបំណងជាមួយនឹងអថេរ Sass ដែលភ្ជាប់មកជាមួយថ្មីរបស់យើងសម្រាប់ចំណូលចិត្តរចនាប័ទ្មសកលសម្រាប់ការផ្លាស់ប្តូររូបរាង និងសមាសធាតុងាយស្រួល។

សេចក្តីផ្តើម

នៅក្នុង Bootstrap 3 រូបរាងត្រូវបានជំរុញយ៉ាងច្រើនដោយការបដិសេធអថេរនៅក្នុង LESS, CSS ផ្ទាល់ខ្លួន និងសន្លឹករចនាប័ទ្មស្បែកដាច់ដោយឡែកដែលយើងបានរួមបញ្ចូលនៅក្នុង distឯកសាររបស់យើង។ ជាមួយនឹងការខិតខំប្រឹងប្រែងខ្លះ មនុស្សម្នាក់អាចរចនារូបរាងឡើងវិញទាំងស្រុងរបស់ Bootstrap 3 ដោយមិនចាំបាច់ប៉ះឯកសារស្នូល។ Bootstrap 4 ផ្តល់នូវវិធីសាស្រ្តដែលធ្លាប់ស្គាល់ ប៉ុន្តែខុសគ្នាបន្តិចបន្តួច។

ឥឡូវនេះ ការរៀបចំត្រូវបានសម្រេចដោយ Sass variables ផែនទី Sass និង CSS ផ្ទាល់ខ្លួន។ មិន​មាន​សន្លឹក​រចនាប័ទ្ម​រចនាប័ទ្ម​ពិសេស​ទៀត​ទេ; ជំនួសមកវិញ អ្នកអាចបើករូបរាងដែលភ្ជាប់មកជាមួយដើម្បីបន្ថែមពណ៌ជម្រាល ស្រមោល និងច្រើនទៀត។

សាស

ប្រើប្រាស់ឯកសារ Sass ប្រភពរបស់យើង ដើម្បីទាញយកអត្ថប្រយោជន៍ពីអថេរ ផែនទី mixins និងច្រើនទៀតនៅពេល ចងក្រង Sass ដោយប្រើបំពង់បង្ហូរទ្រព្យសកម្មរបស់អ្នក។

រចនាសម្ព័ន្ធឯកសារ

នៅពេលណាដែលអាចធ្វើទៅបាន ជៀសវាងការកែប្រែឯកសារស្នូលរបស់ Bootstrap ។ សម្រាប់ Sass មានន័យថាបង្កើតសន្លឹករចនាប័ទ្មផ្ទាល់ខ្លួនរបស់អ្នកដែលនាំចូល Bootstrap ដូច្នេះអ្នកអាចកែប្រែ និងពង្រីកវាបាន។ សន្មតថាអ្នកកំពុងប្រើកម្មវិធីគ្រប់គ្រងកញ្ចប់ដូចជា npm អ្នកនឹងមានរចនាសម្ព័ន្ធឯកសារដែលមើលទៅដូចនេះ៖

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

ប្រសិនបើអ្នកបានទាញយកឯកសារប្រភពរបស់យើង ហើយមិនប្រើកម្មវិធីគ្រប់គ្រងកញ្ចប់ អ្នកនឹងចង់រៀបចំអ្វីមួយដែលស្រដៀងនឹងរចនាសម្ព័ន្ធនោះដោយដៃ ដោយរក្សាឯកសារប្រភពរបស់ Bootstrap ដាច់ដោយឡែកពីខ្លួនអ្នក។

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

ការនាំចូល

នៅក្នុងរបស់ custom.scssអ្នក អ្នកនឹងនាំចូលឯកសារ Sass ប្រភពរបស់ Bootstrap ។ អ្នកមានជម្រើសពីរ៖ រួមបញ្ចូល Bootstrap ទាំងអស់ ឬជ្រើសរើសផ្នែកដែលអ្នកត្រូវការ។ យើងលើកទឹកចិត្តអ្នកចុងក្រោយ ទោះបីជាត្រូវដឹងថាមានតម្រូវការ និងភាពអាស្រ័យមួយចំនួននៅទូទាំងសមាសធាតុរបស់យើង។ អ្នកក៏នឹងត្រូវបញ្ចូល JavaScript មួយចំនួនសម្រាប់កម្មវិធីជំនួយរបស់យើង។

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

ជាមួយនឹងការរៀបចំនោះ អ្នកអាចចាប់ផ្តើមកែប្រែអថេរ Sass និងផែនទីណាមួយនៅក្នុងរបស់អ្នក custom.scss។ អ្នកក៏អាចចាប់ផ្តើមបន្ថែមផ្នែកនៃ Bootstrap នៅក្រោម // Optionalផ្នែកតាមតម្រូវការ។ យើងស្នើឱ្យប្រើជង់នាំចូលពេញលេញពី bootstrap.scssឯកសាររបស់យើងជាចំណុចចាប់ផ្តើមរបស់អ្នក។

លំនាំដើមអថេរ

រាល់អថេរ Sass ក្នុង Bootstrap រួមមាន !defaultទង់ដែលអនុញ្ញាតឱ្យអ្នកបដិសេធតម្លៃលំនាំដើមរបស់អថេរនៅក្នុង Sass របស់អ្នកដោយមិនចាំបាច់កែប្រែកូដប្រភពរបស់ Bootstrap ។ ចម្លង និងបិទភ្ជាប់អថេរតាមតម្រូវការ កែប្រែតម្លៃរបស់វា និងដក !defaultទង់ចេញ។ ប្រសិនបើអថេរត្រូវបានចាត់ចែងរួចហើយ នោះវានឹងមិនត្រូវបានចាត់ចែងឡើងវិញដោយតម្លៃលំនាំដើមនៅក្នុង Bootstrap ទេ។

អ្នកនឹងឃើញបញ្ជីពេញលេញនៃអថេររបស់ Bootstrap នៅក្នុង scss/_variables.scss. អថេរមួយចំនួនត្រូវបានកំណត់ទៅ nullអថេរទាំងនេះមិនបញ្ចេញទ្រព្យសម្បត្តិទេ លុះត្រាតែពួកវាត្រូវបានបដិសេធក្នុងការកំណត់របស់អ្នក។

ការបដិសេធអថេរត្រូវតែកើតឡើងបន្ទាប់ពីមុខងារ អថេរ និង mixin របស់យើងត្រូវបាននាំចូល ប៉ុន្តែមុនពេលការនាំចូលដែលនៅសល់។

នេះជាឧទាហរណ៍ដែលផ្លាស់ប្តូរ background-colorនិង colorសម្រាប់ <body>ពេលនាំចូល និងចងក្រង Bootstrap តាមរយៈ npm៖

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

ធ្វើម្តងទៀតតាមការចាំបាច់សម្រាប់អថេរណាមួយនៅក្នុង Bootstrap រួមទាំងជម្រើសសកលខាងក្រោម។

ចាប់ផ្តើមជាមួយ Bootstrap តាមរយៈ npm ជាមួយគម្រោងចាប់ផ្តើមរបស់យើង! ទៅកាន់កន្លែង ផ្ទុកពុម្ពគំរូ tws/bootstrap-npm-starter ដើម្បីមើលពីរបៀបបង្កើត និងកំណត់ Bootstrap តាមបំណងនៅក្នុងគម្រោង npm ផ្ទាល់ខ្លួនរបស់អ្នក។ រួមបញ្ចូល Sass compiler, Autoprefixer, Stylelint, PurgeCSS និង Bootstrap Icons ។

ផែនទីនិងរង្វិលជុំ

Bootstrap 4 រួមបញ្ចូលផែនទី Sass មួយក្តាប់តូច ដែលជាគូតម្លៃសំខាន់ៗ ដែលធ្វើឱ្យវាកាន់តែងាយស្រួលក្នុងការបង្កើតក្រុមគ្រួសារនៃ CSS ដែលពាក់ព័ន្ធ។ យើងប្រើផែនទី Sass សម្រាប់ពណ៌របស់យើង ចំណុចបំបែកក្រឡា និងច្រើនទៀត។ ដូចគ្នានឹងអថេរ Sass ដែរ ផែនទី Sass ទាំងអស់រួមបញ្ចូល !defaultទង់ជាតិ ហើយអាចត្រូវបានបដិសេធ និងពង្រីក។

ផែនទី Sass មួយចំនួនរបស់យើងត្រូវបានបញ្ចូលទៅក្នុងទទេតាមលំនាំដើម។ នេះត្រូវបានធ្វើដើម្បីអនុញ្ញាតឱ្យងាយស្រួលក្នុងការពង្រីកផែនទី Sass ដែលបានផ្តល់ឱ្យ ប៉ុន្តែមកជាមួយតម្លៃនៃការធ្វើឱ្យ ការដក ធាតុចេញពីផែនទីពិបាកជាងបន្តិច។

កែប្រែផែនទី

ដើម្បីកែប្រែពណ៌ដែលមានស្រាប់នៅក្នុង $theme-colorsផែនទីរបស់យើង សូមបន្ថែមខាងក្រោមទៅឯកសារ Sass ផ្ទាល់ខ្លួនរបស់អ្នក៖

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

បន្ថែមទៅផែនទី

ដើម្បីបន្ថែមពណ៌ថ្មីទៅ $theme-colorsបន្ថែមសោថ្មី និងតម្លៃ៖

$theme-colors: (
  "custom-color": #900
);

យកចេញពីផែនទី

ដើម្បីលុបពណ៌ចេញពី $theme-colorsឬផែនទីផ្សេងទៀត សូមប្រើ map-remove. ត្រូវដឹងថាអ្នកត្រូវតែបញ្ចូលវារវាងតម្រូវការ និងជម្រើសរបស់យើង៖

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

សោដែលត្រូវការ

Bootstrap សន្មត់ថាវត្តមាននៃសោជាក់លាក់មួយចំនួននៅក្នុង Sass maps ដូចដែលយើងបានប្រើ និងពង្រីកវាដោយខ្លួនឯង។ នៅពេលអ្នកប្ដូរផែនទីដែលបានរួមបញ្ចូលតាមបំណង អ្នកអាចជួបប្រទះនឹងបញ្ហាដែលគន្លឹះនៃផែនទី Sass ជាក់លាក់មួយកំពុងត្រូវបានប្រើប្រាស់។

ឧទាហរណ៍ យើងប្រើ គ្រាប់ចុច , និងពី primaryសម្រាប់ successតំណ ប៊ូតុង និងស្ថានភាពទម្រង់។ ការជំនួសតម្លៃនៃសោទាំងនេះមិនគួរបង្ហាញបញ្ហានោះទេ ប៉ុន្តែការដកវាចេញអាចបណ្តាលឱ្យមានបញ្ហាក្នុងការចងក្រង Sass ។ នៅក្នុងករណីទាំងនេះ អ្���កនឹងត្រូវកែប្រែកូដ Sass ដែលប្រើតម្លៃទាំងនោះ។danger$theme-colors

មុខងារ

Bootstrap ប្រើប្រាស់មុខងារ Sass ជាច្រើន ប៉ុន្តែមានតែសំណុំរងមួយប៉ុណ្ណោះដែលអាចអនុវត្តបានចំពោះមុខងារទូទៅ។ យើងបានរួមបញ្ចូលមុខងារបីសម្រាប់ការទទួលបានតម្លៃពីផែនទីពណ៌៖

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

ទាំងនេះអនុញ្ញាតឱ្យអ្នកជ្រើសរើសពណ៌មួយពីផែនទី Sass ដូចជារបៀបដែលអ្នកចង់ប្រើអថេរពណ៌ពី v3 ។

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

យើងក៏មានមុខងារមួយទៀតសម្រាប់ការទទួលបាន កម្រិត ពណ៌ជាក់លាក់មួយពី $theme-colorsផែនទី។ តម្លៃ​កម្រិត​អវិជ្ជមាន​នឹង​ធ្វើ​ឱ្យ​ពណ៌​ស្រាល ខណៈ​កម្រិត​ខ្ពស់​នឹង​ងងឹត។

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

នៅក្នុងការអនុវត្ត អ្នកនឹងហៅមុខងារ និងឆ្លងកាត់ក្នុងប៉ារ៉ាម៉ែត្រពីរ៖ ឈ្មោះពណ៌ពី $theme-colors(ឧទាហរណ៍ បឋម ឬគ្រោះថ្នាក់) និងកម្រិតលេខ។

.custom-element {
  color: theme-color-level(primary, -10);
}

មុខងារបន្ថែមអាចត្រូវបានបន្ថែមនៅពេលអនាគត ឬ Sass ផ្ទាល់ខ្លួនរបស់អ្នក ដើម្បីបង្កើតមុខងារកម្រិតសម្រាប់ផែនទី Sass បន្ថែម ឬសូម្បីតែមុខងារទូទៅមួយ ប្រសិនបើអ្នកចង់និយាយច្រើន

កម្រិតពណ៌

មុខងារបន្ថែមដែលយើងបញ្ចូលក្នុង Bootstrap គឺមុខងារកម្រិតពណ៌ color-yiq។ វាប្រើ ចន្លោះពណ៌ YIQ ដើម្បីត្រឡប់ពណ៌ពន្លឺ ( #fff) ឬងងឹត ( #111) ដោយស្វ័យប្រវត្តិ ដោយផ្អែកលើពណ៌មូលដ្ឋានដែលបានបញ្ជាក់។ មុខងារនេះមានប្រយោជន៍ជាពិសេសសម្រាប់ mixins ឬ loops ដែលអ្នកកំពុងបង្កើត class ច្រើន។

ឧទាហរណ៍ ដើម្បីបង្កើតការគូសពណ៌ពី $theme-colorsផែនទីរបស់យើង៖

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

វា​ក៏​អាច​ត្រូវ​បាន​ប្រើ​សម្រាប់​តម្រូវ​ការ​កម្រិត​ពណ៌​តែ​មួយ៖

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

អ្នកក៏អាចបញ្ជាក់ពណ៌មូលដ្ឋានជាមួយនឹងមុខងារផែនទីពណ៌របស់យើងផងដែរ៖

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

រត់គេចពី SVG

យើងប្រើ escape-svgមុខងារដើម្បីគេចចេញពី <, >និង #តួអក្សរសម្រាប់រូបភាពផ្ទៃខាងក្រោយ SVG ។ តួអក្សរទាំងនេះចាំបាច់ត្រូវគេចចេញ ដើម្បីបង្ហាញរូបភាពផ្ទៃខាងក្រោយក្នុង IE ឱ្យបានត្រឹមត្រូវ។ នៅពេលប្រើ escape-svgមុខងារ ទិន្នន័យ URIs ត្រូវតែត្រូវបានដកស្រង់។

មុខងារបន្ថែមនិងដក

យើងប្រើ មុខងារ addនិង subtractមុខងារដើម្បីរុំមុខងារ CSS calc។ គោលបំណងចម្បងនៃមុខងារទាំងនេះគឺដើម្បីជៀសវាងកំហុសនៅពេលដែល 0តម្លៃ "unitless" ត្រូវបានបញ្ជូនទៅក្នុង calcកន្សោមមួយ។ កន្សោម​ដូច calc(10px - 0)​នឹង​បង្ហាញ​កំហុស​នៅ​ក្នុង​កម្មវិធីរុករក​តាម​អ៊ីនធឺណិត​ទាំងអស់ ទោះបី​ជា​ត្រូវ​តាម​គណិតវិទ្យា​ក៏ដោយ។

ឧទាហរណ៍ដែល calc មានសុពលភាព៖

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

ឧទាហរណ៍ដែល calc មិនត្រឹមត្រូវ៖

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

ជម្រើស Sass

ប្ដូរ Bootstrap 4 តាមបំណងជាមួយនឹងឯកសារអថេរផ្ទាល់ខ្លួនដែលភ្ជាប់មកជាមួយរបស់យើង ហើយបិទបើកចំណូលចិត្ត CSS សកលយ៉ាងងាយស្រួលជាមួយនឹង $enable-*អថេរ Sass ថ្មី។ បដិសេធតម្លៃអថេរ និងចងក្រងឡើងវិញ npm run testតាមតម្រូវការ។

scss/_variables.scssអ្នកអាចស្វែងរក និងប្ដូរអថេរទាំងនេះតាមបំណងសម្រាប់ជម្រើសសកលសំខាន់ៗនៅក្នុង ឯកសារ របស់ Bootstrap ។

អថេរ តម្លៃ ការពិពណ៌នា
$spacer 1rem(លំនាំដើម) ឬតម្លៃណាមួយ > 0 បញ្ជាក់តម្លៃ spacer លំនាំដើមដើម្បីបង្កើតកម្មវិធី spacer utilities របស់យើង ។
$enable-rounded true(លំនាំដើម) ឬfalse បើក border-radiusរចនាប័ទ្មដែលបានកំណត់ជាមុនលើសមាសធាតុផ្សេងៗ។
$enable-shadows trueឬ false(លំនាំដើម) box-shadowបើក រចនាប័ទ្ម តុបតែងដែល បានកំណត់ជាមុនលើសមាសធាតុផ្សេងៗ។ មិនប៉ះពាល់ដល់ box-shadows ដែលប្រើសម្រាប់ស្ថានភាពផ្តោតអារម្មណ៍។
$enable-gradients trueឬ false(លំនាំដើម) បើកដំណើរការជម្រាលដែលបានកំណត់ជាមុនតាមរយៈ background-imageរចនាប័ទ្មលើសមាសធាតុផ្សេងៗ។
$enable-transitions true(លំនាំដើម) ឬfalse បើកដំណើរការ transitions ដែលបានកំណត់ជាមុនលើសមាសធាតុផ្សេងៗ។
$enable-prefers-reduced-motion-media-query true(លំនាំដើម) ឬfalse បើកដំណើរការ prefers-reduced-motionសំណួរមេឌៀ ដែលរារាំងចលនា/ដំណើរផ្លាស់ប្តូរជាក់លាក់ដោយផ្អែកលើកម្មវិធីរុករក/ប្រព័ន្ធប្រតិបត្តិការតាមចំណូលចិត្តរបស់អ្នកប្រើប្រាស់។
$enable-hover-media-query trueឬ false(លំនាំដើម) បដិសេធ
$enable-grid-classes true(លំនាំដើម) ឬfalse បើកដំណើរការបង្កើតថ្នាក់ CSS សម្រាប់ប្រព័ន្ធក្រឡាចត្រង្គ (ឧ. , .container, .row, .col-md-1ល។ )។
$enable-caret true(លំនាំដើម) ឬfalse បើកដំណើរការ pseudo element caret នៅលើ .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(លំនាំដើម) ឬfalse បន្ថែមទស្សន៍ទ្រនិច "ដៃ" ទៅធាតុប៊ូតុងដែលមិនបិទ។
$enable-print-styles true(លំនាំដើម) ឬfalse បើករចនាប័ទ្មសម្រាប់ការធ្វើឱ្យប្រសើរការបោះពុម្ព។
$enable-responsive-font-sizes trueឬ false(លំនាំដើម) បើក ទំហំពុម្ពអក្សរដែលឆ្លើយតប ។
$enable-validation-icons true(លំនាំដើម) ឬfalse បើកដំណើរការ background-imageរូបតំណាងនៅក្នុងធាតុបញ្ចូលអត្ថបទ និងទម្រង់ផ្ទាល់ខ្លួនមួយចំនួនសម្រាប់ស្ថានភាពសុពលភាព។
$enable-deprecation-messages true(លំនាំដើម) ឬfalse កំណត់ដើម្បី falseលាក់ការព្រមាននៅពេលប្រើ mixins និងមុខងារដែលបានបដិសេធណាមួយដែលត្រូវបានគ្រោងនឹងដកចេញនៅក្នុង v5.

ពណ៌

សមាសធាតុ និងឧបករណ៍ប្រើប្រាស់ជាច្រើនរបស់ Bootstrap ត្រូវបានបង្កើតឡើងតាមរយៈស៊េរីនៃពណ៌ដែលបានកំណត់នៅក្នុងផែនទី Sass ។ ផែនទី​នេះ​អាច​ត្រូវ​បាន​ត្រួត​ពិនិត្យ​នៅ​ក្នុង Sass ដើម្បី​បង្កើត​សំណុំ​ក្បួន​មួយ​យ៉ាង​ឆាប់​រហ័ស។

ពណ៌ទាំងអស់។

ពណ៌ទាំងអស់ដែលមាននៅក្នុង Bootstrap 4 គឺអាចរកបានជាអថេរ Sass និងផែនទី Sass នៅក្នុង scss/_variables.scssឯកសារ។ វានឹងត្រូវបានពង្រីកនៅក្នុងការចេញផ្សាយតូចៗជាបន្តបន្ទាប់ ដើម្បីបន្ថែមស្រមោលបន្ថែម ដូចជា ក្ដារលាយពណ៌ប្រផេះ ដែលយើងបញ្ចូលរួចហើយ។

$ ពណ៌ខៀវ #007bff
$ indigo #6610f2
$ ពណ៌ស្វាយ #6f42c1
$ ពណ៌ផ្កាឈូក #e83e8c
$ ក្រហម #dc3545
$ ពណ៌ទឹកក្រូច #fd7e14
$ លឿង #ffc107
$ បៃតង #28a745
$ ពណ៌ខៀវខ្ចី #20c997
$ ពណ៌ខៀវ #17a2b8

នេះជារបៀបដែលអ្នកអាចប្រើវានៅក្នុង Sass របស់អ្នក៖

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

ថ្នាក់ឧបករណ៍ប្រើប្រាស់ពណ៌ ក៏មានសម្រាប់ការកំណត់ colorនិង background-color.

នៅពេលអនាគត យើងនឹងមានបំណងផ្តល់នូវផែនទី Sass និងអថេរសម្រាប់ស្រមោលនៃពណ៌នីមួយៗ ដូចដែលយើងបានធ្វើជាមួយនឹងពណ៌ប្រផេះខាងក្រោម។

ពណ៌ប្រធានបទ

យើងប្រើសំណុំរងនៃពណ៌ទាំងអស់ដើម្បីបង្កើតក្ដារលាយពណ៌តូចជាងសម្រាប់បង្កើតពណ៌ចម្រុះ ក៏មានជាអថេរ Sass និងផែនទី Sass នៅក្នុង scss/_variables.scssឯកសាររបស់ Bootstrap ។

$ បឋម #007bff
$ អនុវិទ្យាល័យ #6c757d
$ ជោគជ័យ #28a745
$ គ្រោះថ្នាក់ #dc3545
$ ព្រមាន #ffc107
ព័ត៌មាន $ #17a2b8
$ ពន្លឺ #f8f9fa
$ ងងឹត #343a40

ប្រផេះ

សំណុំនៃអថេរប្រផេះដ៏ធំទូលាយ និងផែនទី Sass scss/_variables.scssសម្រាប់ស្រមោលពណ៌ប្រផេះជាប់គ្នានៅទូទាំងគម្រោងរបស់អ្នក។ ចំណាំថាទាំងនេះគឺជា "ពណ៌ប្រផេះត្រជាក់" ដែលមាននិន្នាការទៅរកសម្លេងពណ៌ខៀវស្រទន់ ជាជាងពណ៌ប្រផេះអព្យាក្រឹត។

ពណ៌ប្រផេះ - ១០០ ដុល្លារ #f8f9fa
ពណ៌ប្រផេះ - ២០០ ដុល្លារ #e9ecef
ពណ៌ប្រផេះ - ៣០០ ដុល្លារ #dee2e6
ពណ៌ប្រផេះ - ៤០០ ដុល្លារ #ced4da
ពណ៌ប្រផេះ - ៥០០ ដុល្លារ #adb5bd
ពណ៌ប្រផេះ - ៦០០ ដុល្លារ #6c757d
ពណ៌ប្រផេះ - ៧០០ ដុល្លារ #495057
ពណ៌ប្រផេះ - ៨០០ ដុល្លារ #343a40
ពណ៌ប្រផេះ - ៩០០ ដុល្លារ #២១២៥២៩

នៅខាងក្នុង 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
) !default;

បន្ថែម លុប ឬកែប្រែតម្លៃនៅក្នុងផែនទី ដើម្បីធ្វើបច្ចុប្បន្នភាពពីរបៀបដែលពួកវាត្រូវបានប្រើប្រាស់នៅក្នុងសមាសធាតុជាច្រើនទៀត។ ជាអកុសលនៅពេលនេះ មិនមែន គ្រប់ សមាសធាតុទាំងអស់ប្រើប្រាស់ផែនទី Sass នេះទេ។ ការធ្វើបច្ចុប្បន្នភាពនាពេលអនាគតនឹងខិតខំកែលម្អលើបញ្ហានេះ។ រហូតមកដល់ពេលនោះ គ្រោងនឹងប្រើប្រាស់ ${color}អថេរ និងផែនទី Sass នេះ។

សមាសធាតុ

សមាសធាតុ និងឧបករណ៍ប្រើប្រាស់ជាច្រើនរបស់ Bootstrap ត្រូវបានបង្កើតឡើងជាមួយនឹង @eachរង្វិលជុំដែលធ្វើម្តងទៀតនៅលើផែនទី Sass ។ វាមានប្រយោជន៍ជាពិសេសសម្រាប់ការបង្កើតបំរែបំរួលនៃសមាសធាតុដោយយើង $theme-colorsនិងបង្កើតវ៉ារ្យ៉ង់ឆ្លើយតបសម្រាប់ចំណុចឈប់នីមួយៗ។ នៅពេលអ្នកប្ដូរផែនទី Sass ទាំងនេះតាមបំណង ហើយចងក្រងឡើងវិញ អ្នកនឹងឃើញការផ្លាស់ប្តូររបស់អ្នកដោយស្វ័យប្រវត្តិដែលឆ្លុះបញ្ចាំងនៅក្នុងរង្វិលជុំទាំងនេះ។

អ្នកកែប្រែ

សមាសធាតុជាច្រើនរបស់ Bootstrap ត្រូវបានបង្កើតឡើងជាមួយនឹងវិធីសាស្រ្តថ្នាក់មូលដ្ឋាន-កែប្រែ។ នេះមានន័យថាភាគច្រើននៃរចនាប័ទ្មត្រូវបានផ្ទុកទៅថ្នាក់មូលដ្ឋាន (ឧ, .btn) ខណៈដែលការប្រែប្រួលរចនាប័ទ្មត្រូវបានបង្ខាំងនៅក្នុងថ្នាក់កែប្រែ (ឧ, .btn-danger)។ ថ្នាក់កែប្រែទាំងនេះត្រូវបានបង្កើតឡើងពី $theme-colorsផែនទី ដើម្បីធ្វើការកំណត់លេខ និងឈ្មោះនៃថ្នាក់កែប្រែរបស់យើង។

នេះគឺជាឧទាហរណ៍ពីរនៃរបៀបដែលយើងរង្វិលជុំលើ $theme-colorsផែនទីដើម្បីបង្កើតកម្មវិធីកែប្រែទៅ .alertសមាសភាគ និង .bg-*ឧបករណ៍ប្រើប្រាស់ផ្ទៃខាងក្រោយទាំងអស់របស់យើង។

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

ឆ្លើយតប

រង្វិលជុំ Sass ទាំងនេះមិនត្រូវបានកំណត់ចំពោះផែនទីពណ៌ទេ។ អ្នកក៏អាចបង្កើតការប្រែប្រួលឆ្លើយតបនៃសមាសធាតុ ឬឧបករណ៍ប្រើប្រាស់របស់អ្នកផងដែរ។ យកឧទាហរណ៍ឧបករណ៍តម្រឹមអត្ថបទដែលឆ្លើយតបរបស់យើងដែលយើងលាយ @eachរង្វិលជុំសម្រាប់ $grid-breakpointsផែនទី Sass ជាមួយនឹងសំណួរប្រព័ន្ធផ្សព្វផ្សាយរួមបញ្ចូល។

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

ប្រសិនបើអ្នកត្រូវការកែប្រែរបស់ $grid-breakpointsអ្នក ការផ្លាស់ប្តូររបស់អ្នកនឹងអនុវត្តចំពោះរង្វិលជុំទាំងអស់ដែលធ្វើម្តងទៀតនៅលើផែនទីនោះ។

អថេរ CSS

Bootstrap 4 រួមបញ្ចូលនូវ លក្ខណៈសម្បត្តិផ្ទាល់ខ្លួន CSS (អថេរ) ប្រហែលពីរដប់ នៅក្នុង CSS ដែលបានចងក្រងរបស់វា។ ទាំងនេះផ្តល់ភាពងាយស្រួលដល់តម្លៃដែលប្រើជាទូទៅដូចជាពណ៌ស្បែក ចំណុចបំបែក និងជង់ពុម្ពអក្សរចម្បងរបស់យើង នៅពេលធ្វើការនៅក្នុង Inspector នៃកម្មវិធីរុករករបស់អ្នក ប្រអប់ខ្សាច់កូដ ឬគំរូទូទៅ។

អថេរដែលមាន

នេះគឺជាអថេរដែលយើងរួមបញ្ចូល (ចំណាំថា :rootត្រូវបានទាមទារ)។ ពួកវាមានទីតាំងនៅក្នុង _root.scssឯកសាររបស់យើង។

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

ឧទាហរណ៍

អថេរ CSS ផ្តល់ភាពបត់បែនស្រដៀងគ្នាទៅនឹងអថេររបស់ Sass ប៉ុន្តែដោយមិនចាំបាច់មានការចងក្រងមុនពេលបម្រើដល់កម្មវិធីរុករក។ ជាឧទាហរណ៍ នៅទីនេះយើងកំពុងកំណត់រចនាប័ទ្មពុម្ពអក្សររបស់ទំព័ររបស់យើងឡើងវិញ និងរចនាប័ទ្មតំណជាមួយនឹងអថេរ CSS ។

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

អថេរចំណុចបំបែក

ខណៈពេលដែលយើងបានដាក់បញ្ចូលចំណុចឈប់នៅក្នុងអថេរ CSS របស់យើង (ឧ។ --breakpoint-md) ទាំងនេះមិនត្រូវបានគាំទ្រនៅក្នុងសំណួរមេឌៀ ទេ ប៉ុន្តែពួកវានៅតែអាចប្រើ នៅក្នុង សំណុំក្បួននៅក្នុងសំណួរមេឌៀ។ អថេរ breakpoint ទាំងនេះនៅតែមាននៅក្នុង CSS ដែលបានចងក្រងសម្រាប់ភាពឆបគ្នាថយក្រោយដែលបានផ្តល់ឱ្យពួកគេអាចប្រើប្រាស់ដោយ JavaScript ។ ស្វែងយល់បន្ថែមនៅក្នុង spec ។

នេះជាឧទាហរណ៍នៃ អ្វីដែលមិនត្រូវបានគាំទ្រ៖

@media (min-width: var(--breakpoint-sm)) {
  ...
}

ហើយនេះគឺជាឧទាហរណ៍នៃ អ្វីដែលត្រូវបានគាំទ្រ៖

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}