W3.CSS ဘားများ
အလျားလိုက် ဘားများ
အလျားလိုက်ဘားများသည် ဘုံဝဘ်ဒီဇိုင်းဒြပ်စင်များဖြစ်သည်-
w3-bar အတန်းအစား ကို အလျားလိုက်ဘားပုံစံပြုလုပ်ရန် အသုံးပြုသည်-
ဥပမာ
<div class="w3-bar w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
w3-bar-item class ၏ရည်ရွယ်ချက်မှာ မှန်ကန်သောအကွာအဝေး၊ padding နှင့် positioning ကိုပေးဆောင်ရန်ဖြစ်သည်။
ဒေါင်လိုက်ဘားများ
ဒေါင်လိုက်ဘားများ (sidebars) သည် ဝဘ်ဒီဇိုင်းတွင်လည်း အသုံးများသည်-
w3-bar-block အတန်းအစား ကို ဒေါင်လိုက်ဘားပုံစံပြုလုပ်ရန် အသုံးပြုသည်-
ဥပမာ
<div class="w3-bar-block w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
ဘားအရောင်များ
ဘားတစ်ခုပုံစံပြုလုပ်ရန် မည်သည့်အရောင်ကိုမဆို အသုံးပြုနိုင်သည်။
ဥပမာ
<div class="w3-bar w3-black">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
အရောင်များကို ရွှေ့ပါ။
ဘားတစ်ခုပုံစံပြုလုပ်ရန် ဟူဗာအရောင်ကို သင်အသုံးပြုနိုင်သည်-
အကျိုးသက်ရောက်မှုကိုကြည့်ရန် ဘားမှအရာများပေါ်တွင် မောက်စ်ကိုနှိပ်ပါ။
ဥပမာ
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">London</div>
<div class="w3-bar-item w3-hover-green">Paris</div>
<div class="w3-bar-item w3-hover-blue">Tokyo</div>
</div>
ဘားလင့်များ
လမ်းကြောင်းပြပေးခြင်းသည် ဘားများအတွက် ပုံမှန်အသုံးပြုမှုတစ်ခုဖြစ်သည်-
ဥပမာ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">London</a>
<a href="#" class="w3-bar-item w3-hover-green">Paris</a>
<a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>
ဘားခလုတ်များ
w3 ခလုတ် အတန်းသည် ဘားတစ်ခုရှိလင့်ခ်များကို ပုံစံသွင်းရန်အတွက် ပြီးပြည့်စုံသည် ။
အကျိုးသက်ရောက်မှုကိုကြည့်ရန် ဘားမှအရာများပေါ်တွင် မောက်စ်ကိုနှိပ်ပါ။
ဥပမာ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button">Tokyo</a>
</div>
တုံ့ပြန်မှုဘား
w3-mobile class သည် bar items များကို တုံ့ပြန်မှုပြုလုပ်ရန်အတွက် အကောင်းဆုံးဖြစ်သည်။
အကျိုးသက်ရောက်မှုမြင်ရန် ဝင်းဒိုးကို အရွယ်အစားပြောင်းပါ။
ဥပမာ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">London</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Tokyo</a>
</div>
ညာဖက်ညှိထားသော ဘားအရာများ
w3-right class သည် bar items များကို right-aligned ပြုလုပ်ရန်အတွက် ပြီးပြည့်စုံသည် -
ဥပမာ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>
</div>