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

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

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

အလွှာငါးခု

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

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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

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

.col-md-4

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

အတန်း များကို အသုံးပြုခြင်းဖြင့် .row-cols-*၊ အညီအမျှ ကော်လံများဖြင့် ဇယားကွက်တစ်ခုကို အလွယ်တကူ ဖန်တီးနိုင်သည်။

.colကလေး .row-cols-md-3

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

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

.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-၆

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

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

.col-6 .col-lg-4

.col-6 .col-sm-4

ရေတံလျှောက်

အတန်းများ နှင့်အတူ .gx-*၊ အလျားလိုက်ရေမြောင်းများကိုချိန်ညှိနိုင်သည်။

.colရေ .gx-4မြောင်းများ နှင့်

.gy-*ဒေါင်လိုက်ရေမြောင်းများကို ထိန်းချုပ်ရန် အတန်းများကို အသုံးပြုပါ ။

.colရေ .gy-4မြောင်းများ နှင့်

အတန်းများ နှင့်အတူ .g-*၊ လမ်းကြောင်းနှစ်ခုလုံးရှိရေမြောင်းများကိုချိန်ညှိနိုင်သည်။

.colရေ .g-3မြောင်းများ နှင့်

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

Bootstrap v4.4 တွင်ထည့်သွင်းထားသောနောက်ထပ်အတန်းများသည် သီးခြားခွဲမှတ်တစ်ခုအထိ 100% ကျယ်သောကွန်တိန်နာများကိုခွင့်ပြုသည်။ xxlv5 သည် breakpoint အသစ်တစ်ခုထပ်ထည့်သည် ။

.ကွန်တိန်နာ

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid