Bootstrap Grid စနစ်
Bootstrap Grid စနစ်
Bootstrap ၏ဇယားကွက်စနစ်သည် စာမျက်နှာတစ်လျှောက် ကော်လံ ၁၂ ခုအထိ ခွင့်ပြုသည်။
အကယ်၍ သင်သည် ကော်လံ 12 ခုလုံးကို တစ်ဦးချင်း မသုံးလိုပါက၊ ပိုကျယ်သော ကော်လံများ ဖန်တီးရန် ကော်လံများကို အတူတကွ အုပ်စုဖွဲ့နိုင်သည်-
| ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ | ထွာ ၁ |
| ထွာ ၄ | ထွာ ၄ | ထွာ ၄ | |||||||||
| ထွာ ၄ | ထွာ ၈ | ||||||||||
| ထွာ ၆ | ထွာ ၆ | ||||||||||
| ထွာ ၁၂ | |||||||||||
Bootstrap ၏ဇယားကွက်စနစ်သည် တုံ့ပြန်မှုရှိပြီး မျက်နှာပြင်အရွယ်အစားပေါ်မူတည်၍ ကော်လံများကို ပြန်လည်စီစဉ်ပေးမည်- မျက်နှာပြင်ကြီးတွင် ကော်လံသုံးခုဖြင့် ဖွဲ့စည်းထားသော အကြောင်းအရာဖြင့် ပိုကောင်းပုံပေါ်နိုင်သော်လည်း ဖန်သားပြင်သေးသေးတွင် အကြောင်းအရာအရာများကို ပေါင်းထားလျှင် ပိုကောင်းမည် အချင်းချင်းအပေါ်။
အကြံပြုချက်- ဇယားကွက်ကော်လံများသည် အတန်းတစ်ခုအတွက် ဆယ့်နှစ်ခုအထိ ပေါင်းသင့်သည်ကို သတိရပါ။ ထို့ထက်မက၊ ကော်လံများသည် ရှုထောင့်မှနေပါစေ၊
Grid သင်တန်းများ
Bootstrap grid စနစ်တွင် class လေးခုရှိသည်။
xs(ဖုန်းများအတွက် - မျက်နှာပြင်အကျယ် 768px အောက်)sm(တက်ဘလက်များအတွက် - အကျယ် 768px ထက်ကြီးသော သို့မဟုတ် ညီသော မျက်နှာပြင်များ)md(သေးငယ်သောလက်ပ်တော့များအတွက် - မျက်နှာပြင်အကျယ် 992px ထက်ကြီးသော သို့မဟုတ် ညီမျှသည်)lg(လက်တော့ပ်များနှင့် ဒက်စတော့များအတွက် - 1200px အကျယ် သို့မဟုတ် ပိုကြီးသော မျက်နှာပြင်များ)
ပိုမိုသွက်လက်ပြီး လိုက်လျောညီထွေရှိသော အပြင်အဆင်များဖန်တီးရန် အထက်ဖော်ပြပါ အတန်းများကို ပေါင်းစပ်နိုင်ပါသည်။
အကြံပြုချက်- အတန်းတစ်ခုစီသည် စကေးတက်လာသောကြောင့် xs နှင့် sm အတွက် တူညီသော widths များကို သတ်မှတ်လိုပါက xs ကိုသာ သတ်မှတ်ရန် လိုအပ်ပါသည်။
Grid စနစ် စည်းကမ်းများ
Bootstrap ဂရစ်စနစ် စည်းမျဉ်းအချို့
- မှန်ကန်သော alignment နှင့် padding အတွက်
.container(ပုံသေ-အနံ) သို့မဟုတ် (အကျယ်-အပြည့်) အတွင်း အတန်းများ ထားရှိရပါမည်.container-fluid - အလျားလိုက် ကော်လံအုပ်စုများ ဖန်တီးရန် အတန်းများကို အသုံးပြုပါ။
- အကြောင်းအရာကို ကော်လံများအတွင်း ထားရှိသင့်ပြီး ကော်လံများသာ အတန်း၏ ချက်ချင်းကလေးများ ဖြစ်နိုင်ပါသည်။
- ဇယားကွက်အပြင်အဆင်များကို လျင်မြန်စွာပြုလုပ်ရန်အတွက်
.rowကဲ့သို့သော ကြိုတင်သတ်မှတ်ထားသော အတန်း များကို ရနိုင်ပါသည်။.col-sm-4 - ကော်လံများသည် padding မှတစ်ဆင့် ရေမြောင်းများ (ကော်လံအကြောင်းအရာကြား ကွာဟချက်) ကို ဖန်တီးသည်။ ထိုအကွက်များကို အနှုတ်အနားသတ်ဖွင့်ထားခြင်းဖြင့် ပထမနှင့်နောက်ဆုံးကော်လံအတွက် အတန်းများတွင် offset လုပ်ထားသည်။
.rows - သင်ချဲ့လိုသော ရရှိနိုင်သော ကော်လံ 12 ခု အရေအတွက်ကို သတ်မှတ်ခြင်းဖြင့် ဂရစ်ကော်လံများကို ဖန်တီးပါသည်။ ဥပမာအားဖြင့်၊ တူညီသောကော်လံသုံးခုသည် သုံးခုကိုသုံးသည်။
.col-sm-4 - ကော်လံအကျယ်သည် ရာခိုင်နှုန်းဖြင့် ဖြစ်သောကြောင့် ၎င်းတို့သည် ၎င်းတို့၏ ပင်မဒြပ်စင်နှင့် အမြဲအရည်ချင်းရှိပြီး အရွယ်အစားဖြစ်သည်။
Bootstrap Grid ၏ အခြေခံဖွဲ့စည်းပုံ
အောက်ပါတို့သည် Bootstrap grid ၏ အခြေခံဖွဲ့စည်းပုံဖြစ်သည် ။
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
ထို့ကြောင့် သင်လိုချင်သော layout ကိုဖန်တီးရန် container ( <div
class="container">) ကိုဖန်တီးပါ။ ထို့နောက် row ( <div
class="row">) ကိုဖန်တီးပါ။ ထို့နောက် လိုချင်သော ကော်လံအရေအတွက် (သင့်လျော်သော
.col-*-*အတန်းများပါသော တက်ဂ်များ) ကို ထည့်ပါ။ .col-*-*အတန်းတစ်ခုစီအတွက် နံပါတ်များသည် 12 အထိ အမြဲထည့်သင့်သည် ကို သတိပြုပါ ။
Grid ရွေးစရာများ
အောက်ဖော်ပြပါဇယားသည် စက်အများအပြားတွင် Bootstrap grid စနစ် အလုပ်လုပ်ပုံကို အကျဉ်းချုပ်ဖော်ပြသည်-
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| 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) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
ဥပမာများ
နောက်အခန်းများတွင် မတူညီသော စက်များအတွက် ဇယားကွက်စနစ် နမူနာများကို ပြသသည်-
- အထပ်လိုက်-အလျားလိုက်
- သေးငယ်သောကိရိယာများ
- အလတ်စား ကိရိယာများ
- ကြီးမားသောပစ္စည်းများ
- နောက်ထပ်ဇယားကွက်ဥပမာများ