Bootstrap 4 Grid နမူနာများ
အောက်တွင် ကျွန်ုပ်တို့သည် Bootstrap 4 grid layouts ၏ နမူနာအချို့ကို စုစည်းထားပါသည်။
တူညီသောကော်လံသုံးခု
သတ်မှတ်ထားသော ဒြပ်စင်အရေအတွက်တစ်ခုပေါ်တွင် အတန်း ကိုအသုံးပြုပြီး .colBootstrap သည် ဒြပ်စင်မည်မျှရှိသည်ကို အသိအမှတ်ပြုလိမ့်မည် (နှင့် တူညီသောအကျယ်ကော်လံများကို ဖန်တီးပါ)။ အောက်ဖော်ပြပါ ဥပမာတွင်၊ တစ်ခုစီတွင် width 33.33% ရရှိသည့် col element သုံးခုကို အသုံးပြုပါသည်။
ဥပမာ
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div
class="col">col</div>
</div>
နံပါတ်များကိုအသုံးပြု၍ တူညီသောကော်လံသုံးခု
ကော်လံအကျယ်ကို ထိန်းချုပ်ရန် နံပါတ်များကို အသုံးပြုနိုင်သည်။ ပေါင်းလဒ်သည် 12 သို့မဟုတ် ထို့ထက်နည်းအောင် ပေါင်းထားကြောင်း သေချာပါစေ။ (သင်ရရှိနိုင်သည့် ကော်လံ 12 ခုလုံးကို အသုံးပြုရန် မလိုအပ်ပါ)
ဥပမာ
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div
class="col-4">col-4</div>
</div>
မညီမျှသောကော်လံသုံးခု
မညီမျှသောကော်လံများဖန်တီးရန်၊ နံပါတ်များကို အသုံးပြုရပါမည်။ အောက်ဖော်ပြပါ ဥပမာသည် 25%/50%/25% ခွဲခြမ်းကို ဖန်တီးလိမ့်မည်-
ဥပမာ
<div class="row">
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
<div
class="col-3">col-3</div>
</div>
One Column Width သတ်မှတ်ခြင်း။
သို့ရာတွင်၊ ကော်လံတစ်ခု၏ အကျယ်ကိုသာ သတ်မှတ်ရန် လုံလောက်ပြီး ပေါက်ဖော်ကော်လံများကို ၎င်းအနီးတစ်ဝိုက်တွင် အလိုအလျောက် အရွယ်အစားပြောင်းလဲစေပါသည်။ အောက်ဖော်ပြပါ ဥပမာသည် 25%/50%/25% ခွဲခြမ်းကို ဖန်တီးလိမ့်မည်-
ဥပမာ
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div
class="col">col</div>
</div>
တူညီသော ကော်လံများ
ဥပမာ
<!-- Two equal columns -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four equal columns -->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<!-- Six equal columns -->
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div>
အတန်း Cols
.row-cols-*အတန်းများ နှင့်အတူ တစ်ခုနှင့်တစ်ခု ဘေးတွင်ပေါ်လာမည့် ကော်လံမည်မျှရှိသည် (cols မည်မျှပင်ရှိစေကာမူ) ကိုလည်း သင်ထိန်းချုပ်နိုင်သည် -
ဥပမာ
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div>
နောက်ထပ် မညီမျှသော ကော်လံများ
ဥပမာ
<!-- Two Unequal
Columns -->
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3
of 4</div>
<div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
တူညီသောအမြင့်
အကယ်၍ ကော်လံတစ်ခုသည် အခြားတစ်ခုထက် မြင့်ပါက (စာသား သို့မဟုတ် CSS အမြင့်ကြောင့်)၊ ကျန်သည် အောက်ပါအတိုင်း ဖြစ်လိမ့်မည်-
ဥပမာ
<div class="row">
<div class="col">Lorem ipsum...</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Nested ကော်လံများ
အောက်ဖော်ပြပါ ဥပမာသည် ကော်လံတစ်ခုအတွင်းရှိ အခြားကော်လံနှစ်ခုနှင့်အတူ ကော်လံနှစ်ခု အပြင်အဆင်ကို ဖန်တီးနည်းကို ပြသသည်-
ဥပမာ
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
တုံ့ပြန်မှုသင်တန်းများ
Bootstrap 4 grid စနစ်တွင် အတန်းငါးခုရှိသည်။
.col-(အပိုပစ္စည်းများ - မျက်နှာပြင်အကျယ် 576px အောက်).col-sm-(စက်ပစ္စည်းငယ်များ - မျက်နှာပြင်အကျယ် 576px နှင့် ညီမျှသော သို့မဟုတ် ပိုကြီးသည်).col-md-(အလတ်စား စက်ပစ္စည်းများ - မျက်နှာပြင် အကျယ်သည် 768px နှင့် ညီမျှသော သို့မဟုတ် ပိုကြီးသည်).col-lg-(စက်ပစ္စည်းကြီးများ - မျက်နှာပြင်အကျယ် 992px နှင့် ညီမျှသော သို့မဟုတ် ပိုကြီးသည်).col-xl-(xlarge စက်များ - မျက်နှာပြင်အကျယ် 1200px နှင့် ညီသော သို့မဟုတ် ပိုကြီးသည်)
ပိုမိုသွက်လက်ပြီး လိုက်လျောညီထွေရှိသော အပြင်အဆင်များဖန်တီးရန် အထက်ဖော်ပြပါ အတန်းများကို ပေါင်းစပ်နိုင်ပါသည်။
အကြံပြုချက်- အတန်းတစ်ခုစီသည် စကေးတက်လာသောကြောင့် တူညီသော widths များကို
smသတ်မှတ် mdလိုပါက သတ်မှတ်ရန်သာ လိုအပ်ပါသည် sm။
အလျားလိုက်သို့ စုထားသည်။
အောက်ဖော်ပြပါ ဥပမာသည် ပိုကြီးသော စက်များတွင် အလျားလိုက်မဖြစ်မီ အပိုသေးငယ်သော စက်များတွင် ကော်လံအပြင်အဆင်ကို ဖန်တီးနည်းကို ပြသသည်-
ဥပမာ
<div class="row">
<div class="col-sm-9">col-sm-9</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div
class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
ရောသမမွှေပါ။
ဥပမာ
<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices
-->
<div class="row">
<div class="col-6
col-sm-9">col-6 col-sm-9</div>
<div class="col-6
col-sm-3">col-6 col-sm-3</div>
</div>
<!-- 58%/42% split
on extra small, small and medium devices and 66.3%/33.3% split on large and
xlarge devices -->
<div class="row">
<div class="col-7 col-lg-8">col-7
col-lg-8</div>
<div class="col-5 col-lg-4">col-5
col-lg-4</div>
</div>
<!-- 25%/75% split on small devices, a 50%/50% split
on medium devices, and a 33%/66% split on large and xlarge devices. On extra
small devices, it will automatically stack (100%) -->
<div
class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3
col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6
col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
ရေတံလျှောက်မရှိ။
.no-guttersရေမြောင်းများကိုဖယ်ရှားရန် အတန်းကို .rowကွန်တိန်နာ ထဲသို့ ထည့်ပါ (အပိုနေရာ)
သို့မှသာ အများစုအတွက်၊ ကျွန်ုပ်တို့ထဲမှ မည်သူတစ်ဦးတစ်ယောက်သည် ယင်းမှ ရည်ရွယ်ချက်များကို အခွင့်ကောင်းယူရန်မှတပါး မည်သည့်အလုပ်အကိုင်မျိုးကိုမဆို ကျင့်သုံးလာမည်ဖြစ်သည်။
ဥပမာ
<div class="row no-gutters">