ကွန်တိန်နာများ

သူတို့ဘယ်လိုအလုပ်လုပ်လဲ။

ကွန်တိန်နာများသည် Bootstrap ရှိ အခြေခံအကျဆုံး အပြင်အဆင်ဒြပ်စင်ဖြစ်ပြီး ကျွန်ုပ်တို့၏ မူရင်းဇယားကွက်စနစ်ကို အသုံးပြုသည့်အခါ လိုအပ်ပါသည် ။ ကွန်တိန်နာများကို ပါ၀င်ရန်၊ pad နှင့် (တစ်ခါတစ်ရံ) ၎င်းတို့အတွင်းမှ အကြောင်းအရာကို ဗဟိုပြုရန် အသုံးပြုသည်။ ကွန်တိန်နာ များကို nested လုပ်ထားနိုင်သော်လည်း အပြင်အဆင်အများစုသည် nested container မလိုအပ်ပါ။

Bootstrap သည် မတူညီသော ကွန်တိန်နာ ၃ ခုပါရှိသည်။

• .containermax-widthတုံ့ပြန်မှု ဖြတ်မှတ်တစ်ခုစီတွင် သတ်မှတ်ပေးသည်။
• .container-fluidwidth: 100%အားလုံးကို ဖြတ်တောက် ပေးသော အချက်ဖြစ်သည်။
• .container-{breakpoint}width: 100%သတ်မှတ်ထားသော ဖြတ်မှတ်အထိ ဖြစ်သည် ။

အောက်ဖော်ပြပါဇယားသည် ကွန်တိန်နာတစ်ခုစီ max-width၏မူရင်း .containerနှင့် .container-fluidဖောက်ပြန်မှတ်တိုင်တစ်ခုစီကို မည်သို့နှိုင်းယှဉ်ဖော်ပြသည် ။

၎င်းတို့ကို လုပ်ဆောင်ချက်တွင် ကြည့်ရှုပြီး ကျွန်ုပ်တို့၏ Grid ဥပမာ တွင် ၎င်းတို့ကို နှိုင်းယှဉ်ပါ ။

ပုံသေကွန်တိန်နာ

ကျွန်ုပ်တို့၏မူလ .containerအတန်းသည် တုံ့ပြန်မှုရှိသော၊ ပုံသေ-အကျယ်ကွန်တိန်နာဖြစ်ပြီး၊ max-widthအဓိပ္ပါယ်မှာ ဖောက်ပြန်မှတ်တိုင်တစ်ခုစီတွင် ၎င်း၏ပြောင်းလဲမှုများဖြစ်သည်။

<div class="container">
  <!-- Content here -->
</div>

တုံ့ပြန်မှုကွန်တိန်နာများ

Responsive containers သည် သင့်အား သတ်မှတ်ထားသော breakpoint မရောက်မချင်း 100% ကျယ်ဝန်းသော class တစ်ခုကို သတ်မှတ်နိုင်စေပြီး၊ ထို့နောက် max-widthပိုမိုမြင့်မားသော breakpoints တစ်ခုစီအတွက် s ကို အသုံးပြုပါသည်။ ဥပမာအားဖြင့်၊ ၊ , , နှင့် စကေးတက်မည့်နေရာသည် breakpoint .container-smမရောက်မချင်း စတင်ရန် 100% ကျယ်ပြန့် သည် ။smmdlgxlxxl

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

အရည်ကွန်တိန်နာများ

.container-fluidမြင်ကွင်းပို့တ်၏ အကျယ်အဝန်းတစ်ခုလုံးကို အကျယ်ချဲ့သည့် ကွန်တိန်နာတစ်ခုအတွက် အသုံးပြု ပါ။

<div class="container-fluid">
  ...
</div>

ဆူး

အထက်တွင်ပြထားသည့်အတိုင်း၊ Bootstrap သည် သင်အလိုရှိသော layouts များကိုတည်ဆောက်ရာတွင် ကူညီရန်အတွက် ကြိုတင်သတ်မှတ်ထားသော container class များကို ဆက်တိုက်ထုတ်ပေးပါသည်။ ဤကြိုတင်သတ်မှတ်ထားသော ကွန်တိန်နာအတန်းများကို စိတ်ကြိုက်ပြင်ဆင်နိုင်သည် _variables.scss- ၎င်းတို့အား စွမ်းအားပေးသည့် Sass မြေပုံ (အထဲတွင်တွေ့ရှိရသော) ကို မွမ်းမံပြင်ဆင်နိုင်သည်-

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Sass ကို စိတ်ကြိုက်ပြင်ဆင်ခြင်းအပြင်၊ ကျွန်ုပ်တို့၏ Sass mixin ဖြင့် သင့်ကိုယ်ပိုင် ကွန်တိန်နာများကိုလည်း ဖန်တီးနိုင်သည်။

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

ကျွန်ုပ်တို့၏ Sass မြေပုံများနှင့် ကိန်းရှင်များကို မွမ်းမံပြင်ဆင်နည်းဆိုင်ရာ နောက်ထပ်အချက်အလက်များနှင့် ဥပမာများအတွက်၊ ကျေးဇူးပြု၍ Grid documentation ၏ Sass ကဏ္ဍကို ဖတ်ရှုပါ ။