Bootstrap Grid နမူနာများ
အောက်တွင် ကျွန်ုပ်တို့သည် အခြေခံ Bootstrap ဇယားကွက်များ နမူနာအချို့ကို စုစည်းထားပါသည်။
တူညီသောကော်လံသုံးခု
အောက်ဖော်ပြပါ ဥပမာသည် တက်ဘလက်များမှအစပြု၍ တူညီသောအကျယ်အဝန်းကော်လံသုံးခုကို မည်သို့ရရှိနိုင်ကြောင်းနှင့် ကြီးမားသောဒက်စ်တော့များအထိ ချဲ့ထွင်ပုံကို ပြသထားသည်။ မိုဘိုင်းလ်ဖုန်းများတွင် ကော်လံများကို အလိုအလျောက် စုစည်းပါမည်-
ဥပမာ
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
မညီမျှသော ကော်လံသုံးခု
အောက်ဖော်ပြပါ ဥပမာသည် တက်ဘလက်များမှအစပြု၍ အမျိုးမျိုးသော အကျယ်အဝန်းကော်လံသုံးခုကို မည်သို့ရရှိနိုင်ကြောင်းနှင့် ကြီးမားသော ဒက်စတော့များအထိ ချဲ့ထွင်ပုံကို ပြသသည်-
ဥပမာ
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
မညီမျှသော ကော်လံနှစ်ခု
အောက်ဖော်ပြပါ ဥပမာသည် တက်ဘလက်များမှအစပြု၍ အမျိုးမျိုးသော အကျယ်ကော်လံနှစ်ခုကို မည်သို့ရရှိနိုင်ကြောင်းနှင့် ကြီးမားသော desktop များအထိ ချဲ့ထွင်ပုံအား ပြသသည်-
ဥပမာ
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
ရေမြောင်းများမရှိပါ။
.row-no-guttersအတန်းနှင့် ၎င်း၏ကော်လံများမှ ရေမြောင်းများကို ဖယ်ရှားရန် အတန်း ကို အသုံးပြုပါ ။
ဥပမာ
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Nested ကော်လံ နှစ်ခုပါသော ကော်လံနှစ်ခု
အောက်ဖော်ပြပါ ဥပမာတွင် ကော်လံနှစ်ခုကို တက်ဘလက်များမှ စတင်၍ ကြီးမားသော ဒက်စတော့များအထိ ချဲ့ထွင်နိုင်ပုံကို ပြသထားပြီး ပိုကြီးသောကော်လံအတွင်း နောက်ထပ်ကော်လံနှစ်ခု (တူညီသောအကျယ်များ) ဖြင့် (မိုဘိုင်းဖုန်းများတွင် ဤကော်လံများနှင့် ၎င်းတို့၏ nested ကော်လံများ စုပုံနေမည်)။
ဥပမာ
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
ရောနှောထားသော- မိုဘိုင်းနှင့် ဒက်စ်တော့
Bootstrap ဂရစ်စနစ်တွင် အတန်းလေးမျိုး ပါရှိသည်- xs (ဖုန်းများ)၊ sm (တက်ဘလက်)၊ md (ဒက်စ်တော့) နှင့် lg (ပိုကြီးသော ဒက်စတော့များ)။ ပိုမိုသွက်လက်ပြီး လိုက်လျောညီထွေရှိသော အပြင်အဆင်များဖန်တီးရန် အတန်းများကို ပေါင်းစပ်နိုင်သည်။
အကြံပြုချက်- အတန်းတစ်ခုစီသည် စကေးတက်လာသောကြောင့် xs နှင့် sm အတွက် တူညီသော widths များကို သတ်မှတ်လိုပါက xs ကိုသာ သတ်မှတ်ရန် လိုအပ်ပါသည်။
ဥပမာ
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
အကြံပြုချက်- ဇယားကွက်ကော်လံများသည် အတန်းတစ်ခုအတွက် ဆယ့်နှစ်ခုအထိ ပေါင်းသင့်သည်ကို သတိရပါ။ ထို့ထက်မက၊ ကော်လံများသည် ရှုထောင့်မှနေပါစေ၊
ရောနှောထားသော- မိုဘိုင်း၊ တက်ဘလက်နှင့် ဒက်စ်တော့
ဥပမာ
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Float များကို ရှင်းလင်းပါ။
.clearfixမညီမညာသော အကြောင်းအရာများဖြင့် ထူးထူးခြားခြား ထုပ်ပိုးခြင်းမှ ကာကွယ်ရန် သတ်မှတ်ထားသော ခွဲထွက်နေရာများတွင် float (အတန်းနှင့်) ကို ရှင်းလင်း ပါ။
ဥပမာ
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
Offsetting ကော်လံများ
.col-md-offset-*အတန်း များကို အသုံးပြု၍ ကော်လံများကို ညာဘက်သို့ ရွှေ့ပါ ။ ဤအတန်းများသည် ကော်လံတစ်ခု၏ ဘယ်ဘက်အနားသတ်ကို * ကော်လံများဖြင့် တိုးသည်-
ဥပမာ
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
Push And Pull - ကော်လံမှာယူခြင်းကို ပြောင်းလဲပါ။
ဇယားကွက်ကော်လံများ .col-md-push-*နှင့်
.col-md-pull-*အတန်းများကို ပြောင်းလဲပါ-
ဥပမာ
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>