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

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

ဤဥပမာများတွင် .themed-grid-colအတန်းကို ကော်လံများတွင် ပေါင်းထည့်ထားသည်။ ၎င်းသည် ပုံမှန်အားဖြင့် Bootstrap တွင် ရနိုင်သော အတန်းမဟုတ်ပါ။

အလွှာငါးခု

Bootstrap grid စနစ်တွင် အဆင့်ငါးဆင့်ရှိပြီး၊ ကျွန်ုပ်တို့ပံ့ပိုးပေးသည့် စက်အကွာအဝေးတစ်ခုစီအတွက် တစ်ခု။ အဆင့်တစ်ခုစီသည် အနိမ့်ဆုံး မြင်ကွင်းပို့ အရွယ်အစားမှ စတင်ပြီး လွှမ်းမိုးမှု မခံရပါက ပိုကြီးသော စက်များတွင် အလိုအလျောက် သက်ရောက်သည်။

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-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-4

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

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

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

.col-md-8

.col-6 .col-md-4

.col-6

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

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

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

အလွှာငါးခု

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

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

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

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

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

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

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

ကွန်တိန်နာများ