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

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

အလွှာငါးခု

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 (ပိုကြီး)။ ပိုမိုတက်ကြွပြီး လိုက်လျောညီထွေရှိသော အပြင်အဆင်များဖန်တီးရန် ဤအတန်းများ၏ ပေါင်းစပ်မှုတိုင်းနီးပါးကို သင်အသုံးပြုနိုင်ပါသည်။

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

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

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

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

.col-6 .col-lg-4

.col-6 .col-sm-4