W3.CSS စာရင်းများ
အခြေခံစာရင်း
w3-ul အတန်းအစား ကို အခြေခံစာရင်းတစ်ခုပြသရန် အသုံးပြုသည်-
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
နယ်နိမိတ်စာရင်း
w3-border အတန်းသည် စာရင်းပတ်ပတ်လည်တွင် ဘောင်တစ်ခုကို ပေါင်းထည့်သည် -
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
စာရင်း ခေါင်းစီး
စာရင်းအကြောင်းအရာအတွင်း ခေါင်းစီးဒြပ်စင်ကို ထည့်သွင်းနည်း ဥပမာ-
အမည်များ
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
ကတ်တစ်ခုအဖြစ် စာရင်းသွင်းပါ။
w3-card- နံပါတ် အတန်း များကို ကတ်တစ်ခုအဖြစ် စာရင်းတစ်ခုပြသရန် အသုံးပြုနိုင်သည်။
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
ဗဟိုစာရင်း
w3-center class ကို စာရင်းတစ်ခုတွင် စာရင်းအရာများကို ဗဟိုပြုရန် အသုံးပြုနိုင်သည်။
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
ရောင်စုံစာရင်း
စာရင်း သို့အရောင်တစ်ခုထည့်ရန် w3- အရောင် အတန်းများကိုသုံးနိုင်သည်။
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
ရောင်စုံစာရင်း အကြောင်းအရာ
စာရင်း အကြောင်းအရာသို့ အရောင်တစ်ခုထည့်ရန် w3- အရောင် အတန်းများကို သုံးနိုင်သည်-
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Hoverable List
w3-hoverable class သည် mouse-over ရှိ စာရင်းအရာတစ်ခုစီသို့ မီးခိုးရောင်နောက်ခံအရောင်ကို ပေါင်းထည့်သည်-
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
သတ်မှတ်ထားသော မောက်စ်အရောင်ကို လိုချင်ပါက၊ w3-hover- အရောင် အတန်းများကို <li> element တစ်ခုစီသို့ ထည့်ပါ-
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul">
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>
ပိတ်နိုင်သောစာရင်း အကြောင်းအရာ
စာရင်းတစ်ခုအား ပိတ်/ဝှက်ရန် "x" ကို နှိပ်ပါ။
- ဂျေးလ်
- အာဒံ
- ဧဝ
ဥပမာ
<li class="w3-display-container">Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
အကြံပြုချက်- HTML × entity သည် အပိတ်ခလုတ်များ (အက္ခရာ "X" ထက်) နှစ်သက်ရာ အိုင်ကွန်ဖြစ်သည်။
Padding နှင့်အတူစာရင်း
w3-padding အတန်းများကို အကြောင်းအရာများ စာရင်းတွင် padding ထည့်ရန် အသုံးပြုနိုင်သည်။
- ဂျေးလ်
- ဧဝ
- အာဒံ
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul">
<li class="w3-padding-small">Jill</li>
<li
class="w3-padding-small">Eve</li>
<li class="w3-padding-small">Adam</li>
</ul>
ကိုယ်ပွားစာရင်း
ဥပမာ
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">×</span>
<img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
<div class="w3-bar-item">
<span
class="w3-large">Mike</span><br>
<span>Web
Designer</span>
</div>
</li>
အကြံပြုချက်- ကျွန်ုပ်တို့၏ W3.CSS Bars နှင့် W3.CSS Navigation အခန်း များတွင် w3-bar အတန်းများအကြောင်း ပိုမိုလေ့လာနိုင်ပါမည် ။
စာရင်းအကျယ်
စာရင်းများတွင် ပုံမှန်အားဖြင့် 100% အကျယ်ရှိသည်။ ၎င်းကိုပြောင်းလဲရန် width ကိုအသုံးပြုပါ။
ဥပမာ
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
30% အကျယ်-
- ဂျေးလ်
- အာဒံ
50% အကျယ်-
- ဂျေးလ်
- အာဒံ
80% အကျယ်
- ဂျေးလ်
- အာဒံ
စာရင်းသေးသေးလေး
သေးငယ်သောစာရင်းကိုပြသရန် w3-သေးငယ်သော အတန်း ကိုသုံး ပါ-
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
အသေးစားစာရင်း
သေးငယ်သောစာရင်းကိုပြသရန် w3-small class ကိုသုံး ပါ-
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
စာရင်းကြီး
ကြီးမားသောစာရင်းကိုပြသရန် w3-large class ကိုသုံး ပါ-
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XLarge စာရင်း
ပိုကြီးသောစာရင်းကိုပြသရန် w3-xlarge အတန်း ကိုသုံး ပါ-
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXL စာရင်း
XXLarge စာရင်းကိုပြသရန် w3-xxlarge အတန်းကို သုံး ပါ-
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXX စာရင်းကြီး
XXX ကြီးသောစာရင်းကိုပြသရန် w3-xxxlarge အတန်းကို သုံး ပါ-
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Jumbo စာရင်း
အလွန်ကြီးမားသော "jumbo" စာရင်းကိုပြသရန် w3-jumbo အတန်းကို သုံး ပါ-
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>