Bootstrap Grids
Bootstrap Grid စနစ်
Bootstrap ၏ဇယားကွက်စနစ်သည် စာမျက်နှာတစ်လျှောက် ကော်လံ ၁၂ ခုအထိ ခွင့်ပြုသည်။
ကော်လံ 12 ခုလုံးကို တစ်ဦးချင်း မသုံးလိုပါက၊ ပိုကျယ်သော ကော်လံများ ဖန်တီးရန် ကော်လံများကို အတူတကွ အုပ်စုဖွဲ့နိုင်သည်-
| ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ |
| ထွာ ၄ | ထွာ ၄ | ထွာ ၄ | |||||||||
| ထွာ ၄ | ထွာ ၈ | ||||||||||
| ထွာ ၆ | ထွာ ၆ | ||||||||||
| ထွာ ၁၂ | |||||||||||
Bootstrap ၏ဇယားကွက်စနစ်သည် တုံ့ပြန်မှုဖြစ်ပြီး မျက်နှာပြင်အရွယ်အစားပေါ်မူတည်၍ ကော်လံများကို အလိုအလျောက်ပြန်လည်စီစဉ်ပေးမည်ဖြစ်သည်။
Grid သင်တန်းများ
Bootstrap grid စနစ်တွင် class လေးခုရှိသည်။
xs(ဖုန်းများအတွက် - မျက်နှာပြင်အကျယ် 768px အောက်)sm(တက်ဘလက်များအတွက် - အကျယ် 768px ထက်ကြီးသော သို့မဟုတ် ညီသော မျက်နှာပြင်များ)md(သေးငယ်သောလက်ပ်တော့များအတွက် - မျက်နှာပြင်အကျယ် 992px ထက်ကြီးသော သို့မဟုတ် ညီမျှသည်)lg(လက်တော့ပ်များနှင့် ဒက်စတော့များအတွက် - 1200px အကျယ် သို့မဟုတ် ပိုကြီးသော မျက်နှာပြင်များ)
ပိုမိုသွက်လက်ပြီး လိုက်လျောညီထွေရှိသော အပြင်အဆင်များဖန်တီးရန် အထက်ဖော်ပြပါ အတန်းများကို ပေါင်းစပ်နိုင်ပါသည်။
Bootstrap Grid ၏ အခြေခံဖွဲ့စည်းပုံ
အောက်ပါတို့သည် Bootstrap grid ၏ အခြေခံဖွဲ့စည်းပုံဖြစ်သည် ။
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
ပထမ၊ အတန်းတစ်ခုဖန်တီးပါ <div
class="row">။ ထို့နောက် လိုချင်သော ကော်လံအရေအတွက် (သင့်လျော်သော
.col-*-*အတန်းများပါသော တက်ဂ်များ) ကို ထည့်ပါ။ .col-*-*အတန်းတစ်ခုစီအတွက် နံပါတ်များသည် 12 အထိ အမြဲထည့်သင့်သည် ကို သတိပြုပါ ။
အောက်တွင် ကျွန်ုပ်တို့သည် အခြေခံ Bootstrap ဇယားကွက်များ နမူနာအချို့ကို စုစည်းထားပါသည်။
တူညီသောကော်လံသုံးခု
အောက်ဖော်ပြပါ ဥပမာသည် တက်ဘလက်များမှအစပြု၍ တူညီသောအကျယ်အဝန်းကော်လံသုံးခုကို မည်သို့ရရှိနိုင်ကြောင်းနှင့် ကြီးမားသောဒက်စ်တော့များအထိ ချဲ့ထွင်ပုံကို ပြသထားသည်။ 768px ထက်နည်းသော မိုဘိုင်းဖုန်းများ သို့မဟုတ် စခရင်များတွင်၊ ကော်လံများသည် အလိုအလျောက်စုနေလိမ့်မည်-
ဥပမာ
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
မညီမျှသော ကော်လံနှစ်ခု
အောက်ဖော်ပြပါ ဥပမာသည် တက်ဘလက်များမှအစပြု၍ အမျိုးမျိုးသော အကျယ်ကော်လံနှစ်ခုကို မည်သို့ရရှိနိုင်ကြောင်းနှင့် ကြီးမားသော desktop များအထိ ချဲ့ထွင်ပုံအား ပြသသည်-
ဥပမာ
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
အကြံပြုချက်- ဤသင်ခန်းစာတွင် နောက်ပိုင်းတွင် Bootstrap ဇယားကွက်များအကြောင်း ပိုမိုလေ့လာနိုင်ပါမည်။