Bootstrap ဇယားကွက် နမူနာများ

Bootstrap grid စနစ်အတွင်း တည်ဆောက်ခြင်းနှင့် ရင်းနှီးစေရန် အခြေခံ ဂရစ် အပြင်အဆင်များ။

အညီအမျှ ကော်လံသုံးခု

ဒက်စတော့တွင် စတင်၍ တူညီသော အနံကော်လံသုံးခု ကို ရယူပြီး ဒက်စတော့ကြီးများသို့ ချဲ့ထွင်ပါ ။ မိုဘိုင်းစက်ပစ္စည်းများ၊ တက်ဘလက်များနှင့် အောက်ရှိ ကော်လံများသည် အလိုအလျောက် စုပုံနေမည်ဖြစ်သည်။

.col-md-4
.col-md-4
.col-md-4

မညီမျှသောကော်လံသုံးခု

ဒက်စတော့တွင် စတင်ကာ ကော်လံသုံးခု ကို ရယူပြီး အကျယ်အမျိုးမျိုး ရှိသော ဒက်စတော့ကြီးများသို့ ချဲ့ထွင်ပါ ။ အလျားလိုက်ဘလောက်တစ်ခုအတွက် ဇယားကွက်ကော်လံများသည် ဆယ့်နှစ်ခုအထိ ပေါင်းသင့်သည်ကို သတိရပါ။ ထို့ထက်မက၊ ရှုမြင်ပုံပေါက်သည်ဖြစ်စေ ကော်လံများစဥ်းစားနေပါသည်။

.col-md-3
.col-md-6
.col-md-3

ကော်လံနှစ်ခု

ဒက်စတော့တွင် စတင်၍ ကော်လံနှစ်ခုကို ရယူပြီး ဒက်စတော့ကြီးများသို့ ချဲ့ထွင်ပါ ။

.col-md-8
.col-md-4

အနံအပြည့်အစုံ၊ ကော်လံတစ်ခုတည်း

အကျယ်အဝန်းပြည့်သောဒြပ်စင်များအတွက် ဂရစ်အတန်းများမလိုအပ်ပါ။

ကော်လံနှစ်ခုပါသော ကော်လံနှစ်ခု

စာရွက်စာတမ်းအရ nesting သည် လွယ်ကူသည်—ရှိပြီးသား ကော်လံတစ်ခုအတွင်း ကော်လံတစ်တန်းကို ထားရုံသာ။ ၎င်းသည် သင့်အား ဒက်စတော့များပေါ်တွင် စတင်သည့် ကော်လံနှစ်ခုကို ပေး ဆောင်ပြီး ပိုကြီးသောကော်လံအတွင်း နောက်ထပ် နှစ်ခု (တူညီသော အကျယ်များ) ဖြင့် ကြီးမားသော ဒက်စ်တော့များသို့ ချဲ့ထွင် ပေးသည်။

မိုဘိုင်းကိရိယာ အရွယ်အစား၊ တက်ဘလက်များနှင့် အောက်တွင်၊ ဤကော်လံများနှင့် ၎င်းတို့၏ အစုအဝေးကော်လံများ စုပုံနေလိမ့်မည်။

.col-md-8
.col-md-6
.col-md-6
.col-md-4

ရောစပ်ထားသည်- မိုဘိုင်းနှင့် ဒက်စ်တော့

Bootstrap 3 ဂရစ်စနစ်တွင် အတန်းအစား လေးခုပါရှိသည်- xs (ဖုန်းများ), sm (တက်ဘလက်), md (ဒက်စ်တော့) နှင့် lg (ပိုကြီးသော ဒက်စတော့များ)။ ပိုမိုတက်ကြွပြီး လိုက်လျောညီထွေရှိသော အပြင်အဆင်များဖန်တီးရန် ဤအတန်းများ၏ ပေါင်းစပ်မှုတိုင်းနီးပါးကို သင်အသုံးပြုနိုင်ပါသည်။

xs နှင့် sm အတွက် တူညီသော widths များကို သတ်မှတ်ရန် စီစဉ်ထားပါက၊ သင် xs ကိုသာ သတ်မှတ်ရန်လိုအပ်ပါသည်။

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

ရောနှောထားသော- မိုဘိုင်း၊ တက်ဘလက်၊ နှင့် ဒက်စ်တော့

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

ကော်လံရှင်းလင်းခြင်း။

မညီမညာသော အကြောင်းအရာများဖြင့် အဆင်မပြေသော ထုပ်ပိုးခြင်းကို တားဆီးရန် သီးခြားခွဲထွက်နေရာများတွင် ပေါ်နေသော အရာများကို ရှင်းလင်း ပါ။

.col-xs-6 .col-sm-3
သင့်မြင်ကွင်းကို အရွယ်အစားပြောင်းပါ သို့မဟုတ် နမူနာတစ်ခုအတွက် သင့်ဖုန်းတွင် ၎င်းကို စစ်ကြည့်ပါ။
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

အော့ဖ်ဆက်၊ တွန်း၊ ဆွဲယူ ပြန်လည်သတ်မှတ်ပါ။

အော့ဖ်ဆက်များ၊ တွန်းပို့မှုများနှင့် ဆွဲငင်မှုများကို သတ်မှတ်ထားသော ဖြတ်မှတ်များတွင် ပြန်လည်သတ်မှတ်ပါ။

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0