အကွာ
Bootstrap တွင် ဒြပ်စင်တစ်ခု၏အသွင်အပြင်ကိုမွမ်းမံရန်အတွက် ကျယ်ပြန့်သောလက်တိုတုံ့ပြန်မှုအနားသတ်၊ padding နှင့် gap utility အတန်းများပါဝင်သည်။
အနားသတ်နှင့် padding
တုံ့ပြန်မှု အဆင်ပြေသော margin
သို့မဟုတ် padding
တန်ဖိုးများကို အတိုချုံး အတန်းများဖြင့် ၎င်း၏ ဘေးနှစ်ဖက်၏ အပိုင်းခွဲတစ်ခုသို့ သတ်မှတ်ပေးပါ။ တစ်သီးပုဂ္ဂလဂုဏ်သတ္တိများ၊ ဂုဏ်သတ္တိများအားလုံးနှင့် ဒေါင်လိုက်နှင့် အလျားလိုက် ဂုဏ်သတ္တိများအတွက် ပံ့ပိုးမှု ပါဝင်သည်။ အတန်းများကို မူလ Sass မြေပုံမှ တည်ဆောက် .25rem
ထားသည် 3rem
။
CSS Grid layout module ကို အသုံးပြုနေပါသလား။ gap utility ကိုအသုံးပြုရန်စဉ်းစားပါ ။
ရလျှင်
ခွဲမှတ်အားလုံးနှင့် သက်ဆိုင်သော အကွာအဝေး 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
- LTR သို့မဟုတ် RTL တွင်margin-right
သတ်မှတ်ထားသော အတန်း များအတွက် (အဆုံး )padding-right
margin-left
padding-left
x
*-left
- နှစ်ခု လုံး သတ်မှတ်ထားသောအတန်းများအတွက်*-right
y
*-top
- နှစ်ခု လုံး သတ်မှတ်ထားသောအတန်းများအတွက်*-bottom
- blank - ဒြပ်စင်၏ 4 ဘက်စလုံးတွင်
margin
သို့မဟုတ် သတ်မှတ်သည့် အတန်းများအတွက်padding
အရွယ်အစား သည် မည်သည့်နေရာတွင် ရှိသည် -
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 map variable တွင် entry များကို ပေါင်းထည့်ခြင်းဖြင့် အရွယ်အစားများကို ထပ်မံထည့်သွင်း နိုင်ပါသည်။)
ဥပမာများ
ဤအတန်းများ၏ ကိုယ်စားလှယ်အချို့ ဥပမာများမှာ-
.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
။
syntax သည် ပုံသေ၊ အပြုသဘောဆောင်သောအနားသတ်အသုံးအဆောင်များနှင့်နီးပါးတူသော်လည်း n
တောင်းဆိုထားသောအရွယ်အစားမတိုင်မီ ပေါင်းထည့်ခြင်းဖြင့်။ ဒါက ဥပမာ အတန်းနဲ့ ဆန့်ကျင်ဘက်ပါ .mt-1
။
.mt-n1 {
margin-top: -0.25rem !important;
}
ကွာဟချက်
အသုံးပြုသည့်အခါ ၊ parent grid container တွင် utilities display: grid
များကို အသုံးပြုနိုင်သည် ။ ၎င်းသည် margin utilities များကို တစ်ဦးချင်း grid ပစ္စည်းများ ( container gap
၏ ကလေးများ) တွင် ပေါင်းထည့်ရန် သက်သာနိုင်သည် ။ Gap utilities များသည် ပုံသေအားဖြင့် တုံ့ပြန်မှုရှိပြီး Sass မြေပုံကို display: grid
အခြေခံ၍ ကျွန်ုပ်တို့၏ utilities API မှတဆင့် ထုတ်လုပ် ပါသည်။$spacers
<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 ၏ grid breakpoints များအားလုံးအတွက် တုံ့ပြန်မှုရွေးချယ်စရာများအပြင် $spacers
မြေပုံ ( 0
– 5
) မှ အရွယ်အစား ခြောက်ခုပါ၀င်သည်။ .gap-auto
ထိထိရောက်ရောက် တူညီသောကြောင့် အသုံးဝင်မှုအတန်း မရှိပါ .gap-0
။
ဆူး
မြေပုံများ
Spacing utilities များကို 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);
အသုံးအဆောင်များ API
Spacing utilities များကို ကျွန်ုပ်တို့၏ 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
),