W3.CSS Layout
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
W3.CSS Layout အတန်းများ
W3.CSS ဗားရှင်း 2.90 / 2.91 သည် "ကော်လံကဲ့သို့" အပြင်အဆင်အတွက် အောက်ပါအတန်းများကို မိတ်ဆက်ပေးခဲ့သည်-
အတန်း | ဖော်ပြချက် |
---|---|
w3-ဆဲလ်-အတန်း | ဆဲလ်များ (ကော်လံများ) အတွက် ကွန်တိန်နာ။ |
w3-ဆဲလ် | အပြင်အဆင် ဆဲလ် (ကော်လံ)။ |
w3-ဆဲလ်-ထိပ် | ဆဲလ်တစ်ခု (ကော်လံ) ၏ထိပ်တွင် အကြောင်းအရာကို ညှိပေးသည်။ |
w3-ဆဲလ်-အလယ် | ဆဲလ်တစ်ခု၏ ဒေါင်လိုက်အလယ်တွင် အကြောင်းအရာကို ညှိပေးသည် (ကော်လံ)။ |
w3-ဆဲလ်-အောက်ခြေ | ဆဲလ်တစ်ခု (ကော်လံ) ၏အောက်ခြေရှိ အကြောင်းအရာကို ညှိပေးသည်။ |
w3-မိုဘိုင်း | ဆဲလ် (ကော်လံ) သို့ မိုဘိုင်း-ပထမ တုံ့ပြန်မှုကို ပေါင်းထည့်သည်။ မိုဘိုင်းလ်စက်ပစ္စည်းများတွင် ပိတ်ဆို့ထားသော အစိတ်အပိုင်းများအဖြစ် အစိတ်အပိုင်းများကို ပြသပါ။ |
အပြင်အဆင်အတန်းများသည် ကန့်ကွက်ထားသော အပြင်အဆင်အတန်းများကို အစားထိုးသည်။
Layout classer အသစ်သည် ပိုမိုစွယ်စုံရနှင့် အသုံးပြုရပိုမိုလွယ်ကူသည်။
ကန့်ကွက်ထားသော အပြင်အဆင်အတန်းများကို ဤစာမျက်နှာ၏အောက်ခြေတွင် ဖော်ပြထားပါသည်။
HTML Block Elements များ
မူလအားဖြင့်၊ HTML ဘလောက်ဒြပ်စင်များ ( <div> ဒြပ်စင်များကဲ့သို့) သည် ဒေါင်လိုက်တုံးများအဖြစ် ပြသသည်-
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
ဥပမာ
<div class="w3-container w3-red">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
အပြင်အဆင် ဆဲလ်များ
w3-cell အတန်းအစား သည် အလျားလိုက်ဖော်ပြရန် ပိတ်ဆို့ထားသောဒြပ်စင်များကို ပြန်လည်သတ်မှတ်သည် (ဇယားဆဲလ်များကဲ့သို့)။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
ဥပမာ
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
Layout ကွန်တိန်နာ
w3- ဆဲလ်-အတန်း သည် ဆဲလ်များ (ကော်လံများ) အတွက် ကွန်တိန်နာတစ်ခုဖြစ်သည်။
w3-cell-row container ၏ အကျယ်သည် ပါရှိသောဆဲလ်အားလုံး၏ စုစုပေါင်း width ကို သတ်မှတ်သည်။
မူရင်းအကျယ်သည် 100% ဖြစ်သည်-
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
ဥပမာ
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
ဆဲလ်ကွန်တိန်နာ၏ အကျယ်ကို သင်ပြောင်းလဲပါက၊ ၎င်းသည် ပါရှိသောဆဲလ်များ၏ စုစုပေါင်းအကျယ်ကို လျှော့ချလိမ့်မည်-
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
ဥပမာ
<div class="w3-cell-row"
style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Layout Cell များသည် Self Adjusting ဖြစ်သည်။
w3-cell အတန်း သည် အလွန်ကောင်းမွန်သော built-in ကိုယ်တိုင်ချိန်ညှိမှုစံနှုန်းတစ်ခုရှိသည်။ ဘေးချင်းကပ်ဒြပ်စင်များသည် လိုအပ်သော အကျယ်သို့ အလိုအလျောက် ချိန်ညှိပါမည်-
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။ မင်္ဂလာပါ W3.CSS Layout။
ဥပမာ
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
အပြင်အဆင်ဆဲလ်များသည် တူညီသောအမြင့်သို့ ချိန်ညှိသည်။
ဘေးချင်းကပ်လျက် w3-ဆဲလ် ဒြပ်စင်များသည်လည်း တူညီသောအမြင့်သို့ အလိုအလျောက် ချိန်ညှိပေးလိမ့်မည်-
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
ဥပမာ
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
တုံ့ပြန်မှုပုံစံ
w3-mobile class သည် မည်သည့် HTML ဒြပ်စင်သို့မဆို မိုဘိုင်းလ် ၏ ပထမဆုံးတုံ့ပြန်မှုကို ပေါင်းထည့်သည်။
w3-cell နှင့် တွဲသုံးပါက ၎င်းသည် သေးငယ်သော စခရင်/မိုဘိုင်းဖုန်းများပေါ်တွင် ဒေါင်လိုက် အကွက်များကို ဒေါင်လိုက်နှင့် အလတ်စား/ကြီးမားသော စခရင်များတွင် အလျားလိုက် ပြသပေးမည်ဖြစ်သည်။
အလတ်စားနှင့် ကြီးမားသော စခရင်များတွင်-
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
သေးငယ်သော စခရင်များတွင်
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
ဥပမာ
<div class="w3-container w3-red
w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div
class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello
W3.CSS Layout.</p>
</div>
အလွယ်တကူ ချိန်ညှိခြင်း။
w3-cell အတန်း သည် စာသားကို ချိန်ညှိရန် အလွန်လွယ်ကူစေသည်။
မတူညီသော ချိန်ညှိမှု အတန်း ၃ မျိုး ရှိသည်။
- w3-ဆဲလ်-ထိပ် (မူလ)
- w3-ဆဲလ်-အလယ်
- w3-ဆဲလ်-အောက်ခြေ
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
ဥပမာ
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
w3- ဆဲလ်-အတန်း အတန်းသည် စာမျက်နှာအကျယ်နှင့် ကိုက်ညီစေရန် အစိတ်အပိုင်းများကို ဆန့်သည်-
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
မင်္ဂလာပါ W3.CSS Layout။
ဥပမာ
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
W3.CSS Table Layout အတန်းများကို ကန့်ကွက်ထားသည်။
w3-အပြင်အဆင်-ကွန်တိန်နာ | ၎င်းအစား w3-cell-row ကိုသုံးပါ။ |
w3-layout-row | |
w3-အပြင်အဆင်-ဆဲလ် | ၎င်းအစား w3-cell ကိုသုံးပါ။ |
w3-အပြင်အဆင်-အပေါ်ဆုံး | ၎င်းအစား w3-cell-top ကိုသုံးပါ။ |
w3-အပြင်အဆင်-အလယ် | ၎င်းအစား w3-cell-middle ကိုသုံးပါ။ |
w3-layout-အောက်ခြေ | ၎င်းအစား w3-cell-bottom ကိုသုံးပါ။ |
w3-layout-col | ယင်းအစား w3-mobile ကိုသုံးပါ။ |
ကန့်ကွက်ထားသောအတန်းများကို ဗားရှင်း 4.0 တွင် W3.CSS မှ ဖယ်ရှားပါမည်။