គម្លាត

Bootstrap រួមបញ្ចូលជួរដ៏ធំទូលាយនៃរឹមឆ្លើយតបខ្លីៗ បន្ទះ និងថ្នាក់ឧបករណ៍ប្រើប្រាស់គម្លាត ដើម្បីកែប្រែរូបរាងរបស់ធាតុ។

នៅលើទំព័រនេះ។

រឹម និងទ្រនាប់

កំណត់តម្លៃដែលងាយស្រួលឆ្លើយតប marginឬ paddingតម្លៃទៅធាតុ ឬផ្នែករងនៃផ្នែករបស់វាជាមួយនឹងថ្នាក់ខ្លីៗ។ រួមបញ្ចូលការគាំទ្រសម្រាប់លក្ខណៈសម្បត្តិបុគ្គល លក្ខណៈសម្បត្តិទាំងអស់ និងលក្ខណៈសម្បត្តិបញ្ឈរ និងផ្ដេក។ .25remថ្នាក់ត្រូវបានបង្កើត ឡើង ពីផែនទី Sass លំនាំដើមចាប់ពី 3rem.

ប្រើម៉ូឌុលប្លង់ក្រឡាចត្រង្គ CSS? ពិចារណាប្រើ ឧបករណ៍ប្រើប្រាស់គម្លាត ជំនួសវិញ។

កំណត់ចំណាំ

ឧបករណ៍ប្រើប្រាស់គម្លាតដែលអនុវត្តចំពោះចំណុចឈប់ទាំងអស់ ពី xsដល់ទៅ xxlមិនមានអក្សរកាត់ចំណុចឈប់នៅក្នុងពួកវាទេ។ នេះគឺដោយសារតែថ្នាក់ទាំងនោះត្រូវបានអនុវត្តពី min-width: 0ឡើងលើ ហើយដូច្នេះមិនត្រូវបានចងភ្ជាប់ដោយសំណួរប្រព័ន្ធផ្សព្វផ្សាយទេ។ ទោះជាយ៉ាងណាក៏ដោយ ចំណុចឈប់សម្រាកដែលនៅសល់ រួមបញ្ចូលអក្សរកាត់ចំណុចឈប់។

ថ្នាក់ត្រូវបានដាក់ឈ្មោះដោយប្រើទម្រង់ {property}{sides}-{size}សម្រាប់ xsនិង {property}{sides}-{breakpoint}-{size}សម្រាប់ sm, md, lg, xlនិង xxl.

កន្លែង ដែលទ្រព្យសម្បត្តិ គឺជាផ្នែកមួយនៃ៖

m- សម្រាប់ថ្នាក់ដែលបានកំណត់margin
p- សម្រាប់ថ្នាក់ដែលបានកំណត់padding

កន្លែង ដែលភាគី គឺជាផ្នែកមួយនៃ:

t- សម្រាប់ថ្នាក់ដែលកំណត់ margin-topឬpadding-top
b- សម្រាប់ថ្នាក់ដែលកំណត់ margin-bottomឬpadding-bottom
s- (ចាប់ផ្តើម) សម្រាប់ថ្នាក់ដែលកំណត់ margin-leftឬ padding-leftក្នុង LTR margin-rightឬ padding-rightក្នុង RTL
e- (បញ្ចប់) សម្រាប់ថ្នាក់ដែលកំណត់ margin-rightឬ padding-rightក្នុង LTR margin-leftឬ padding-leftក្នុង RTL
x- សម្រាប់ថ្នាក់ដែលកំណត់ទាំងពីរ *-leftនិង*-right
y- សម្រាប់ថ្នាក់ដែលកំណត់ទាំងពីរ *-topនិង*-bottom
blank - សម្រាប់ថ្នាក់ដែលកំណត់ a marginឬ paddingនៅលើជ្រុងទាំង 4 នៃធាតុ

ទំហំ គឺ មួយក្នុងចំនោម៖

0- សម្រាប់ថ្នាក់ដែលលុបបំបាត់ marginឬ paddingដោយការកំណត់វាទៅ0
1- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginឬ paddingទៅ$spacer * .25
2- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginឬ paddingទៅ$spacer * .5
3- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginឬ paddingទៅ$spacer
4- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginឬ paddingទៅ$spacer * 1.5
5- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginឬ paddingទៅ$spacer * 3
auto- សម្រាប់ថ្នាក់ដែលកំណត់ marginទៅស្វ័យប្រវត្តិ

(អ្នកអាចបន្ថែមទំហំបន្ថែមទៀតដោយបន្ថែមធាតុទៅ $spacersអថេរផែនទី Sass ។ )

ឧទាហរណ៍

នេះគឺជាឧទាហរណ៍តំណាងមួយចំនួននៃថ្នាក់ទាំងនេះ៖

.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

ផ្ចិតផ្តេក

លើសពីនេះ Bootstrap ក៏រួមបញ្ចូល .mx-autoថ្នាក់មួយសម្រាប់ដាក់កណ្តាលផ្តេក មាតិកាកម្រិតប្លុកទទឹងថេរ — នោះគឺមាតិកាដែលមាន display: blockនិង widthសំណុំ — ដោយកំណត់រឹមផ្ដេកទៅ auto.

ធាតុកណ្តាល

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

រឹមអវិជ្ជមាន

នៅក្នុង CSS marginលក្ខណសម្បត្តិអាចប្រើប្រាស់តម្លៃអវិជ្ជមាន ( paddingមិនអាច)។ រឹមអវិជ្ជមានទាំងនេះត្រូវបាន បិទតាមលំនាំដើម ប៉ុន្តែអាចត្រូវបានបើកនៅក្នុង Sass ដោយការកំណត់ $enable-negative-margins: true។

វាក្យសម្ព័ន្ធគឺស្ទើរតែដូចគ្នាទៅនឹងលំនាំដើម ឧបករណ៍ប្រើប្រាស់រឹមវិជ្ជមាន ប៉ុន្តែជាមួយនឹងការបន្ថែម nមុនទំហំដែលបានស្នើ។ នេះជាឧទាហរណ៍ថ្នាក់ដែលផ្ទុយពី .mt-1៖

.mt-n1 {
  margin-top: -0.25rem !important;
}

គម្លាត

នៅពេលប្រើ display: gridអ្នកអាចប្រើប្រាស់ gapឧបករណ៍ប្រើប្រាស់នៅលើកុងតឺន័រក្រឡាចត្រង្គមេ។ វាអាចជួយសន្សំសំចៃលើការបន្ថែមឧបករណ៍ប្រើប្រាស់រឹមទៅធាតុក្រឡាចត្រង្គនីមួយៗ (កូនរបស់ display: gridកុងតឺន័រ)។ ឧបករណ៍ប្រើប្រាស់ Gap គឺឆ្លើយតបតាមលំនាំដើម ហើយត្រូវបានបង្កើតតាមរយៈ Utilities API របស់យើង ដោយផ្អែកលើ $spacersផែនទី Sass។

ធាតុក្រឡាចត្រង្គ 1

ធាតុក្រឡាចត្រង្គ 2

ធាតុក្រឡាចត្រង្គ 3

html

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

ការគាំទ្ររួមមានជម្រើសឆ្លើយតបសម្រាប់ចំណុចបំបែកក្រឡាចត្រង្គទាំងអស់របស់ Bootstrap ក៏ដូចជាទំហំប្រាំមួយពី $spacersផែនទី ( 0– 5)។ មិនមាន .gap-autoថ្នាក់ឧបករណ៍ប្រើប្រាស់ទេព្រោះវាមានប្រសិទ្ធភាពដូចគ្នានឹង .gap-0.

សាស

ផែនទី

ឧបករណ៍ប្រើប្រាស់គម្លាតត្រូវបានប្រកាសតាមរយៈ Sass map ហើយបន្ទាប់មកបង្កើតជាមួយ Utilities API របស់យើង។

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Utilities API

ឧបករណ៍ប្រើប្រាស់គម្លាតត្រូវបានប្រកាសនៅក្នុង utilities API របស់យើងនៅក្នុង scss/_utilities.scss. ស្វែងយល់ពីរបៀបប្រើប្រាស់ Utilities API។

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),