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 |
ကျွန်ုပ်တို့တွင် ကော်လံနှစ်ခုပါသော ရိုးရှင်းသော အပြင်အဆင်တစ်ခုရှိသည်ဟု ယူဆပါ။ စက်ပစ္စည်းငယ်များအတွက် ကော်လံများကို 25%/75% ခွဲထားစေလိုပါသည်။
အကြံပြုချက်- သေးငယ်သောစက်ပစ္စည်းများကို မျက်နှာပြင်အကျယ် 768 ပစ်ဇယ်မှ 991 ပစ်ဇယ် အထိ ရှိခြင်းဟု သတ်မှတ်သည် ။
စက်ပစ္စည်းငယ်များအတွက် .col-sm-*အတန်းများကို အသုံးပြုပါမည်။
ကျွန်ုပ်တို့၏ကော်လံနှစ်ခုတွင် အောက်ပါအတန်းများကို ပေါင်းထည့်ပါမည်။
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
ယခု Bootstrap သည် "သေးငယ်သောအရွယ်အစားတွင်၊ ၎င်းတို့တွင် -sm- ပါသောအတန်းများကိုရှာဖွေပြီး၎င်းတို့ကိုအသုံးပြုပါ" ဟုပြောလိမ့်မည်။
အောက်ဖော်ပြပါ ဥပမာသည် အသေးစား (နှင့် အလတ်စားနှင့် အကြီး) စက်များတွင် 25%/75% ကွဲသွားမည်ဖြစ်သည်။ အပိုပစ္စည်းအသေးစားများတွင်၊ ၎င်းသည် အလိုအလျောက်စုဖွဲ့လိမ့်မည် (100%)-
ဥပမာ
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
မှတ်ချက်- ပေါင်းလဒ်သည် 12 အထိ အမြဲထည့်ထားကြောင်း သေချာပါစေ။
33.3%/66.6% ခွဲခြမ်းအတွက်၊ သင်အသုံးပြုမည့် .col-sm-4နှင့် .col-sm-8:
ဥပမာ
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
နောက်အခန်းတွင် အလယ်အလတ်စက်ပစ္စည်းများအတွက် မတူညီသော ခွဲခြမ်းရာခိုင်နှုန်းကို မည်သို့ထည့်ရမည်ကို ပြသထားသည်။