គម្លាត
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
ក្នុង LTRmargin-right
ឬpadding-right
ក្នុង RTLe
- (បញ្ចប់) សម្រាប់ថ្នាក់ដែលកំណត់margin-right
ឬpadding-right
ក្នុង LTRmargin-left
ឬpadding-left
ក្នុង RTLx
- សម្រាប់ថ្នាក់ដែលកំណត់ទាំងពីរ*-left
និង*-right
y
- សម្រាប់ថ្នាក់ដែលកំណត់ទាំងពីរ*-top
និង*-bottom
- ទទេ - សម្រាប់ថ្នាក់ដែលកំណត់ 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។
<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,
);
$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
),