အကွာ

Bootstrap တွင် ဒြပ်စင်တစ်ခု၏အသွင်အပြင်ကိုမွမ်းမံရန်အတွက် ကျယ်ပြန့်သောလက်တိုတုံ့ပြန်မှုအနားသတ်နှင့် padding utility အတန်းများပါဝင်သည်။

ဘယ်လိုအလုပ်လုပ်လဲ

တုံ့ပြန်မှု အဆင်ပြေသော marginသို့မဟုတ် paddingတန်ဖိုးများကို အတိုချုံး အတန်းများဖြင့် ၎င်း၏ ဘေးနှစ်ဖက်၏ အပိုင်းခွဲတစ်ခုသို့ သတ်မှတ်ပေးပါ။ တစ်သီးပုဂ္ဂလဂုဏ်သတ္တိများ၊ ဂုဏ်သတ္တိများအားလုံးနှင့် ဒေါင်လိုက်နှင့် အလျားလိုက် ဂုဏ်သတ္တိများအတွက် ပံ့ပိုးမှု ပါဝင်သည်။ အတန်းများကို မူလ Sass မြေပုံမှ တည်ဆောက် .25remထားသည် 3rem။

ရလျှင်

ခွဲမှတ်အားလုံးနှင့် သက်ဆိုင်သော အကွာအဝေး xsမှ xl၊ ၎င်းမှာ အဆိုပါအတန်းများကို နှင့်အထက်တွင် အသုံးချသောကြောင့် min-width: 0ဖြစ်ပြီး၊ ထို့ကြောင့် မီဒီယာမေးမြန်းမှုဖြင့် ကန့်သတ်ထားခြင်းမရှိပါ။ သို့သော် ကျန်ရှိသော ဖြတ်မှတ်များတွင် ခွဲမှတ်အတိုကောက်ပါ၀င်သည်။

အတန်းများကို {property}{sides}-{size}for xsand {property}{sides}-{breakpoint}-{size}for sm, md, lg, and xl.

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

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

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

• t- သတ်မှတ်အတန်းများအတွက် margin-topသို့မဟုတ်padding-top
• b- သတ်မှတ်အတန်းများအတွက် margin-bottomသို့မဟုတ်padding-bottom
• l- သတ်မှတ်အတန်းများအတွက် margin-leftသို့မဟုတ်padding-left
• r- သတ်မှတ်အတန်းများအတွက် margin-rightသို့မဟုတ်padding-right
• 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;
}

.ml-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မရနိုင်ပါ)။ 4.2 အရ၊ အထက်တွင်ဖော်ပြထားသော သုညမဟုတ်သော ကိန်းပြည့်အရွယ်အစားတိုင်းအတွက် အနုတ်လက္ခဏာအနားသတ်အသုံးအဆောင်များကို ထည့်သွင်းထားပါသည်။ (ဥပမာ၊ 1, 2, , 3, 4, 5) ဤအသုံးအဆောင်များသည် breakpoints များတစ်လျှောက် grid column gutter များကို စိတ်ကြိုက်ပြင်ဆင်ရန်အတွက် အကောင်းဆုံးဖြစ်သည်။

syntax သည် ပုံသေ၊ အပြုသဘောဆောင်သောအနားသတ်အသုံးအဆောင်များနှင့်နီးပါးတူသော်လည်း nတောင်းဆိုထားသောအရွယ်အစားမတိုင်မီ ပေါင်းထည့်ခြင်းဖြင့်။ ဒါက ဥပမာ အတန်းနဲ့ ဆန့်ကျင်ဘက်ပါ .mt-1။

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

ဤသည်မှာ ကြားခံ ( md) breakpoint နှင့် အထက်ရှိ Bootstrap grid ကို စိတ်ကြိုက်ပြင်ဆင်ခြင်း ဥပမာတစ်ခုဖြစ်သည်။ .colကျွန်ုပ်တို့သည် padding ကို တိုးမြှင့်ပြီး ၎င်းကို မိဘအပေါ် .px-md-5တုံ့ပြန် ခဲ့သည်။.mx-md-n5.row

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>