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