Bootstrap 5 အက်တင်

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>

ကိုယ်တိုင် ကြိုးစားကြပါ