Bootstrap 4 ကွန်တိန်နာများ
ကွန်တိန်နာများ
ဆိုက်အကြောင်းအရာများကို ခြုံငုံရန် Bootstrap ပါဝင်သော အစိတ်အပိုင်းတစ်ခု လိုအပ်ကြောင်း ယခင်အခန်းမှ သင်သင်ယူခဲ့သည်။
ကွန်တိန်နာများကို ၎င်းတို့အတွင်းပိုင်းရှိ အကြောင်းအရာများကို ကွက်လပ်ပြုလုပ်ရန်အတွက် အသုံးပြုကြပြီး ကွန်တိန်နာအတန်းအစား နှစ်မျိုးရှိပါသည်။
.containerအတန်းသည် တုံ့ပြန်မှု ပုံသေပုံသေ အကျယ်ကွန်တိန်နာ ကို ပံ့ပိုးပေးသည် ။.container-fluidအတန်းသည် မြင်ကွင်းပို့တ်၏ အကျယ်တစ်ခုလုံးကို လွှမ်းခြုံထားသည့် အကျယ်အဝန်းကို အပြည့်ထည့် ထားသည် ။
ပုံသေကွန်တိန်နာ
.containerတုံ့ပြန်မှုရှိသော၊ ပုံသေအကျယ်ပုံသေကွန်တိန်နာကို ဖန်တီးရန် အတန်းကို အသုံးပြု ပါ။
max-width၎င်း၏ width ( ) သည် မတူညီသော စခရင်အရွယ်အစားပေါ်တွင် ပြောင်းလဲသွားမည်ကို သတိပြုပါ -
|
အပိုသေးငယ်သော <576px |
အသေးစား ≥576px |
အလယ်အလတ် ≥768px |
ကြီးမားသော ≥992px |
ပိုကြီးသော ≥1200px |
|
|---|---|---|---|---|---|
| အများဆုံးအကျယ် | 100% | 540px | 720px | 960px | 1140px |
အောက်ဖော်ပြပါ ဥပမာကိုဖွင့်ပြီး ကွန်တိန်နာအကျယ်သည် မတူညီသော breakpoints များတွင် ပြောင်းလဲသွားမည်ကို သိမြင်ရန် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းပါ။
ဥပမာ
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
အရည်ကွန်တိန်နာ
.container-fluidစခရင်၏ အကျယ်အဝန်း တစ်ခုလုံးကို အမြဲတမ်း ချဲ့ထွင်မည့် အကျယ်အဝန်း အပြည့်အစုံကို ဖန်တီးရန် အတန်းကို အသုံးပြု ပါ ( widthအမြဲတမ်း 100%):
ဥပမာ
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
ကွန်တိန်နာ Padding
ပုံမှန်အားဖြင့်၊ ကွန်တိန်နာများတွင် ထိပ် သို့မဟုတ် အောက်ခြေ အကွက်မပါသော ဘယ်ညာ 15px ပါရှိသည်။ ထို့ကြောင့်၊ ၎င်းတို့ကို ပိုကြည့်ကောင်းစေရန် အပို padding နှင့် margin များကဲ့သို့သော spacing utilities များကို ကျွန်ုပ်တို့ အသုံးပြုလေ့ရှိပါသည်။ ဥပမာအားဖြင့် .pt-3"16px ၏ အပေါ်ဆုံးအကွက်ကို ထည့်ပါ" ကို ဆိုလိုသည်-
ဥပမာ
<div class="container pt-3"></div>
ကျွန်ုပ်တို့၏ BS4 Utilities အခန်း တွင် အကွာအဝေး အသုံးအဆောင်များအကြောင်း သင်ပိုမိုလေ့လာနိုင်ပါသည် ။
ကွန်တိန်နာဘောင်နှင့် အရောင်
ဘောင်များနှင့် အရောင်များကဲ့သို့ အခြားသော အသုံးအဆောင်များကို ကွန်တိန်နာများနှင့်အတူ မကြာခဏ အသုံးပြုကြသည်-
ဥပမာ
ကျွန်ုပ်၏ ပထမဆုံး Bootstrap စာမျက်နှာ
ဤကွန်တိန်နာတွင် ဘောင်တစ်ခုရှိပြီး အပိုအကွက်များနှင့် အနားသတ်အချို့ရှိသည်။
ကျွန်ုပ်၏ ပထမဆုံး Bootstrap စာမျက်နှာ
ဤကွန်တိန်နာတွင် အနက်ရောင်နောက်ခံအရောင်နှင့် အဖြူရောင်စာသားတစ်ခု၊ အပိုအကွက်များနှင့် အနားသတ်အချို့ရှိသည်။
ကျွန်ုပ်၏ ပထမဆုံး Bootstrap စာမျက်နှာ
ဤကွန်တိန်နာတွင် အပြာရောင်နောက်ခံအရောင်နှင့် အဖြူရောင်စာသားတစ်ခု၊ အပိုအကွက်များနှင့် အနားသတ်အချို့ရှိသည်။
<div class="container p-3 my-3 border"></div>
<div class="container
p-3 my-3 bg-dark
text-white"></div>
<div class="container p-3 my-3 bg-primary
text-white"></div>
ကျွန်ုပ်တို့၏ BS4 အရောင်များအခန်း နှင့် BS4 အသုံးအဆောင်များအခန်း တွင် အရောင်များနှင့် နယ်နိမိတ်အသုံးအဆောင်များအကြောင်း သင်ပိုမိုလေ့လာနိုင်ပါသည် ။
တုံ့ပြန်မှုကွန်တိန်နာများ
.container-sm|md|lg|xlတုံ့ပြန်မှုရှိသော ကွန်တိန်နာများကို ဖန်တီးရန် အတန်း များကို သင်အသုံးပြုနိုင်သည် ။
ကွန်တိန်နာ ၏ max-widthမတူညီသော မျက်နှာပြင်အရွယ်အစား/မြင်ကွင်းပို့တ်များတွင် ပြောင်းလဲသွားလိမ့်မည်-
| အတန်း |
အပိုသေးငယ်သော <576px |
အသေးစား ≥576px |
အလယ်အလတ် ≥768px |
ကြီးမားသော ≥992px |
ပိုကြီးသော ≥1200px |
|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
ဥပမာ
<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>
မင်းသိလား?
W3.CSS သည် Bootstrap 4 အတွက် အကောင်းဆုံးရွေးချယ်မှုတစ်ခုဖြစ်သည်။
W3.CSS သည် သေးငယ်သည်၊ ပိုမြန်ပြီး အသုံးပြုရလွယ်ကူသည်။
W3.CSS ကို လေ့လာလိုပါက ကျွန်ုပ်တို့၏ W3.CSS Tutorial သို့ သွားပါ ။