အကွာ

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}smmdlgxlxxl

ပစ္စည်းဥစ္စာ သည် အ ဘယ်မှာ ရှိသနည်း၊

m- သတ်မှတ်အတန်းများအတွက်margin
p- သတ်မှတ်အတန်းများအတွက်padding

နှစ်ဖက်စလုံး သည် မည်သည့်နေရာတွင် ရှိသည် -

t- သတ်မှတ်အတန်းများအတွက် margin-topသို့မဟုတ်padding-top
b- သတ်မှတ်အတန်းများအတွက် margin-bottomသို့မဟုတ်padding-bottom
smargin-left- သတ်မှတ်ထားသော သို့မဟုတ် padding-leftLTR တွင် margin-rightသို့မဟုတ် padding-rightRTL တွင် သတ်မှတ်ထားသော အတန်းများအတွက် (စတင်)
e- LTR သို့မဟုတ် RTL တွင် margin-rightသတ်မှတ်ထားသော အတန်း များအတွက် (အဆုံး )padding-rightmargin-leftpadding-left
x*-left- နှစ်ခု လုံး သတ်မှတ်ထားသောအတန်းများအတွက်*-right
y*-top- နှစ်ခု လုံး သတ်မှတ်ထားသောအတန်းများအတွက်*-bottom
blank - ဒြပ်စင်၏ 4 ဘက်စလုံးတွင် marginသို့မဟုတ် သတ်မှတ်သည့် အတန်းများအတွက်padding

အရွယ်အစား သည် မည်သည့်နေရာတွင် ရှိသည် -

0margin- padding၎င်းကိုသတ်မှတ်ခြင်းဖြင့် ဖယ်ရှားသောအတန်းများအတွက်0
1margin- သို့မဟုတ် သတ်မှတ်ထားသောအတန်းများအတွက် (မူလအားဖြင့် padding)$spacer * .25
2margin- သို့မဟုတ် သတ်မှတ်ထားသောအတန်းများအတွက် (မူလအားဖြင့် padding)$spacer * .5
3margin- သို့မဟုတ် သတ်မှတ်ထားသောအတန်းများအတွက် (မူလအားဖြင့် padding)$spacer
4margin- သို့မဟုတ် သတ်မှတ်ထားသောအတန်းများအတွက် (မူလအားဖြင့် padding)$spacer * 1.5
5margin- သို့မဟုတ် သတ်မှတ်ထားသောအတန်းများအတွက် (မူလအားဖြင့် padding)$spacer * 3
automargin- အလိုအလျောက် သတ်မှတ်ထားသောအတန်းများအတွက်

$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

ဇယားကွက် ၁

ဇယားကွက် ၂

ဇယားကွက် ၃

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

အသုံးအဆောင်များ 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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),