Bootstrap 4 Grid အသေး
Small Grid နမူနာ
| Extra small | Small | Medium | Large | Extra Large | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Screen width | <576px | >=576px | >=768px | >=992px | >=1200px |
ကျွန်ုပ်တို့တွင် ကော်လံနှစ်ခုပါသော ရိုးရှင်းသော အပြင်အဆင်တစ်ခုရှိသည်ဟု ယူဆပါ။ စက်ပစ္စည်းငယ်များအတွက် ကော်လံများကို 25%/75% ခွဲထားစေလိုပါသည်။
သေးငယ်သောစက်ပစ္စည်းများကို မျက်နှာပြင်အကျယ် 576 pixels မှ 767 pixels အထိရှိခြင်းဟု သတ်မှတ်သည် ။
စက်ပစ္စည်းငယ်များအတွက် .col-sm-*အတန်းများကို အသုံးပြုပါမည်။
ကျွန်ုပ်တို့၏ကော်လံနှစ်ခုတွင် အောက်ပါအတန်းများကို ပေါင်းထည့်ပါမည်။
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
ယခု Bootstrap သည် "သေးငယ်သောအရွယ်အစားတွင်၊ ၎င်းတို့တွင် -sm- ပါသောအတန်းများကိုရှာဖွေပြီး၎င်းတို့ကိုအသုံးပြုပါ" ဟုပြောလိမ့်မည်။
အောက်ဖော်ပြပါ ဥပမာသည် အသေးစား (နှင့် အလတ်စား၊ အကြီးနှင့် xlarge) စက်ပစ္စည်းများတွင် 25%/75% ကွဲသွားမည်ဖြစ်သည်။ အပိုပစ္စည်းအသေးစားများတွင်၊ ၎င်းသည် အလိုအလျောက်စုဖွဲ့လိမ့်မည် (100%)-
ဥပမာ
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
မှတ်ချက်- ပေါင်းလဒ်သည် 12 သို့မဟုတ် ထို့ထက်နည်းအောင် ပေါင်းထားကြောင်း သေချာပါစေ။ (သင်ရရှိနိုင်သည့် ကော်လံ 12 ခုလုံးကို အသုံးပြုရန် မလိုအပ်ပါ)။
33.3%/66.6% ခွဲခြမ်းအတွက်၊ သင်အသုံးပြုမည်ဖြစ်ပြီး .col-sm-4( .col-sm-8နှင့် 50%/50% ခွဲခြမ်းအတွက်၊ သင်သုံး .col-sm-6နိုင်သည် .col-sm-6)
ဥပမာ
<!-- 33.3/66.6% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
အလိုအလျောက် အပြင်အဆင် ကော်လံများ
Bootstrap 4 တွင်၊ စက်အားလုံးအတွက် တူညီသော width ကော်လံများကို ဖန်တီးရန် လွယ်ကူသောနည်းလမ်းတစ်ခု ရှိသည်- နံပါတ်ကို ဖယ်ရှားလိုက်ရုံ ဖြင့် သတ်မှတ်ထားသော
col ဒြပ်စင်.col-sm-* အရေအတွက်တွင် အတန်းကို အသုံးပြု ပါ ။ Bootstrap သည် ကော်လံမည်မျှရှိသည်ကို သိရှိမည်ဖြစ်ပြီး ကော်လံတစ်ခုစီသည် တူညီသောအကျယ်ကို ရရှိမည်ဖြစ်သည်။.col-sm
မျက်နှာပြင်အရွယ်အစားသည် 576px ထက်နည်း ပါ က၊ ကော်လံများသည် အလျားလိုက် စည်းမည်-
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>
နောက်အခန်းတွင် အလယ်အလတ်စက်ပစ္စည်းများအတွက် မတူညီသော ခွဲခြမ်းရာခိုင်နှုန်းကို မည်သို့ထည့်ရမည်ကို ပြသထားသည်။