W3.CSS အကိုးအကား
W3.CSS အတန်းများ
ကွန်တိန်နာသင်တန်းများ
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3-ကွန်တိန်နာ | 16px ဘယ်ညာ အကွက်ပါရှိသော HTML ကွန်တိန်နာ | |
| ခေါင်းစီးအဖြစ်သုံးသည်။ | ||
| အောက်ခြေမှတ်စုအဖြစ် အသုံးပြုသည်။ | ||
| w3-အကန့် | 16px ဘယ်ညာ ကွက်လပ်နှင့် 16px အပေါ်နှင့်အောက်ခြေအနားသတ်ပါရှိသော HTML ကွန်တိန်နာ | |
| မှတ်စုတစ်ခုပြသရန်အသုံးပြုသည်။ | ||
| ကိုးကားဖော်ပြရန်အသုံးပြုသည်။ | ||
| w3-တံဆိပ် | မြို့ပတ်ရထားတံဆိပ် | |
| w3 ရက် | ထောင့်မှန်စတုဂံ | |
| w3-ul | အစီအစဥ်မရှိသောစာရင်း | |
| w3-display-container | w3-display- classes အတွက် ကွန်တိန်နာ (ကွန်တိန်နာအတွင်း ဒြပ်စင်များ နေရာချထားမှုကို ဖွင့်ပေးသည်) | |
| w3-block | မည်သည့်ဒြပ်စင်အတွက်မဆို အကျယ်ကို သတ်မှတ်ရန် အသုံးပြုနိုင်သည့် အတန်း | |
| w3-ကုဒ် | ကုဒ်ကွန်တိန်နာ | |
| w3-codespan | အတွင်းကုဒ်ကွန်တိန်နာ (ကုဒ်အတိုအထွာများအတွက်) | |
| w3-အကြောင်းအရာ | ပုံသေအရွယ်အစားကို ဗဟိုပြုထားသော အကြောင်းအရာအတွက် ကွန်တိန်နာ | |
| w3 ကား | တုံ့ပြန်မှုအရွယ်အစားကို ဗဟိုပြုသည့် အကြောင်းအရာအတွက် ကွန်တိန်နာ | |
| w3 - အတ္ထိ | ညာဘက်နှင့်ဘယ်ဘက်အနားသတ်များကိုဖယ်ရှားသည့်အတန်း (အထူးသဖြင့် padded အတန်းများဆန့်ခြင်းအတွက်အသုံးဝင်သည် (w3-row-padding)) |
စားပွဲတင်သင်တန်းများ
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3-စားပွဲ | HTML ဇယားတစ်ခုအတွက် ကွန်တိန်နာ | |
| w3 အစင်း | အစင်း စားပွဲ | |
| w3-နယ်စပ် | နယ်နိမိတ် ဇယား | |
| w3-နယ်စပ် | နယ်နိမိတ်မျဉ်းများ | |
| w3 ကို ဗဟိုပြုသည်။ | ဗဟိုပြုစားပွဲ | |
| w3-hoverable | ပျံဝဲနိုင်သော စားပွဲ | |
| w3-စားပွဲ-အားလုံး | ပိုင်ဆိုင်မှုအားလုံးကို သတ်မှတ်ထားသည်။ | |
| w3-အစင်း၊ w3-နယ်စပ်၊ နှင့် w3-နယ်စပ် | ||
| ရောင်စုံခေါင်းနှင့် | ||
| w3-responsive ဖြင့် | ||
| w3-သေးသေးလေးနဲ့ | ||
| w3-အသေးစားနှင့် | ||
| w3-ကြီးဖြင့် | ||
| w3-xlarge ဖြင့် | ||
| w3-xxlarge ဖြင့် | ||
| w3-xxxlarge ဖြင့် | ||
| အရောင်နဲ့ | ||
| w3-jumbo ဖြင့် | ||
| w3-တုံ့ပြန်မှု | တုံ့ပြန်မှုဇယားကို ဖန်တီးပါ။ |
ကတ်သင်တန်းများ
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3-ကတ် | w3-card-2 နှင့်တူသည်။ | |
| w3-ကတ်-၂ | HTML အကြောင်းအရာအတွက် ကွန်တိန်နာ (2px ဘောင်ခတ်ထားသော အရိပ်) | |
| w3-ကတ်-၄ | HTML အကြောင်းအရာအတွက် ကွန်တိန်နာ (4px ဘောင်ခတ်ထားသော အရိပ်) |
တုံ့ပြန်မှုသင်တန်းများ
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3 အတန်း | အရည်တုံ့ပြန်မှုရှိသော အကြောင်းအရာတစ်ခုအတွက် ကွန်တိန်နာ | |
| w3-row-padding | ကော်လံအားလုံးတွင် ပုံသေအကွက်ပါသည့် အတန်း | |
| w3 ကား | တုံ့ပြန်မှုအရွယ်အစားကို ဗဟိုပြုသည့် အကြောင်းအရာအတွက် ကွန်တိန်နာ | |
| w3 - အတ္ထိ | ညာဘက်နှင့် ဘယ်ဘက်အနားသတ်များကို ဖယ်ရှားသည့်အတန်း | |
| w3-တစ်ဝက် | တစ်ဝက် (၁/၂) မျက်နှာပြင်ကော်လံ ကွန်တိန်နာ | |
| w3 တတိယ | တတိယ (1/3) မျက်နှာပြင်ကော်လံ ကွန်တိန်နာ | |
| w3-နှစ်ပုံ | တတိယ (၂/၃) မျက်နှာပြင်ကော်လံ ကွန်တိန်နာနှစ်ခု | |
| w3 ရပ်ကွက် | လေးပုံ (၁/၄) မျက်နှာပြင်ကော်လံ ကွန်တိန်နာ | |
| w3 သုံးပုံတစ်ပုံ | လေးပုံသုံးပုံ (၃/၄) မျက်နှာပြင်ကော်လံ ကွန်တိန်နာ | |
| w3-col | HTML အကြောင်းအရာတိုင်းအတွက် ကော်လံကွန်တိန်နာ | |
| w3- အနားယူပါ။ | ကျန်ကော်လံအကျယ်ကို ယူထားသည်။ | |
| l1 - l12 | ကြီးမားသော ဖန်သားပြင်များအတွက် တုံ့ပြန်နိုင်သော အရွယ်အစားများ | |
| m1 - m12 | အလတ်စား မျက်နှာပြင်များအတွက် တုံ့ပြန်နိုင်သော အရွယ်အစားများ | |
| s1 - s12 | သေးငယ်သော စခရင်များအတွက် တုံ့ပြန်နိုင်သော အရွယ်အစားများ | |
| w3-ဝှက်-သေးငယ် | မျက်နှာပြင်ငယ်များ (601px အောက်) တွင် အကြောင်းအရာကို ဝှက်ထားရန် | |
| w3-hide-လတ် | အလယ်အလတ်စခရင်များတွင် အကြောင်းအရာကို ဝှက်ထားပါ။ | |
| w3-hide-large | မျက်နှာပြင်ကြီးများတွင် အကြောင်းအရာကို ဝှက်ထားရန် (992px ထက်ကြီးသည်) | |
| w3-ပုံ | တုံ့ပြန်မှုပုံရိပ် | |
| w3-မိုဘိုင်း | မည်သည့်ဒြပ်စင်သို့မဆို မိုဘိုင်း-ပထမ တုံ့ပြန်မှုကို ထည့်ပေးသည်။ မိုဘိုင်းလ်စက်ပစ္စည်းများတွင် ပိတ်ဆို့ထားသော အစိတ်အပိုင်းများအဖြစ် အစိတ်အပိုင်းများကို ပြသပါ။ |
Layout သင်တန်းများ
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3-ဆဲလ်-အတန်း | အပြင်အဆင်ကော်လံများ (ဆဲလ်များ) အတွက် ကွန်တိန်နာ။ | |
| w3-ဆဲလ် | အပြင်အဆင် ကော်လံ (ဆဲလ်)။ | |
| w3-ဆဲလ်-ထိပ် | အကြောင်းအရာကို ကော်လံ (ဆဲလ်) ၏ ထိပ်တွင် ညှိပေးသည်။ | |
| w3-ဆဲလ်-အလယ် | အကြောင်းအရာကို ကော်လံ (ဆဲလ်) ၏ ဒေါင်လိုက်အလယ်တွင် ညှိပေးသည်။ | |
| w3-ဆဲလ်-အောက်ခြေ | ကော်လံ (ဆဲလ်) ၏အောက်ခြေရှိ အကြောင်းအရာကို ညှိပေးသည်။ |
ဘားသင်တန်းများ - လမ်းညွှန်
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3-ဘား | အလျားလိုက်ဘား | |
| w3-bar-block | ဒေါင်လိုက်ဘား | |
| w3-bar- item | ဘားအရာများအတွက် ဘုံစတိုင်ကို ပေးသည်။ | |
| w3-ဘေးဘား | ဘေးဘား | |
| ဘေးဘားတစ်ခုတွင် အကြောင်းအရာအမျိုးအစားအားလုံး ပါဝင်နိုင်သည်။ | ||
| ပင်မအကြောင်းအရာကို ထပ်တင်သည့် ဘေးဘားတစ်ခု | ||
| ပင်မအကြောင်းအရာအားလုံးကို ထပ်တင်ထားသည့် ဘေးဘားတစ်ခု | ||
| ပင်မအကြောင်းအရာကို ညာဘက်သို့ပြောင်းသည့် ဘေးဘားတစ်ခု | ||
| ထပ်ဆင့်နောက်ခံပါရှိသော ဘေးဘားတစ်ခု | ||
| ညာဘက်ခြမ်းရှိ Side bar တစ်ခု | ||
| w3- ပြိုကျသည်။ | အပြည့်အဝ အလိုအလျောက်တုံ့ပြန်မှု ဘေးထွက်လမ်းညွှန်မှု ဖန်တီးရန် w3-sidebar နှင့် တွဲသုံးထားသည်။ ဤအတန်းကို လုပ်ဆောင်ရန်အတွက်၊ စာမျက်နှာအကြောင်းအရာသည် "w3-main" အတန်းအတွင်း ဖြစ်ရပါမည်။ | |
| w3-အဓိက | တုံ့ပြန်မှုဘေးထွက်လမ်းညွှန်ချက်များအတွက် w3-ခေါက်သိမ်းသည့်အတန်းကို အသုံးပြုသောအခါ စာမျက်နှာအကြောင်းအရာအတွက် ကွန်တိန်နာ | |
| အပြည့်အဝ အလိုအလျောက် ညာခြမ်း တုံ့ပြန်မှု ဘေးဘက် လမ်းညွှန်ချက် |
ဆွဲချအတန်းများ
| w3-dropdown-ကလစ်နှိပ်ပါ။ | နှိပ်နိုင်သော dropdown element | |
| w3-dropdown-hover | ရွေ့လျားနိုင်သော ဆွဲချဒြပ်စင် | |
| ရွေ့လျားနိုင်သော dropdown element (w3-bar တွင်သုံးသည်) | ||
| ရွေ့လျားနိုင်သော dropdown element (w3-bar-block တွင်သုံးသည်) | ||
| ရွေ့လျားနိုင်သော dropdown element (w3-sidebar တွင်သုံးသည်) |
ခလုတ်အတန်းများ
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3-ခလုတ် | မီးခိုးရောင်နောက်ခံအရောင်ပါသည့် စတုဂံခလုတ် | |
| w3-btn | အပေါ်ကို အရိပ်များပါရှိသော စတုဂံခလုတ် | |
| w3-စက်ဝိုင်း | စက်ဝိုင်းခလုတ်ဖန်တီးရန် အသုံးပြုနိုင်သည်။ | |
| w3-လှိုင်းပုတ်သည်။ | လှိုင်းအကျိုးသက်ရောက်မှုရှိသော စတုဂံခလုတ် | |
| လှိုင်းအကျိုးသက်ရောက်မှုနှင့်အတူ စက်ဝိုင်းရေပေါ်ခလုတ် | ||
| w3-ဘား | အလျားလိုက်ဘားတစ်ခုတွင် ဒြပ်စင်များ (ခလုတ်များကဲ့သို့) အုပ်စုဖွဲ့ရန် အသုံးပြုနိုင်သည်။ | |
| w3-block | full width w3-button ကို သတ်မှတ်ရန် အသုံးပြုနိုင်သည့် အတန်း | |
| အကျယ်အပြည့်အစုံ w3-btn | ||
| အကျယ် အပြည့် စက်ဝိုင်းခလုတ် |
ထည့်သွင်းအတန်းများ
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3-ထည့်သွင်းခြင်း။ | ထည့်သွင်းရန်အချက်များ | |
| ကတ်တစ်ခုအနေဖြင့် ထည့်သွင်းပုံစံ | ||
| ထည့်သွင်းသည့် အစိတ်အပိုင်းများ (ထိပ်တန်း အညွှန်းများ) | ||
| ထည့်သွင်းသည့် အစိတ်အပိုင်းများ (အောက်ခြေ အညွှန်းများ) | ||
| w3-စစ်ဆေးပါ။ | ထည့်သွင်းမှုအမျိုးအစားကို အမှတ်ခြစ်ပါ။ | |
| w3 ရေဒီယို | ရေဒီယို ထည့်သွင်းမှု အမျိုးအစား | |
| w3 ကို ရွေးပါ။ | ထည့်သွင်းရန် အစိတ်အပိုင်းကို ရွေးချယ်ပါ။ | |
| w3-animate-ထည့်သွင်းခြင်း။ | ထည့်သွင်းမှုတစ်ခု၏ အကျယ်ကို 100% သို့ သက်ဝင်လှုပ်ရှားစေသည် |
Modal အတန်းများ
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3-modal | Modal ကွန်တိန်နာ | |
| w3-modal-အကြောင်းအရာ | Modal pop-up အစိတ်အပိုင်း | |
| w3- tooltip | Tooltip ဒြပ်စင် | |
| w3-စာသား | Tooltip စာသား |
Animation သင်တန်းများ
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3-animate-ထိပ်တန်း | ထိပ်-300px မှ 0px သို့ အစိတ်အပိုင်းတစ်ခုကို လှုပ်ရှားသက်ဝင်စေသည်။ | |
| w3-animate-ဘယ်ဘက် | ဘယ်ဘက် -300px မှ 0px သို့ အစိတ်အပိုင်းတစ်ခုကို လှုပ်ရှားသက်ဝင်စေခြင်း။ | |
| w3-animate-အောက်ခြေ | အောက်ခြေ -300px မှ 0px သို့ အစိတ်အပိုင်းတစ်ခုကို လှုပ်ရှားသက်ဝင်စေခြင်း။ | |
| w3- လှုပ်ရှား-မှန်သည်။ | ညာဘက် -300px မှ 0px သို့ အစိတ်အပိုင်းတစ်ခုကို လှုပ်ရှားစေသည်။ | |
| w3-animate-opacity | ဒြပ်စင်တစ်ခု၏ အလင်းပိတ်မှုကို 0 မှ 1 အထိ လှုပ်ရှားစေသည်။ | |
| w3-animate-zoom | ဒြပ်စင်တစ်ခုအား 0 မှ 100% အရွယ်အစားအထိ လှုပ်ရှားစေသည်။ | |
| w3-သက်ဝင်လှုပ်ရှား-နွမ်း | ဒြပ်စင်တစ်ခု၏ ပွင့်လင်းမြင်သာမှုကို 0 မှ 1 နှင့် 1 မှ 0 သို့ သက်ဝင်လှုပ်ရှားစေသည် (အဝင်နှင့်အထွက်မှိန်သွားသည်) | |
| w3-လှည့်ဖျား | အိုင်ကွန်ကို 360 ဒီဂရီလှည့်ပါ။ | |
| မည်သည့်ဒြပ်စင်ကို 360 ဒီဂရီလှည့်ပါ။ | ||
| w3-animate-ထည့်သွင်းခြင်း။ | ထည့်သွင်းအကွက်တစ်ခု၏ အကျယ်ကို 100% သို့ သက်ဝင်လှုပ်ရှားစေသည် |
ဖောင့်နှင့် စာသားအတန်းများ
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3 သေးသေးလေး | ဖောင့်အရွယ်အစားကို 10 ပစ်ဇယ် သတ်မှတ်သည်။ | |
| w3-အသေး | ဖောင့်အရွယ်အစားကို 12 ပစ်ဇယ် သတ်မှတ်သည်။ | |
| w3-ကြီး | ဖောင့်အရွယ်အစားကို 18 ပစ်ဇယ် သတ်မှတ်သည်။ | |
| w3-xlarge | ဖောင့်အရွယ်အစား 24 ပစ်ဇယ်ကို သတ်မှတ်သည်။ | |
| w3-xxlarge | ဖောင့်အရွယ်အစား 32 ပစ်ဇယ်ကို သတ်မှတ်သည်။ | |
| w3-xxxlarge | ဖောင့်အရွယ်အစားကို 48 ပစ်ဇယ် သတ်မှတ်သည်။ | |
| w3-ဂျမ်ဘို | ဖောင့်အရွယ်အစားကို 64 ပစ်ဇယ် သတ်မှတ်သည်။ | |
| w3 အကျယ် | ပိုကျယ်သော စာသားကို သတ်မှတ်ပါ။ | |
| w3-serif | ဖောင့်ကို serif အဖြစ်ပြောင်းသည်။ | |
| w3-sans-serif | ဖောင့်ကို sans-serif သို့ ပြောင်းသည်။ | |
| w3-ကာတွန်း | ဖောင့်ကို ကာတွန်းအဖြစ် ပြောင်းသည်။ | |
| w3-monospace | ဖောင့်ကို monospace သို့ပြောင်းသည်။ |
အတန်းများကိုပြသပါ။
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3-ဗဟို | အကြောင်းအရာကို ဗဟိုပြုသည်။ | |
| w3-ဘယ်ဘက် | ဒြပ်စင်တစ်ခုကို ဘယ်ဘက်သို့ မျှောသည် (float: ဘယ်ဘက်) | |
| w3 - မှန်တယ်။ | ဒြပ်စင်တစ်ခုကို ညာဘက်သို့ မျှောသည် (float: ညာဘက်) | |
| w3-ဘယ်-ညှိ | ဘယ်သို့ ညှိထားသော စာသား | |
| w3-ညာဘက်-ညှိ | ညာဘက်ညှိထားသော စာသား | |
| w3- အကြောင်းပြပါ။ | ညာဘက်နှင့် ဘယ်ဘက် ညှိထားသော စာသား | |
| w3-block | မည်သည့်ဒြပ်စင်အတွက်မဆို အကျယ်ကို သတ်မှတ်ရန် အသုံးပြုနိုင်သည့် အတန်း | |
| w3-စက်ဝိုင်း | အကြောင်းအရာကို ဝိုင်းထားသည်။ | |
| w3-ဝှက် | ဝှက်ထားသော အကြောင်းအရာ (ပြသ-မရှိ) | |
| w3-ရှိုး | အကြောင်းအရာကို ပြပါ (display:block) | |
| w3-ရှိုး-ဘလောက် | w3-show ၏အမည်များ (မျက်နှာပြင်-ဘလောက်) | |
| w3-show-inline-block | အကြောင်းအရာကို inline-block အဖြစ်ပြသပါ (ပြသရန်-inline-block) | |
| w3-ထိပ် | စာမျက်နှာတစ်ခု၏ထိပ်တွင် ပုံသေအကြောင်းအရာ | |
| w3-အောက်ခြေ | စာမျက်နှာတစ်ခု၏အောက်ခြေတွင် ပုံသေအကြောင်းအရာ | |
| w3-display-container | w3-display- အတန်း များအတွက် ကွန်တိန်နာ (အနေအထား-ဆွေမျိုး) | |
| w3-display-topleft | w3-display-container ၏ ဘယ်ဘက်အပေါ်ထောင့်တွင် အကြောင်းအရာကို ပြသသည်။ | |
| w3-မျက်နှာပြင်-အပေါ်ဘက် | w3-display-container ၏ ညာဘက်အပေါ်ထောင့်တွင် အကြောင်းအရာကို ပြသသည်။ | |
| w3-display-အောက်ခြေဘယ်ဘက် | w3-display-container ၏ ဘယ်ဘက်အောက်ခြေရှိ အကြောင်းအရာများကို ပြသပေးသည်။ | |
| w3-မျက်နှာပြင်-အောက်ခြေညာဘက် | w3-display-container ၏ အောက်ခြေညာဘက်ထောင့်ရှိ အကြောင်းအရာကို ပြသသည်။ | |
| w3-display-ဘယ်ဘက် | w3-display-container ၏ ဘယ်ဘက် (အလယ်ဘယ်ဘက်) တွင် အကြောင်းအရာကို ပြသည်။ | |
| w3-မျက်နှာပြင်-ညာဘက် | w3-display-container ၏ ညာဘက် (အလယ် ညာဘက်) တွင် အကြောင်းအရာကို ပြသည်။ | |
| w3-မျက်နှာပြင်-အလယ် | w3-display-container ၏ အလယ် (ဗဟို) တွင် အကြောင်းအရာကို ပြသသည်။ | |
| w3-မျက်နှာပြင်-အပေါ်ပိုင်း | w3-display-container ၏အပေါ်ဆုံးအလယ်တွင် အကြောင်းအရာကိုပြသသည်။ | |
| w3-မျက်နှာပြင်-အောက်ခြေအလယ် | w3-display-container ၏အလယ်အောက်ခြေရှိ အကြောင်းအရာကို ပြသသည်။ | |
| w3-display-အနေအထား | w3-display-container ရှိ သတ်မှတ်ထားသော အနေအထားတွင် အကြောင်းအရာကို ပြသသည်။ | |
| w3-display-hover | w3-display-container အတွင်းရှိ နေရာကို ရွှေ့ထားသည့် အကြောင်းအရာကို ပြသပါ။ |
အကျိုးသက်ရောက်မှုသင်တန်းများ
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3-အလင်းပိတ် | ဒြပ်စင်တစ်ခုသို့ ပွင့်လင်းမြင်သာမှု/မြင်သာမှုကို ပေါင်းထည့်သည် (အလင်းဝင်မှု- 0.6) | |
| စာသားသို့ ပွင့်လင်းမြင်သာမှု/မြင်သာမှု ထည့်ပါ။ | ||
| w3-opacity-off | ပွင့်လင်းမြင်သာမှု/ ပွင့်လင်းမြင်သာမှုကို ပိတ်သည် (အလင်းပိတ်မှု- 1) | |
| w3-အလင်းပိတ်-မိနစ် | ဒြပ်စင်တစ်ခုသို့ ပွင့်လင်းမြင်သာမှု/မြင်သာမှုကို ပေါင်းထည့်သည် (အလင်းဝင်မှု- 0.75) | |
| w3-opacity-အမြင့်ဆုံး | ဒြပ်စင်တစ်ခုသို့ ပွင့်လင်းမြင်သာမှု/မြင်သာမှုကို ပေါင်းထည့်သည် (အလင်းဝင်မှု- 0.25) | |
| w3-မီးခိုးရောင်-မိနစ် | ဒြပ်စင်တစ်ခုသို့ မီးခိုးရောင်အကျိုးသက်ရောက်မှုကို ပေါင်းထည့်သည် (မီးခိုးရောင်စကေး- 50%) | |
| w3-မီးခိုးရောင်စကေး | ဒြပ်စင်တစ်ခုသို့ မီးခိုးရောင်အကျိုးသက်ရောက်မှုကို ပေါင်းထည့်သည် (မီးခိုးရောင်စကေး- 75%) | |
| w3-မီးခိုးရောင်စကေး-အမြင့်ဆုံး | ဒြပ်စင်တစ်ခုသို့ မီးခိုးရောင်အကျိုးသက်ရောက်မှုကို ပေါင်းထည့်သည် (မီးခိုးရောင်စကေး- 100%) | |
| w3-နီညိုရောင်မိနစ် | ဒြပ်စင်တစ်ခုသို့ နီညိုရောင်အကျိုးသက်ရောက်မှုကို ပေါင်းထည့်သည် (နီညိုရောင်- 50%) | |
| w3 နီညိုရောင် | ဒြပ်စင်တစ်ခုသို့ နီညိုရောင်အကျိုးသက်ရောက်မှုကို ပေါင်းထည့်သည် (နီညိုရောင်- 75%) | |
| w3-နီညိုရောင်-မက်စ် | ဒြပ်စင်တစ်ခုသို့ နီညိုရောင်အကျိုးသက်ရောက်မှုကို ပေါင်းထည့်သည် (နီညိုရောင်- 100%) | |
| w3-ထပ်ပေးသည်။ | ထပ်ဆင့်အကျိုးသက်ရောက်မှုကို ဖန်တီးသည်။ |
နောက်ခံအရောင်အတန်းများ
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3 အနီရောင် | နောက်ခံအရောင် အနီရောင် | |
| w3-ပန်းရောင် | နောက်ခံအရောင် ပန်းရောင် | |
| w3-ခရမ်းရောင် | နောက်ခံအရောင် ခရမ်းရောင် | |
| w3-ခရမ်းရောင် | နောက်ခံအရောင် နက်ရှိုင်းသော ခရမ်းရောင် | |
| w3-မဲနယ် | နောက်ခံအရောင် မဲနယ် | |
| w3-အပြာ | နောက်ခံအရောင် အပြာ | |
| w3-အပြာနုရောင် | နောက်ခံအရောင် အပြာနုရောင် | |
| w3-စိမ်းပြာရောင် | နောက်ခံအရောင် စိမ်းပြာရောင် | |
| w3-aqua | နောက်ခံအရောင် Aqua | |
| w3-စိမ်းပြာရောင် | နောက်ခံအရောင် စိမ်းပြာရောင် | |
| w3 အစိမ်းရောင် | နောက်ခံအရောင် အစိမ်းရောင် | |
| w3-အစိမ်းဖျော့ | နောက်ခံအရောင် အစိမ်းဖျော့ဖျော့ | |
| w3-ထုံး | နောက်ခံအရောင်ထုံး | |
| w3-သဲ | နောက်ခံအရောင်သဲ | |
| w3-ကာကီ | နောက်ခံအရောင် ကာကီ | |
| w3 - အဝါရောင် | နောက်ခံအရောင် အဝါရောင် | |
| w3-ပယင်း | နောက်ခံအရောင် ပယင်း | |
| w3-လိမ္မော် | နောက်ခံအရောင် လိမ္မော်ရောင် | |
| w3-လိမ္မော်ရောင် | နောက်ခံအရောင် လိမ္မော်ရောင် နက်နဲသည်။ | |
| w3-အပြာ-မီးခိုး | နောက်ခံအရောင် အပြာရောင် မီးခိုးရောင် | |
| w3 အညိုရောင် | နောက်ခံအရောင် အညိုရောင် | |
| w3-မီးခိုးရောင် | နောက်ခံအရောင် မီးခိုးရောင် | |
| w3 မီးခိုးရောင် | နောက်ခံအရောင် မီးခိုးရောင် | |
| w3 - မီးခိုးရောင် | နောက်ခံအရောင် အနက်ရောင် မီးခိုးရောင် | |
| w3-အနက်ရောင် | နောက်ခံအရောင် အနက်ရောင် | |
| w3 - အနီရောင်ဖျော့ဖျော့ | နောက်ခံအရောင် အနီရောင်ဖျော့ဖျော့ | |
| w3 - အဝါဖျော့ | နောက်ခံအရောင် အဝါဖျော့ဖျော့ | |
| w3 စိမ်းဖျော့ဖျော့ | နောက်ခံအရောင် အစိမ်းဖျော့ဖျော့ | |
| w3-အပြာဖျော့ | နောက်ခံအရောင် အပြာဖျော့ဖျော့ | |
| w3- ပွင့်လင်းမှု | ဖောက်ထွင်းမြင်ရသော နောက်ခံအရောင် |
Hover Color Classes
အထက်ဖော်ပြပါ အရောင်များကို hover classes အဖြစ်လည်း သုံးနိုင်သည်-
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3-hover-အဖြူ | အရောင် အဖြူ | |
| w3-hover-အနက်ရောင် | အရောင် အနက်ရောင် | |
| w3-hover-အနီရောင် | အရောင် အနီရောင် | |
| w3-hover-အပြာ | အပြာရောင်ကို ရွှေ့ပါ။ | |
| w3-hover-green | အစိမ်းရင့်ရောင် | |
| w3-hover-aqua | ရေနေရောင်ကို ရွှေ့ပါ။ | |
| w3-hover-လိမ္မော်ရောင် | လိမ္မော်ရောင်ကို ရွှေ့ပါ။ | |
| w3-hover-grey | မီးခိုးရောင်ကို ရွှေ့ပါ။ | |
| w3-hover-အစိမ်းဖျော့ | အစိမ်းဖျော့ဖျော့အရောင်ကို ရွှေ့ပါ။ |
စာသားအရောင်အတန်းများ
| အတန်း | သတ်မှတ်ပါတယ်။ | |
|---|---|---|
| w3-စာသား-အနီရောင် | စာသားအရောင် အနီရောင် | |
| w3-စာသား-အစိမ်းရောင် | စာသားအရောင်အစိမ်း | |
| w3-စာသား-အပြာ | စာသားအရောင် အပြာ | |
| w3-စာသား-အဝါရောင် | စာသားအရောင် အဝါရောင် | |
| w3-စာသား-မီးခိုးရောင် | Text color light-grey | |
| w3-text-grey | Text color grey | |
| w3-text-dark-grey | Text color dark grey | |
| w3-text-black | Text color black | |
| w3-text-white | Text color white | |
| w3-text-pink | Text color pink | |
| w3-text-purple | Text color purple | |
| w3-text-teal | Text color teal | |
| w3-text-light-green | Text color light green | |
| w3-text-lime | Text color lime | |
| w3-text-deep-purple | Text color deep purple | |
| w3-text-indigo | Text color indigo | |
| w3-text-light-blue | Text color light blue | |
| w3-text-blue-grey | Text color blue grey | |
| w3-text-cyan | Text color cyan | |
| w3-text-aqua | Text color aqua | |
| w3-text-amber | Text color amber | |
| w3-text-orange | Text color orange | |
| w3-text-deep-orange | Text color deep orange | |
| w3-text-sand | Text color sand | |
| w3-text-khaki | Text color khaki | |
| w3-text-brown | Text color brown |
Hover Text Classes
The text classes above can also be used as hover classes:
| Class | Defines | |
|---|---|---|
| w3-hover-text-red | Hover text color red | |
| w3-hover-text-green | Hover text color green | |
| w3-hover-text-blue | Hover text color blue | |
| w3-hover-text-yellow | Hover text color yellow |
Other Hover Classes
| Class | Defines | |
|---|---|---|
| w3-hover-border-color | Hover border color | |
| w3-hover-opacity | Adds transparency to an element on hover (opacity: 0.6) | |
| w3-hover-opacity-off | Removes transparency from an element on hover (100% opacity) | |
| w3-hover-shadow | Adds shadow to an element on hover | |
| w3-hover-grayscale | Adds a black and white (100% grayscale) effect to an element | |
| w3-hover-sepia | Adds a sepia effect to an element on hover | |
| w3-hover-none | Removes hover effects from an element |
Round Classes
| Class | Defines | |
|---|---|---|
| w3-round | Element rounded (border-radius) 4px | |
| w3-round-small | Element rounded (border-radius) 2px | |
| w3-round-medium | Element rounded (border-radius) 4px | |
| w3-round-large | Element rounded (border-radius) 8px | |
| w3-round-xlarge | Element rounded (border-radius) 16px | |
| w3-round-xxlarge | Element rounded (border-radius) 32px |
Padding Classes
| Class | Defines | |
|---|---|---|
| w3-padding-small | Padding 4px top and bottom, and 8px left and right. | |
| w3-padding | Padding 8px top and bottom, and 16px left and right. | |
| w3-padding-large | Padding 12px top and bottom, and 24px left and right. | |
| w3-padding-16 | Padding 16px top and bottom | |
| w3-padding-24 | Padding 24px top and bottom | |
| w3-padding-32 | Padding 32px top and bottom | |
| w3-padding-48 | Padding 48px top and bottom | |
| w3-padding-64 | Padding 64px top and bottom | |
| w3-padding-top-64 | Padding 64px on top | |
| w3-padding-top-48 | Padding 48px on top | |
| w3-padding-top-32 | Padding 32px on top | |
| w3-padding-top-24 | Padding 24px on top |
Margin Classes
| Class | Defines | |
|---|---|---|
| w3-margin | Adds an 16px margin to an element | |
| w3-margin-top | Adds an 16px top margin to an element | |
| w3-margin-right | Adds an 16px right margin to an element | |
| w3-margin-bottom | Adds an 16px bottom margin to an element | |
| w3-margin-left | Adds an 16px left margin to an element | |
| w3-section | Adds an 16px top and bottom margin to an element |
Border Classes
| Class | Defines | |
|---|---|---|
| w3-border | Borders (top, right, bottom, left) | |
| w3-border-top | Border top | |
| w3-border-right | Border right | |
| w3-border-bottom | Border bottom | |
| w3-border-left | Border left | |
| w3-border-0 | Removes all borders | |
| w3-border-color | Displays any defined borders in a specified color (like red, etc) | |
| w3-bottombar | Adds a thick bottom border (bar) to an element | |
| w3-leftbar | Adds a thick left border (bar) to an element | |
| w3-rightbar | Adds a thick right border (bar) to an element | |
| w3-topbar | Adds a thick top border (bar) to an element | |
| w3-hover-border-color | Hoverable border color |