Bootstrap 5 စကာတင် ဂုံးဖြူ
- အရှေ့ဆုံး စာရင်း BS5 အကွက်
- နောက်ဆုံး စာရင်း BS5 ဖော်ပြ
Bootstrap 5 စကာတင် အချက်အလက် အချက်ပေါင်း
ဘယ်အိုစ်ပေါ် ပေါင်းစီးဆင်း ပေါင်းစီးဆင်း ကို flexbox ဖြင့် ဖွဲ့စည်းထားပြီး အခြေခံ ပေါင်းစီးဆင်း အား ၁၂ ပေါင်း အထိ ခွင့်ပြုသည်
သင် ၁၂ ပေါင်း ပေါင်းစီးဆင်း အသုံးပြုခြင်း မရှိ လျှင် အခြား အခြား ပေါင်းစီးဆင်း ကို ပေါင်းစပ်ခြင်း ဖြင့် အကြီးအကျယ် ပေါင်းစီးဆင်း ကို ဖန်တီးနိုင်
span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
span 4 | span 4 | span 4 | |||||||||
span 4 | span 8 | ||||||||||
span 6 | span 6 | ||||||||||
span 12 |
ပေါင်းစီးဆင်း ပေါင်းစီးဆင်း အခြေခံ အတိုင်း အရေးကြီး သည်။ အခြေခံ ပေါင်းစီးဆင်း အား အိမ်တံခါး အကြီးအကျယ် အား စားပွားပေးပြီး လုံးဝ ပြောင်းလဲသွားသည်
ပေါင်းစီးဆင်း ပေါင်းများစွာ ၁၂ ပမာဏ မဟုတ် သားတူပေါင်းများစွာ မပါဘဲ သတ်မှတ်ရန် သင်သာ လိုအပ်သည်
ပေါင်းစီးဆင်း အမျိုးအစား
ဘယ်အိုစ်ပေါ် ၅ ပေါင်းစီးဆင်း၏ ပေါင်းစီးဆင်း အမျိုးအစား ၆ မျိုးရှိသည်:
.col-
(အကွက်အရွယ် အကြီးအကျယ် တစ်ကွက် - အိမ်တံခါး အကြီးအကျယ် ၅၇၆ ပမာဏ ထက် သေးချင်း).col-sm-
(အကွက်အရွယ် အကြီးအကျယ် တစ်ကွက် - အိမ်တံခါး အကြီးအကျယ် ၅၇၆ ပမာဏ တိတ်တဆိတ်ချင်း).col-md-
(အကွက်အရွယ် အကြီးအကျယ် တစ်ကွက် - အိမ်တံခါး အကြီးအကျယ် ၇၆၈ ပမာဏ တိတ်တဆိတ်ချင်း).col-lg-
(အကွက်အရွယ် အကြီးအကျယ် တစ်ကွက် - အိမ်တံခါး အကြီးအကျယ် ၉၉၂ ပမာဏ တိတ်တဆိတ်ချင်း).col-xl-
(အကွက်အရွယ် အကြီးအကျယ် တစ်ကွက် - အိမ်တံခါး အကြီးအကျယ် ၁၂၀၀ပမာဏ တိတ်တဆိတ်ချင်း).col-xxl-
(အကွက်အရွယ် အကြီးအကျယ် တစ်ကွက် - အိမ်တံခါး အကြီးအကျယ် ၁၄၀၀ပမာဏ တိတ်တဆိတ်ချင်း)
အရောက်အရောက် အစီအစဉ်ကို ကူးကြမ်းနိုင်
အကြိမ်းသိမ်းမည်သည့်အရာကို မူကား အနက်အရောက် လျှောက်ချိန်း အား ကူးကြမ်းနိုင် sm
နှင့် md
အတူအတွင်း အနက်အရောက် သတ်မှတ်ရန် သင်သာ လိုအပ်သည် sm
。
ဘယ်အိုစ်ပေါ် ၅ ပေါင်းစီးဆင်း၏ အခြေခံဖော်ပြခြင်း
ဒါက ဘယ်အိုစ်ပေါ် ၅ ပေါင်းစီးဆင်း၏ အခြေခံဖော်ပြခြင်းဖြစ်သည့်:
<!-- အခြား အချက်အလက် --> <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 class="col"></div> <div class="col"></div> <div class="col"></div> </div>
အခြား အချက်အလက်<div class="row">
အခြား အချက်အလက် .col-*-*
အခြား အချက်အလက်
အခြား အချက်အလက် col
အခြား အချက်အလက် "col"
အခြား အချက်အလက် .col-sm|md|lg|xl|xxl
အခြား အချက်အလက်
အခြား အချက်အလက်
အခြား အချက်အလက်
နောက်ဆုံး အချက်အလက် တွင် အသုံးပြုခြင်း အချက်အလက် ပြောကြားပါ
အမှတ်အသား
<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-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> </div>
အခြား အချက်အလက်
နောက်ဆုံး အချက်အလက် တွင် အသုံးပြုခြင်း အချက်အလက် ပြောကြားပါ။ အခြား အချက်အလက် တွင် အသုံးပြုခြင်း အချက်အလက် ပြောကြားပါ
အမှတ်အသား
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>
အကြိမ်းသိမ်းအခြေခံအချက်အလက် နှင့် အခြားအသုံးပြုခြင်း ကို အခြေခံအချက်အလက် အရာရှိ တွင် အသိအမှတ်ပြုပါ ဗိုင်းပြင် အခြား အသုံးပြုခြင်း
- အရှေ့ဆုံး စာရင်း BS5 အကွက်
- နောက်ဆုံး စာရင်း BS5 ဖော်ပြ