Bootstrap 5 网格实例
- အရှေ့စာကြိုး BS5 ပေါင်းစပ် XXL
- နောက်ပိုင်း စာကြိုး BS5 အခြေခံ စံချုပ်
ဒီနောက် ကျမ်းပိုင်းများကို ပြင်ဆင်ခဲ့တယ်၊ Bootstrap 5 ကွန်ပျူတာစက်စစ်တွေ့ရှိတယ်。
三等分列
在指定数量的元素上使用 .col တန်း သတ်မှတ် ပြီး ကိုယ်စား တန်း အချိန့် အား ကိုယ်စား တန်း သတ်မှတ် ပြီး ကိုယ်စား အရေအတွက် အချိန့် အား ရှာဖွေ သည်။ အောက်ပါ အကျိုးသား အကျိုးစား သည် အတူ ရှိ သည့် အတွက် သုံး တန်း ပါ ကိုယ်စား ဖြစ်ပြီး မျက်နှာပြင် အရေအတွက် ၃၃.၃၃% ဖြစ်သည် :
အမှတ်အသား
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
ကိုယ်စား အရေအတွက် ၃ သီးခြား ကိုယ်စား တန်း
သို့မဟုတ် ကိုယ်စား အကျယ်အဝန်း ကို ကိုယ်စား အရေအတွက် ကို ကိုယ်စား တန်း သတ်မှတ် ပြီး ကိုယ်စား အရေအတွက် အချိန့် အား အောက်ပိုင်းသို့ ရှိ သည် (ချီလျှင် အရေအတွက် ၁၂ ကို အသုံးပြု မရှိ) :
အမှတ်အသား
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
သီးခြား ကိုယ်စား အရေအတွက် ၃
သီးခြား ကိုယ်စား ကိုယ်စား အရေအတွက် ကို စစ်ဆေး ရန် လို့မရှိ။ အောက်ပါ အကျိုးသား အကျိုးစား သည် 25%/50%/25% ဖြစ်သည် :
အမှတ်အသား
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
ကိုယ်စား အကျယ်အဝန်း စစ်ဆေး
သို့သော် တစ် ခု သာ ကိုယ်စား အကျယ်အဝန်း ကို စစ်ဆေး ပြီး ကိုယ်စား တို့ အခြား အကျယ်အဝန်း အား အဆိုပါ ကိုယ်စား အကျယ်အဝန်း ဖြင့် လျှော့သည့် ကိုယ်စား များ ဖြစ်သည်။ အောက်ပါ အကျိုးသား အကျိုးစား သည် 25%/50%/25% ဖြစ်သည် :
အမှတ်အသား
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
ပိုမို အတူ ရှိ သည့် ကိုယ်စား များ
အမှတ်အသား
/* အတူ ရှိ သည့် ကိုယ်စား များ */ <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> /* အတူ ရှိ သည့် ကိုယ်စား များ */ <div class="row"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> /* ချီလျှင် အတူ ရှိ သည့် ကိုယ်စား များ */ <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Row Cols
သို့မဟုတ် သုံး တန်း ပါ ကိုယ်စား အရေအတွက် ကို ကိုယ်စား တန်း သတ်မှတ် ပြီး ပါဝင်သည့် ကိုယ်စား အရေအတွက် အချိန့် များများ ဖြစ်နိုင်သည် (သို့မဟုတ် အရေအတွက် များများ) : .row-cols-* တခုခု ကိုယ်စား အား အတူ ရှိ သည့် ကိုယ်စား အရေအတွက် ကိုသို့ ကိုယ်စား တန်း သတ်မှတ် ပြီး ပါဝင်သည့် ကိုယ်စား အရေအတွက် အချိန့် များများ ဖြစ်နိုင်သည် (သို့မဟုတ် အရေအတွက် များများ) :
အမှတ်အသား
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
ပိုမို သီးခြား ကိုယ်စား
အမှတ်အသား
/* သီးခြား ကိုယ်စား */ <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- Four unequal columns --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- Setting two column widths --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
အကြီးအကြပ်
အရာတွေ တစ်လုံး အရာတွေ တစ်လုံး ထက် ရှိသော အရောက်ရှိသည်（အခြား အရာတွေ သည် အကြီးသော အရာတွေ ဖြစ်ပါက အခြား အရာတွေ သည် အလိုအရ နေသည်）:
အမှတ်အသား
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
အပြန်ပြန် လင်း
အောက်ပါ အကျိုးသတ်မှတ် မှာ လင်းတပ်ထားခြင်း ကို ပြထားသည်။ အစားထိုးထားသော အရာတွေ ကို ကိုယ်တိုင် ပေါက်ကွဲသွားသည်၊ ထို့နောက် ကြီးမားသော အရာတွေ တစ်လုံး အတွင်း လင်းတပ်ထားသော လင်းတစ်လုံး နှင့် လင်းတစ်လုံး ပါဝင်သည်:
အမှတ်အသား
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
အပြန်ပြန် အကိုင်း
Bootstrap 5 ပေါ်တွင် အကိုင်းအခြား အမျိုးအစား ငါးခု ရှိသည်:
.col-(အဆိုးငယ် အက်ယံ - အရာတွေ အကွာအဝေး သည် 576px အောက် သို့မဟုတ် အမျှော်လည်းပါ).col-sm-(အဆိုး အက်ယံ - အရာတွေ အကွာအဝေး သည် 576px အထိ သို့မဟုတ် အမျှော်လည်းပါ).col-md-(အဆိုးငယ် အက်ယံ - အရာတွေ အကွာအဝေး သည် 768 ပမာဏ အထိ သို့မဟုတ် အမျှော်လည်းပါ).col-lg-(ကြီးမား အက်ယံ - အရာတွေ အကွာအဝေး သည် 992 ပမာဏ အထိ သို့မဟုတ် အမျှော်လည်းပါ).col-xl-(xlarge အက်ယံ - အရာတွေ အကွာအဝေး သည် 1200px အထိ သို့မဟုတ် အမျှော်လည်းပါ).col-xxl-(xxlarge အက်ယံ - အရာတွေ အကွာအဝေး သည် 1400px အထိ သို့မဟုတ် အမျှော်လည်းပါ)
အထက်တွင် အမှတ်ပြုထားသော အကိုင်းအခြား ကို ပေါင်းစပ်ထားခြင်း အရ ပိုမို လျှပ်ကြား နှင့် ပျောက်ကြား သော ပြင်ပေးခြင်း ကို ဖွဲ့စည်းနိုင်ပါသည်。
အကြိုးသတ်မှတ်မည်သည့် အကိုင်းအခြား သည် အဆုံးဖြတ်သွားခြင်း sm နှင့် md လုံးစုံ အနက်အရောက် ကို အစားထိုးထားခြင်း အရ သာ အသုံးပြုရမည် sm。
ပေါက်ကွဲသွားခြင်း
အောက်ပါ အကျိုးသတ်မှတ် မှာ လင်းတပ်ထားခြင်း ကို ပြထားသည်။ အစားထိုးထားသော အရာတွေ ကို ကိုယ်တိုင် ပေါက်ကွဲသွားသည်၊ ထို့နောက် ကြီးမားသော အရာတွေ（sm、md、lg နှင့် xl）တွင် ရှိသော အရာတွေ သည် လေးလျားသော ပြင်ပနေသည်:
အမှတ်အသား
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
ပေါင်းစပ် ပြီး ပေါင်းစပ်ကြည့်
အမှတ်အသား
<!-- အက်စ်ကက် အရာများ တွင် 50%/50% ဖွဲ့စည်းခြင်း၊ အက်စ်ကက် အရာများ တွင် 75%/25% ဖွဲ့စည်းခြင်း --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- အက်စ်ကက် အက်စ်ကက် အရာများ တွင် 58%/42% ဖွဲ့စည်းခြင်း၊ အက်စ်ကက် အက်စ်ကက် အရာများ တွင် 66.3%/33.3% ဖွဲ့စည်းခြင်း --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- အက်စ်အက်အက် အရာများ တွင် 25%/75% ဖွဲ့စည်းခြင်း၊ အက်စ်အက်အက် အရာများ တွင် 50%/50% ဖွဲ့စည်းခြင်း၊ အက်စ်ကက် အရာများ တွင် 33%/66% ဖွဲ့စည်းခြင်း၊ အက်စ်ကက် အရာများ တွင် 100% ဖွဲ့စည်းခြင်း။---> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
အဆန့်မပါ
လေးလုံး အစိတ်အခံ (ပိုမိုသား အပွား) ကို ပြောင်းလဲရန် အသုံးပြုပါ .g-1|2|3|4|5 အမျိုးအစား (.g-4 အခြေခံ သတ်မှတ်ချက်)။
ပေါင်းစပ်အဆန့် (gutter) ကို ဖျက်သိမ်းရန် အသုံးပြုပါ .g-0：
အမှတ်အသား
<div class="row g-0">
- အရှေ့စာကြိုး BS5 ပေါင်းစပ် XXL
- နောက်ပိုင်း စာကြိုး BS5 အခြေခံ စံချုပ်
