សមាសធាតុ

ថ្នាក់មូលដ្ឋាន

សមាសធាតុរបស់ Bootstrap ត្រូវបានបង្កើតឡើងយ៉ាងទូលំទូលាយជាមួយនឹងនាមត្រកូលកែប្រែមូលដ្ឋាន។ យើង​ដាក់​ជា​ក្រុម​លក្ខណៈ​សម្បត្តិ​ដែល​បាន​ចែក​រំលែក​ច្រើន​តាម​ដែល​អាច​ធ្វើ​ទៅ​បាន​ទៅ​ក្នុង​ថ្នាក់​មូលដ្ឋាន​ ដូច .btn​ជា​ ហើយ​បន្ទាប់​មក​ដាក់​រចនាប័ទ្ម​បុគ្គល​សម្រាប់​បំរែបំរួល​នីមួយៗ​ទៅ​ក្នុង​ថ្នាក់​កែប្រែ​ ដូច.btn-primary​ ឬ.btn-success​ .

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

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

អ្នកកែប្រែ

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

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

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);

  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

ឆ្លើយតប

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

// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning

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

    .dropdown-menu#{$infix}-start {
      --bs-position: start;

      &[data-bs-popper] {
        right: auto;
        left: 0;
      }
    }

    .dropdown-menu#{$infix}-end {
      --bs-position: end;

      &[data-bs-popper] {
        right: 0;
        left: auto;
      }
    }
  }
}

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

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

សម្រាប់ព័ត៌មានបន្ថែម និងឧទាហរណ៍អំពីរបៀបកែប្រែផែនទី និងអថេរ Sass របស់យើង សូមមើល ផ្នែក Sass នៃឯកសារក្រឡាចត្រង្គ ។

ការបង្កើតរបស់អ្នក។

យើងលើកទឹកចិត្តអ្នកឱ្យទទួលយកគោលការណ៍ណែនាំទាំងនេះនៅពេលបង្កើតជាមួយ Bootstrap ដើម្បីបង្កើតសមាសធាតុផ្ទាល់ខ្លួនរបស់អ្នក។ យើងបានពង្រីកវិធីសាស្រ្តនេះដោយខ្លួនឯងចំពោះសមាសធាតុផ្ទាល់ខ្លួននៅក្នុងឯកសារ និងឧទាហរណ៍របស់យើង។ សមាសធាតុដូចជាការប៉ិនប្រសប់របស់យើងត្រូវបានបង្កើតឡើងដូចគ្នានឹងសមាសធាតុដែលបានផ្តល់ឱ្យរបស់យើងជាមួយនឹងថ្នាក់មូលដ្ឋាន និងកម្មវិធីកែប្រែ។

<div class="callout">...</div>

នៅក្នុង CSS របស់អ្នក អ្នកនឹងមានអ្វីមួយដូចតទៅនេះ ដែលភាគច្រើននៃរចនាប័ទ្មត្រូវបានធ្វើតាមរយៈ .callout. បន្ទាប់មក រចនាប័ទ្មតែមួយគត់រវាងវ៉ារ្យ៉ង់នីមួយៗត្រូវបានគ្រប់គ្រងតាមរយៈថ្នាក់កែប្រែ។

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

សម្រាប់​ការ​រចនា​ម៉ូដ​ប្លែក​ៗ​នោះ​គឺ​គ្រាន់​តែ​ជា​ការ​ហៅ​ចេញ​ប៉ុណ្ណោះ border-left-color។ នៅពេលអ្នកបញ្ចូលគ្នានូវថ្នាក់មូលដ្ឋាននោះជាមួយនឹងថ្នាក់កែប្រែមួយក្នុងចំណោមថ្នាក់កែប្រែទាំងនោះ អ្នកទទួលបានក្រុមគ្រួសារសមាសភាគពេញលេញរបស់អ្នក៖