Bootstrap 4 Grid စနစ်
Bootstrap 4 Grid စနစ်
Bootstrap ၏ဇယားကွက်စနစ်သည် စာမျက်နှာတစ်လျှောက် ကော်လံ ၁၂ ခုအထိ ခွင့်ပြုသည်။
အကယ်၍ သင်သည် ကော်လံ 12 ခုလုံးကို တစ်ဦးချင်း မသုံးလိုပါက၊ ပိုကျယ်သော ကော်လံများ ဖန်တီးရန် ကော်လံများကို အတူတကွ အုပ်စုဖွဲ့နိုင်သည်-
| ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ |
| ထွာ ၄ | ထွာ ၄ | ထွာ ၄ | |||||||||
| ထွာ ၄ | ထွာ ၈ | ||||||||||
| ထွာ ၆ | ထွာ ၆ | ||||||||||
| ထွာ ၁၂ | |||||||||||
Bootstrap ၏ဇယားကွက်စနစ်သည် တုံ့ပြန်မှုရှိပြီး မျက်နှာပြင်အရွယ်အစားပေါ်မူတည်၍ ကော်လံများကို ပြန်လည်စီစဉ်ပေးမည်- မျက်နှာပြင်ကြီးတွင် ကော်လံသုံးခုဖြင့် ဖွဲ့စည်းထားသော အကြောင်းအရာဖြင့် ပိုကောင်းပုံပေါ်နိုင်သော်လည်း ဖန်သားပြင်သေးသေးတွင် အကြောင်းအရာအရာများကို ပေါင်းထားလျှင် ပိုကောင်းမည် အချင်းချင်းအပေါ်။
Grid သင်တန်းများ
Bootstrap 4 grid စနစ်တွင် အတန်းငါးခုရှိသည်။
.col-(အပိုပစ္စည်းများ - မျက်နှာပြင်အကျယ် 576px အောက်).col-sm-(စက်ပစ္စည်းငယ်များ - မျက်နှာပြင်အကျယ် 576px နှင့် ညီမျှသော သို့မဟုတ် ပိုကြီးသည်).col-md-(အလတ်စား စက်ပစ္စည်းများ - မျက်နှာပြင် အကျယ်သည် 768px နှင့် ညီမျှသော သို့မဟုတ် ပိုကြီးသည်).col-lg-(စက်ပစ္စည်းကြီးများ - မျက်နှာပြင်အကျယ် 992px နှင့် ညီမျှသော သို့မဟုတ် ပိုကြီးသည်).col-xl-(xlarge စက်များ - မျက်နှာပြင်အကျယ် 1200px နှင့် ညီသော သို့မဟုတ် ပိုကြီးသည်)
ပိုမိုသွက်လက်ပြီး လိုက်လျောညီထွေရှိသော အပြင်အဆင်များဖန်တီးရန် အထက်ဖော်ပြပါ အတန်းများကို ပေါင်းစပ်နိုင်ပါသည်။
အကြံပြုချက်- အတန်းတစ်ခုစီသည် စကေးတက်လာသောကြောင့် တူညီသော widths များကို
smသတ်မှတ် mdလိုပါက သတ်မှတ်ရန်သာ လိုအပ်ပါသည် sm။
Grid စနစ် စည်းကမ်းများ
Bootstrap 4 grid စနစ်စည်းမျဉ်းအချို့-
- မှန်ကန်သော alignment နှင့် padding အတွက်
.container(ပုံသေ-အနံ) သို့မဟုတ် (အကျယ်-အပြည့်) အတွင်း အတန်းများ ထားရှိရပါမည်.container-fluid - အလျားလိုက် ကော်လံအုပ်စုများ ဖန်တီးရန် အတန်းများကို အသုံးပြုပါ။
- အကြောင်းအရာကို ကော်လံများအတွင်း ထားရှိသင့်ပြီး ကော်လံများသာ အတန်း၏ ချက်ချင်းကလေးများ ဖြစ်နိုင်ပါသည်။
- ဇယားကွက်အပြင်အဆင်များကို လျင်မြန်စွာပြုလုပ်ရန်အတွက်
.rowကဲ့သို့သော ကြိုတင်သတ်မှတ်ထားသော အတန်း များကို ရနိုင်ပါသည်။.col-sm-4 - ကော်လံများသည် padding မှတစ်ဆင့် ရေမြောင်းများ (ကော်လံအကြောင်းအရာကြား ကွာဟချက်) ကို ဖန်တီးသည်။ ထိုအကွက်များကို အနှုတ်အနားသတ်ဖွင့်ထားခြင်းဖြင့် ပထမနှင့်နောက်ဆုံးကော်လံအတွက် အတန်းများတွင် offset လုပ်ထားသည်။
.rows - သင်ချဲ့လိုသော ရရှိနိုင်သော ကော်လံ 12 ခု အရေအတွက်ကို သတ်မှတ်ခြင်းဖြင့် ဂရစ်ကော်လံများကို ဖန်တီးပါသည်။ ဥပမာအားဖြင့်၊ တူညီသောကော်လံသုံးခုသည် သုံးခုကိုသုံးသည်။
.col-sm-4 - ကော်လံအကျယ်သည် ရာခိုင်နှုန်းဖြင့် ဖြစ်သောကြောင့် ၎င်းတို့သည် ၎င်းတို့၏ ပင်မဒြပ်စင်နှင့် အမြဲအရည်ချင်းရှိပြီး အရွယ်အစားဖြစ်သည်။
- Bootstrap 3 နှင့် Bootstrap 4 အကြား အကြီးမားဆုံး ကွာခြားချက်မှာ ယခု Bootstrap 4 သည် float အစား flexbox ကို အသုံးပြုနေခြင်း ဖြစ်သည်။ flexbox ၏ကြီးမားသောအားသာချက်တစ်ခုမှာ သတ်မှတ်ထားသော width မရှိဘဲ grid columns များသည် "equal width columns" (နှင့် equal height) အဖြစ် အလိုအလျောက် layout ပြုလုပ်မည်ဖြစ်ပါသည်။ ဥပမာ- ဒြပ်စင်သုံးခု
.col-smတစ်ခုစီသည် ခွဲမှတ်ငယ်မှ ၃၃.၃၃% အလိုအလျောက် ကျယ်လာမည်ဖြစ်သည်။ အကြံပြုချက်- Flexbox အကြောင်း ပိုမိုလေ့လာလိုပါက၊ ကျွန်ုပ်တို့၏ CSS Flexbox Tutorial ကို ဖတ်နိုင်ပါသည် ။
Flexbox ကို IE9 နှင့် အစောပိုင်းဗားရှင်းများတွင် ပံ့ပိုးမထားကြောင်း သတိပြုပါ။
IE8-9 ပံ့ပိုးကူညီမှု လိုအပ်ပါက၊ Bootstrap 3 ကို အသုံးပြုပါ။ ၎င်းသည် Bootstrap ၏ အတည်ငြိမ်ဆုံး ဗားရှင်းဖြစ်ပြီး အရေးကြီးသော ချွတ်ယွင်းချက်များနှင့် စာရွက်စာတမ်းပြောင်းလဲမှုများအတွက် အဖွဲ့မှ ပံ့ပိုးပေးနေဆဲဖြစ်သည်။ သို့သော်လည်း ၎င်းတွင် အင်္ဂါရပ်အသစ်များကို ထည့်သွင်းမည်မဟုတ်ပါ။
Bootstrap 4 Grid ၏ အခြေခံဖွဲ့စည်းပုံ
အောက်ဖော်ပြပါသည် Bootstrap 4 grid ၏ အခြေခံဖွဲ့စည်းပုံဖြစ်သည် ။
<!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
ပထမဥပမာ- row ( <div
class="row">) ကိုဖန်တီးပါ။ ထို့နောက် လိုချင်သော ကော်လံအရေအတွက် (သင့်လျော်သော
.col-*-*အတန်းများပါသော တက်ဂ်များ) ကို ထည့်ပါ။ ပထမကြယ် (*) သည် တုံ့ပြန်နိုင်စွမ်းကို ကိုယ်စားပြုသည်- sm, md, lg သို့မဟုတ် xl သည် နံပါတ်တစ်ခုကို ကိုယ်စားပြုပြီး ဒုတိယကြယ်သည် အတန်းတစ်ခုစီအတွက် 12 အထိ အမြဲပေါင်းသင့်သည်။
ဒုတိယဥပမာ- တစ်ခုစီသို့ နံပါတ်တစ်ခုထည့်မည့်အစား col၊ တူညီသော width ကော်လံများဖန်တီးရန် bootstrap သည် layout ကိုစီမံခွင့်ပြုပါ- "col"ဒြပ်စင်နှစ်ခု = col တစ်ခုစီအတွက် 50% အကျယ်။ cols သုံးခု = col တစ်ခုစီသို့ 33.33% အကျယ်။ cols လေးခု = 25% အကျယ် စ .col-sm|md|lg|xlသည်
Grid ရွေးစရာများ
အောက်ဖော်ပြပါဇယားသည် မတူညီသောစခရင်အရွယ်အစားများတွင် Bootstrap 4 grid စနစ် အလုပ်လုပ်ပုံကို အကျဉ်းချုပ်ဖော်ပြသည်-
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes |
ဥပမာများ
နောက်အခန်းများတွင် မတူညီသော စက်များနှင့် မျက်နှာပြင်အကျယ်များအတွက် ဇယားကွက်စနစ် နမူနာများကို ပြသသည်-
- အထပ်လိုက်-အလျားလိုက်
- အပိုလက်ကွက်အသေးစား
- သေးငယ်သောကိရိယာများ
- အလတ်စား ကိရိယာများ
- ကြီးမားသောပစ္စည်းများ
- အပိုကြီးမားသောကိရိယာများ
- နောက်ထပ်ဇယားကွက်ဥပမာများ