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

គម្លាត

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

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

កំណត់តម្លៃដែលងាយស្រួលឆ្លើយតប marginpaddingតម្លៃទៅធាតុ ឬផ្នែករងនៃផ្នែករបស់វាជាមួយនឹងថ្នាក់ខ្លីៗ។ រួមបញ្ចូលការគាំទ្រសម្រាប់លក្ខណៈសម្បត្តិបុគ្គល លក្ខណៈសម្បត្តិទាំងអស់ និងលក្ខណៈសម្បត្តិបញ្ឈរ និងផ្ដេក។ .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-toppadding-top
  • b- សម្រាប់ថ្នាក់ដែលកំណត់ margin-bottompadding-bottom
  • s- (ចាប់ផ្តើម) សម្រាប់ថ្នាក់ដែលកំណត់ margin-leftpadding-leftក្នុង LTR margin-rightpadding-rightក្នុង RTL
  • e- (បញ្ចប់) សម្រាប់ថ្នាក់ដែលកំណត់ margin-rightpadding-rightក្នុង LTR margin-leftpadding-leftក្នុង RTL
  • x- សម្រាប់ថ្នាក់ដែលកំណត់ទាំងពីរ *-leftនិង*-right
  • y- សម្រាប់ថ្នាក់ដែលកំណត់ទាំងពីរ *-topនិង*-bottom
  • blank - សម្រាប់ថ្នាក់ដែលកំណត់ a marginpaddingនៅលើជ្រុងទាំង 4 នៃធាតុ

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

  • 0- សម្រាប់ថ្នាក់ដែលលុបបំបាត់ marginpaddingដោយការកំណត់វាទៅ0
  • 1- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginpaddingទៅ$spacer * .25
  • 2- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginpaddingទៅ$spacer * .5
  • 3- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginpaddingទៅ$spacer
  • 4- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginpaddingទៅ$spacer * 1.5
  • 5- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginpaddingទៅ$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
<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ផែនទី ( 05)។ មិនមាន .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,
);

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

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
    ),