Bootstrap 4 Grids
Bootstrap 4 Grid စနစ်
Bootstrap ၏ဇယားကွက်စနစ်သည် flexbox ဖြင့်တည်ဆောက်ထားပြီး စာမျက်နှာတစ်လျှောက်တွင် ကော်လံ 12 ခုအထိခွင့်ပြုထားသည်။
ကော်လံ 12 ခုလုံးကို တစ်ဦးချင်း မသုံးလိုပါက၊ ပိုကျယ်သော ကော်လံများ ဖန်တီးရန် ကော်လံများကို အတူတကွ အုပ်စုဖွဲ့နိုင်သည်-
ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ |
ထွာ ၄ | ထွာ ၄ | ထွာ ၄ | |||||||||
ထွာ ၄ | ထွာ ၈ | ||||||||||
ထွာ ၆ | ထွာ ၆ | ||||||||||
ထွာ ၁၂ |
ဇယားကွက်စနစ်သည် တုံ့ပြန်မှုဖြစ်ပြီး မျက်နှာပြင်အရွယ်အစားပေါ် မူတည်၍ ကော်လံများကို အလိုအလျောက် ပြန်လည်စီစဉ်ပေးပါမည်။
ပေါင်းလဒ်သည် 12 သို့မဟုတ် ထို့ထက်နည်းအောင် ပေါင်းထည့်ကြောင်း သေချာပါစေ။ (သင်ရနိုင်သော ကော်လံ 12 ခုလုံးကို အသုံးပြုရန် မလိုအပ်ပါ)။
Grid သင်တန်းများ
Bootstrap 4 grid စနစ်တွင် အတန်းငါးခုရှိသည်။
.col-
(အပိုပစ္စည်းများ - မျက်နှာပြင်အကျယ် 576px အောက်).col-sm-
(စက်ပစ္စည်းငယ်များ - မျက်နှာပြင်အကျယ် 576px နှင့် ညီမျှသော သို့မဟုတ် ပိုကြီးသည်).col-md-
(အလတ်စား စက်ပစ္စည်းများ - မျက်နှာပြင် အကျယ်သည် 768px နှင့် ညီမျှသော သို့မဟုတ် ပိုကြီးသည်).col-lg-
(စက်ပစ္စည်းကြီးများ - မျက်နှာပြင်အကျယ် 992px နှင့် ညီမျှသော သို့မဟုတ် ပိုကြီးသည်).col-xl-
(xlarge စက်များ - မျက်နှာပြင်အကျယ် 1200px နှင့် ညီသော သို့မဟုတ် ပိုကြီးသည်)
ပိုမိုသွက်လက်ပြီး လိုက်လျောညီထွေရှိသော အပြင်အဆင်များဖန်တီးရန် အထက်ဖော်ပြပါ အတန်းများကို ပေါင်းစပ်နိုင်ပါသည်။
အကြံပြုချက်- အတန်းတစ်ခုစီသည် စကေးတက်လာသောကြောင့် တူညီသော widths များကို
sm
သတ်မှတ် md
လိုပါက သတ်မှတ်ရန်သာ လိုအပ်ပါသည် sm
။
Bootstrap 4 Grid ၏ အခြေခံဖွဲ့စည်းပုံ
အောက်ဖော်ပြပါသည် Bootstrap 4 grid ၏ အခြေခံဖွဲ့စည်းပုံဖြစ်သည် ။
<!-- Control the column width, and how they should appear on different
devices -->
<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>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
ပထမဥပမာ- row ( <div
class="row">
) ကိုဖန်တီးပါ။ ထို့နောက် လိုချင်သော ကော်လံအရေအတွက် (သင့်လျော်သော
.col-*-*
အတန်းများပါသော တက်ဂ်များ) ကို ထည့်ပါ။ ပထမကြယ် (*) သည် တုံ့ပြန်နိုင်စွမ်းကို ကိုယ်စားပြုသည်- sm, md, lg သို့မဟုတ် xl သည် နံပါတ်တစ်ခုကို ကိုယ်စားပြုပြီး ဒုတိယကြယ်သည် အတန်းတစ်ခုစီအတွက် 12 အထိ ပေါင်းသင့်သည်။
ဒုတိယဥပမာ- တစ်ခုစီသို့ နံပါတ်တစ်ခုထည့်မည့်အစား col
၊ တူညီသော width ကော်လံများဖန်တီးရန် bootstrap သည် layout ကိုစီမံခွင့်ပြုပါ- "col"
ဒြပ်စင်နှစ်ခု = col တစ်ခုစီအတွက် 50% အကျယ်။ cols သုံးခု = col တစ်ခုစီသို့ 33.33% အကျယ်။ cols လေးခု = 25% အကျယ် စ .col-sm|md|lg|xl
သည်
အောက်တွင် ကျွန်ုပ်တို့သည် အခြေခံ Bootstrap 4 grid layouts ၏ နမူနာအချို့ကို စုစည်းထားပါသည်။
တူညီသောကော်လံသုံးခု
အောက်ဖော်ပြပါ ဥပမာသည် စက်အားလုံးနှင့် မျက်နှာပြင်အကျယ်များတွင် အညီအမျှ ကော်လံသုံးခုကို ဖန်တီးနည်းကို ပြသသည်-
ဥပမာ
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
တုံ့ပြန်မှုကော်လံများ
အောက်ဖော်ပြပါ ဥပမာသည် တက်ဘလက်များမှအစပြု၍ တူညီသောအနံကော်လံလေးခုကို ဖန်တီးရန်နှင့် ပိုကြီးသော ဒက်စတော့များအထိ ချဲ့ထွင်ပုံကို ပြသထားသည်။ 576px ထက်နည်းသော မိုဘိုင်းဖုန်းများ သို့မဟုတ် စခရင်များတွင်၊ ကော်လံများသည် တစ်ခုနှင့်တစ်ခုအပေါ်တွင် အလိုအလျောက်စုနေလိမ့်မည် -
ဥပမာ
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
မညီမျှသော တုံ့ပြန်မှုကော်လံနှစ်ခု
အောက်ဖော်ပြပါ ဥပမာသည် တက်ဘလက်များမှအစပြု၍ အမျိုးမျိုးသော အကျယ်ကော်လံနှစ်ခုကို မည်သို့ရရှိနိုင်ကြောင်းနှင့် ကြီးမားသောအပိုဒက်စ်တော့များအထိ ချဲ့ထွင်ပုံကို ပြသသည်-
ဥပမာ
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
အကြံပြုချက်- ဤသင်ခန်းစာတွင် Bootstrap 4 ဂရစ်များအကြောင်း ပိုမိုလေ့လာနိုင်ပါမည်။