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