Bootstrap 4 Grid Medium
Medium 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 |
ယခင်အခန်းတွင်၊ စက်အသေးစားများအတွက် အတန်းများပါသော ဇယားကွက်နမူနာကို တင်ပြထားပါသည်။ ကျွန်ုပ်တို့သည် divs (ကော်လံ) နှစ်ခုကိုအသုံးပြုပြီး ၎င်းတို့အား 25%/75% ခွဲခြမ်းပေးပါသည်။
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
ဒါပေမယ့် အလယ်အလတ် စက်ပစ္စည်းတွေမှာ ဒီဇိုင်းက 50%/50% ခွဲပြီး ပိုကောင်းနိုင်ပါတယ်။
အလယ်အလတ်စက်ပစ္စည်းများကို မျက်နှာပြင်အကျယ် 768 pixels မှ 991 pixels အထိရှိခြင်းဟု သတ်မှတ်သည် ။
အလတ်စား စက်များအတွက် ကျွန်ုပ်တို့သည် အတန်းများကို အသုံးပြုပါမည် .col-md-*-
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
ယခု Bootstrap သည် "သေးငယ်သောအရွယ်အစားတွင်၊ ၎င်းတို့တွင် -sm- ပါသောအတန်းများကိုကြည့်ရှုပြီး၎င်းတို့ကိုအသုံးပြုပါ။ အလယ်အလတ်အရွယ်အစားတွင်၊ ၎င်းတို့တွင် -md- ပါသောအတန်းများကိုကြည့်ရှုပြီး၎င်းတို့ကိုအသုံးပြုပါ" ဟုပြောလိမ့်မည်။
အောက်ဖော်ပြပါ ဥပမာသည် စက်ပစ္စည်းငယ်များတွင် 25%/75% နှင့် အလယ်အလတ် (နှင့် အကြီးနှင့် xlarge) စက်ပစ္စည်းများတွင် 50%/50% ကွဲသွားမည်ဖြစ်သည်။ အပိုပစ္စည်းအသေးစားများတွင်၊ ၎င်းသည် အလိုအလျောက်စုဖွဲ့လိမ့်မည် (100%)-
ဥပမာ
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
မှတ်ချက်- ပေါင်းလဒ်သည် 12 သို့မဟုတ် ထို့ထက်နည်းအောင် ပေါင်းထားကြောင်း သေချာပါစေ။ (သင်ရရှိနိုင်သည့် ကော်လံ 12 ခုလုံးကို အသုံးပြုရန် မလိုအပ်ပါ)။
အလယ်အလတ်သာအသုံးပြုခြင်း။
အောက်ဖော်ပြပါ ဥပမာတွင်၊ ကျွန်ုပ်တို့သည် .col-md-6အတန်းအစား (မပါဘဲ .col-sm-*) ကိုသာ သတ်မှတ်ပါသည်။ ဆိုလိုသည်မှာ အလတ်စား၊ အကြီးနှင့် ပိုကြီးသော စက်ပစ္စည်းများသည် အတန်းစကေးတက်လာသောကြောင့် 50%/50% ကွဲသွားမည်ဖြစ်သည်။ သို့သော်၊ အသေးစားနှင့် ပိုသေးငယ်သော စက်များအတွက်၊ ၎င်းသည် ဒေါင်လိုက် (100% အကျယ်) ကို စည်းထားမည်-
ဥပမာ
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
အလိုအလျောက် အပြင်အဆင် ကော်လံများ
Bootstrap 4 တွင်၊ စက်အားလုံးအတွက် တူညီသော width ကော်လံများကို ဖန်တီးရန် လွယ်ကူသောနည်းလမ်းတစ်ခု ရှိသည်- နံပါတ်ကို ဖယ်ရှားလိုက်ရုံ ဖြင့် သတ်မှတ်ထားသော
col ဒြပ်စင်.col-md-* အရေအတွက်တွင် အတန်းကို အသုံးပြု ပါ ။ Bootstrap သည် ကော်လံမည်မျှရှိသည်ကို သိရှိမည်ဖြစ်ပြီး ကော်လံတစ်ခုစီသည် တူညီသောအကျယ်ကို ရရှိမည်ဖြစ်သည်။.col-md
မျက်နှာပြင်အရွယ်အစားသည် 768px ထက်နည်း ပါ က၊ ကော်လံများသည် အလျားလိုက် စည်းမည်-
<!-- Two columns: 50% width on medium and up-->
<div class="row">
<div class="col-md">1 of
2</div>
<div class="col-md">2 of 2</div>
</div>
<!-- Four
columns: 25% width on medium and up -->
<div class="row">
<div class="col-md">1 of 4</div>
<div class="col-md">2 of 4</div>
<div class="col-md">3
of 4</div>
<div class="col-md">4 of 4</div>
</div>
နောက်အခန်းတွင် စက်ကြီးများအတွက် မတူညီသော ခွဲခြမ်းရာခိုင်နှုန်းကို ထည့်သွင်းနည်းကို ပြသထားသည်။