Bootstrap 5 အက်တင်
- အရှေ့စား BS5 စတင်
- နောက်ပိုင်းစား BS5 ဗဟိုအခြေခံ
Bootstrap 5 အက်တင်
အရပ်ကြားသောအချိန်တွင် သင့် အောက်ဆုံးအချိန်တွင် လေ့လာခဲ့သည်
ကျွန်ုပ် အပေါ်ပိုင်း တွင် အသုံးပြုသည် နှင့် အပေါ်ပိုင်း အကွက် အသုံးချက် ရှစ်ခုခု အရှိသည်
.container
class သည် အကျယ်အဝန်း ရှိသော အပေါ်ပိုင်း ကို ဖွင့်ပေးသည်.container-fluid
class သည် အကျယ်အဝန်း ရှိသော အပေါ်ပိုင်း ကို ဖွင့်ပေးသည်
အကျယ်အဝန်း အပေါ်ပိုင်း
အသုံးပြု .container
class ကို အကျယ်အဝန်း ရှိသော အပေါ်ပိုင်း ကို ဖွင့်ပေးသည်
ပြုပြင်နေသည်max-width
)သည် အကျယ်အဝန်း အချိန်အတိုင်း အချိန်အတိုင်း ပြောင်းလဲကြည်း
အကြမ်းခြုံ <576px |
အကြမ်းခြုံ ≥576px |
အရွယ်အစား ≥768px |
အကြီး ≥992px |
Extra Large ≥1200px |
XXL ≥1400px |
|
---|---|---|---|---|---|---|
max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
အောက်ဆုံး အမှတ်အသား ကို ဖွင့်ပေး၍ ဘတ်သျား အကျယ်အဝန်း အစား အပေါ်ပိုင်း အကျယ်အဝန်း အချိန်အတိုင်း ပြောင်းလဲကြည်း။
အကျိုးသတ္တု
<div class="container"> <h1>ကျွန်ုပ်၏ ပထမဆုံး Bootstrap စားပေးအချက်</h1> <p>အချက်အလက်တခုခုကို</p> </div>
XXL အချိန်ဆုံး အချိန်အတိုင်း (≥1400px) သည် Bootstrap 5 တွင် ထပ်မံ ထပ်ထည့်ခဲ့သည်၊ သို့သော် Bootstrap 4 တွင် အချိန်ဆုံး အချိန်အတိုင်း အချိုးအစား အချိုးအစား အချိုးအစား အချိုးအစား အချိုးအစား ဖြစ်သည် (≥1200px)။
အရောင်ချိုး အပေါ်ပိုင်း
အသုံးပြု .container-fluid
အကွက် အသုံးချက် ကို အကျယ်အဝန်း ရှိသော အပေါ်ပိုင်း ကို ဖွင့်ပေးသည်။ အပေါ်width
အပေါ် 100%
):
အကျိုးသတ္တု
<div class="container-fluid"> <h1>ကျွန်ုပ်၏ ပထမဆုံး Bootstrap စားပေးအချက်</h1> <p>အချက်အလက်တခုခုကို</p> </div>
အပေါ်ပိုင်း အကျယ်အဝန်း
မိတ်ဆက်သည် အပေါ်ပိုင်း အကျယ်အဝန်း သည် အရွယ်အစား အချို့တွင် မရှိ၍ အရှေ့နှင့် အတော်ကို ပြည့်စုံစေရန် အသုံးပြုသည်။ အခြား အကျယ်အဝန်း အသုံးချက်(အသုံးချက်များ),ပုံစံအရ အပေါ်ပိုင်း အရွယ်အစား နှင့် အကျယ်အဝန်း ပြည့်စုံစေရန် အသုံးပြုသည်။ ဥပမာ.pt-5
ပြောဆိုသည်အပေါ်ပိုင်းဖော်ထုတ်:
အကျိုးသတ္တု
<div class="container pt-5"></div>
အကွက် အခြောက်အခြား နှင့် အရောင်
အခြား အက္ခရာပြည့် အကွက် အတွက် ပြုလုပ်သော လုပ်ငန်း လည်း အသုံးပြုသည်:
အကျိုးသတ္တု
<div class="container p-5 my-5 border"></div> <div class="container p-5 my-5 bg-dark text-white"></div> <div class="container p-5 my-5 bg-primary text-white"></div>
အရောင် နှင့် အကြိတ် အက္ခရာပြည့် အကြောင်း အသစ်များ ကို အထူးသဖြင့် လေ့လာမိပါ
ထိုအခြေခံ အကွက်
အသင် ကျွန်ုပ် အသုံးပြုနိုင်သော .container-sm|md|lg|xl
အမျိုးအစား ကို သို့မဟုတ် အချိန် ကို တိကျစွာ အသိအမှတ်ပြုပါ
အကွက် max-width
မျက်နှာပြင် အရွယ်/အကြောင်းဝန်း အမျိုးမျိုး တွင် ပြောင်းလဲလိမ့်မည့်
အမျိုး | အကြမ်းခြုံ <576px |
အကြမ်းခြုံ ≥576px |
အရွယ်အစား ≥768px |
အကြီး ≥992px |
အကြီးအကျယ် ≥1200px |
XXL ≥1400px |
---|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
အကျိုးသတ္တု
<div class="container-sm">.container-sm</div> <div class="container-md">.container-md</div> <div class="container-lg">.container-lg</div> <div class="container-xl">.container-xl</div> <div class="container-xxl">.container-xxl</div>
- အရှေ့စား BS5 စတင်
- နောက်ပိုင်းစား BS5 ဗဟိုအခြေခံ