Bootstrap 4 Grid Extra Small
Extra 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% ခွဲပေးစေလို ပါသည် ။
ကျွန်ုပ်တို့၏ကော်လံနှစ်ခုတွင် အောက်ပါအတန်းများကို ပေါင်းထည့်ပါမည်။
<div class="col-3">....</div>
<div class="col-9">....</div>
အောက်ဖော်ပြပါ ဥပမာသည် စက်အားလုံးတွင် 25%/75% ပိုင်းခြားခြင်း (အသေးစား၊ အသေးစား၊ အလတ်စား၊ အကြီးနှင့် xlarge) ကို ဖြစ်ပေါ်စေပါမည်။
ဥပမာ
<div class="container-fluid">
<div class="row">
<div class="col-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
မှတ်ချက်- ပေါင်းလဒ်သည် 12 သို့မဟုတ် ထို့ထက်နည်းအောင် ပေါင်းထားကြောင်း သေချာပါစေ။ (သင်ရရှိနိုင်သည့် ကော်လံ 12 ခုလုံးကို အသုံးပြုရန် မလိုအပ်ပါ)။
33.3%/66.6% ခွဲခြမ်းအတွက်၊ သင်အသုံးပြုမည်ဖြစ်ပြီး .col-4( .col-8နှင့် 50%/50% ခွဲခြမ်းအတွက်၊ သင်သုံး .col-6နိုင်သည် .col-6)
ဥပမာ
<!-- 33.3%/66.6% split -->
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
အလိုအလျောက် အပြင်အဆင် ကော်လံများ
Bootstrap 4 တွင်၊ စက်အားလုံးအတွက် တူညီသော width ကော်လံများကို ဖန်တီးရန် လွယ်ကူသောနည်းလမ်းတစ်ခု ရှိသည်- နံပါတ်ကို ဖယ်ရှားလိုက်ရုံ ဖြင့် သတ်မှတ်ထားသော
col ဒြပ်စင်.col-* အရေအတွက်တွင် အတန်းကို အသုံးပြု ပါ ။ Bootstrap သည် ကော်လံမည်မျှရှိသည်ကို သိရှိမည်ဖြစ်ပြီး ကော်လံတစ်ခုစီသည် တူညီသောအကျယ်ကို ရရှိလိမ့်မည်-.col
<!-- Two columns: 50% width-->
<div class="row">
<div class="col">1 of
2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four
columns: 25% width-->
<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>
နောက်အခန်းတွင် စက်ပစ္စည်းငယ်များအတွက် မတူညီသော ခွဲခြမ်းရာခိုင်နှုန်းကို ထည့်သွင်းနည်းကို ပြသထားသည်။