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