Bootstrap Grid - အလတ်စား ကိရိယာများ
Bootstrap Grid ဥပမာ- အလတ်စား စက်ကိရိယာများ
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <768px | >=768px | >=992px | >=1200px |
ယခင်အခန်းတွင်၊ စက်အသေးစားများအတွက် အတန်းများပါသော ဇယားကွက်နမူနာကို တင်ပြထားပါသည်။ ကျွန်ုပ်တို့သည် divs (ကော်လံ) နှစ်ခုကိုအသုံးပြုပြီး ၎င်းတို့အား 25%/75% ခွဲခြမ်းပေးပါသည်။
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
ဒါပေမယ့် အလယ်အလတ် စက်ပစ္စည်းတွေမှာ ဒီဇိုင်းက 50%/50% ခွဲပြီး ပိုကောင်းနိုင်ပါတယ်။
အကြံပြုချက်- အလတ်စားစက်ပစ္စည်းများကို မျက်နှာပြင်အကျယ် 992 ပစ်ဇယ်မှ 1199 ပစ်ဇယ် အထိ ရှိခြင်းဟု သတ်မှတ်သည် ။
အလတ်စား စက်များအတွက် ကျွန်ုပ်တို့သည် .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% နှင့် အလယ်အလတ် (နှင့် အကြီး) စက်ပစ္စည်းများတွင် 50%/50% ခွဲထွက်မည်ဖြစ်သည်။ အပိုပစ္စည်းအသေးစားများတွင်၊ ၎င်းသည် အလိုအလျောက်စုဖွဲ့လိမ့်မည် (100%)-
ဥပမာ
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3 col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
မှတ်ချက်- ပေါင်းလဒ်သည် 12 အထိ အမြဲထည့်ထားကြောင်း သေချာပါစေ။
အလယ်အလတ်သာအသုံးပြုခြင်း။
အောက်ဖော်ပြပါ ဥပမာတွင်၊ ကျွန်ုပ်တို့သည် .col-md-6အတန်းအစား (မပါဘဲ .col-sm-*) ကိုသာ သတ်မှတ်ပါသည်။ ဆိုလိုသည်မှာ အလတ်စားနှင့် အကြီးစား စက်များသည် အတန်းစကေးတက်လာသောကြောင့် 50%/50% ကွဲသွားမည်ဖြစ်သည်။ သို့သော်၊ သေးငယ်သောစက်ပစ္စည်းများအတွက်၊ ၎င်းသည် ဒေါင်လိုက် (100% အကျယ်) ကို စုထားပါမည်။
ဥပမာ
<div class="row">
<div class="col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
နောက်အခန်းတွင် စက်ကြီးများအတွက် မတူညီသော ခွဲခြမ်းရာခိုင်နှုန်းကို ထည့်သွင်းနည်းကို ပြသထားသည်။