W3.CSS Built-In တုံ့ပြန်မှု
W3.CSS တွင် အပြင်အဆင်ကို ကိုင်တွယ်ရန် တုံ့ပြန်မှုရှိသော၊ မိုဘိုင်း-ပထမ ဂရစ်စနစ် ပါဝင်သည်-
၁/၂
၁/၂
၁/၃
၁/၃
၁/၃
၁/၃
၂/၃
၁/၄
၁/၄
၁/၄
၁/၄
၁/၂
၁/၄
၁/၄
၂/၃
၁/၃
၃/၄
၁/၄
၁/၄
၁/၄
၁/၂
၁/၄
၁/၂
၁/၄
50px
အနားယူပါ။
၁/၄
အနားယူပါ။
100px
45px
အနားယူပါ။
W3.CSS တုံ့ပြန်မှု အတန်းများ
W3.CSS ၏ ဇယားကွက်စနစ်သည် တုံ့ပြန်မှုဖြစ်ပြီး မျက်နှာပြင်အရွယ်အစားပေါ်မူတည်၍ ကော်လံများကို အလိုအလျောက် ပြန်လည်စီစဉ်ပေးမည်-
| အတန်း | ဖော်ပြချက် |
|---|---|
| w3-တစ်ဝက် | ပြတင်းပေါက်၏ 1/2 (အလတ်စားနှင့် ကြီးမားသော ဖန်သားပြင်များပေါ်တွင်) နေရာယူသည် |
| w3 တတိယ | ပြတင်းပေါက်၏ 1/3 (အလတ်စားနှင့် ကြီးမားသော ဖန်သားပြင်များပေါ်တွင်) နေရာယူသည် |
| w3-နှစ်ပုံ | ဝင်းဒိုး၏ 2/3 (အလတ်စားနှင့် ကြီးမားသော စခရင်များပေါ်တွင်) နေရာယူသည် |
| w3 ရပ်ကွက် | ဝင်းဒိုး၏ 1/4 (အလတ်စားနှင့် ကြီးမားသော စခရင်များပေါ်တွင်) နေရာယူသည် |
| w3 သုံးပုံတစ်ပုံ | Window ၏ 3/4 ကို သိမ်းပိုက်သည် (အလတ်စားနှင့် ကြီးမားသော စခရင်များတွင်) |
| w3- အနားယူပါ။ | ကျန်ကော်လံအကျယ်ကို ယူထားသည်။ |
| w3-col | 12-ကော်လံတုံ့ပြန်မှုဇယားကွက်တွင် ကော်လံတစ်ခုကို သတ်မှတ်သည်။ |
| w3-မိုဘိုင်း | ဆဲလ် (ကော်လံ) သို့ မိုဘိုင်း-ပထမ တုံ့ပြန်မှုကို ပေါင်းထည့်သည်။ မိုဘိုင်းလ်စက်ပစ္စည်းများတွင် ပိတ်ဆို့ထားသော အစိတ်အပိုင်းများအဖြစ် အစိတ်အပိုင်းများကို ပြသပါ။ |
အထက်ဖော်ပြပါ တုံ့ပြန်နိုင်သော အတန်းများကို w3-row အတန်းအစား (သို့မဟုတ် w3-row-padding အတန်း) တွင် အပြည့်အဝ တုံ့ပြန်မှုရှိရပါမည်။
| အတန်း | ဖော်ပြချက် |
|---|---|
| w3 အတန်း | အကွက်မပါသော တုံ့ပြန်မှုရှိသောအတန်းများအတွက် ကွန်တိန်နာ |
| w3-row-padding | တုံ့ပြန်နိုင်သော အတန်းများအတွက် ကွန်တိန်နာ၊ 8px ဘယ်ညာ အကွက်များ |
| w3-အကြောင်းအရာ | ပုံသေအရွယ်အစားကို ဗဟိုပြုထားသော အကြောင်းအရာအတွက် ကွန်တိန်နာ |
| w3-ဝှက်-သေးငယ် | မျက်နှာပြင်ငယ်များ (601px အောက်) တွင် အကြောင်းအရာကို ဝှက်ထားသည် |
| w3-hide-လတ် | အလယ်အလတ်စခရင်များတွင် အကြောင်းအရာကို ဝှက်ထားသည်။ |
| w3-hide-large | ကြီးမားသောဖန်သားပြင်များတွင် အကြောင်းအရာကို ဝှက်ထားသည် (992px ထက်ကြီးသည်) |
| l1 - l12 | ကြီးမားသော မျက်နှာပြင်များအတွက် တုံ့ပြန်နိုင်သော အရွယ်အစားများ |
| m1 - m12 | အလတ်စား မျက်နှာပြင်များအတွက် တုံ့ပြန်နိုင်သော အရွယ်အစားများ |
| s1 - s12 | သေးငယ်သော စခရင်များအတွက် တုံ့ပြန်နိုင်သော အရွယ်အစားများ |
w3- half Class
w3-half class ၏ width သည် parent element (style="width:50%") ၏ 1/2 ဖြစ်သည်။
601 pixels ထက်သေးငယ်သော စခရင်များတွင် ၎င်းသည် 100% သို့ အရွယ်အစားပြောင်းသည်။
w3-တစ်ဝက်
w3-တစ်ဝက်
ဥပမာ
<div class="w3-row">
<div class="w3-half w3-container w3-green">
<h2>w3-half</h2>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
</div>
</div>
w3-တတိယတန်း
w3-တတိယ အတန်း ၏အကျယ် သည် ပင်မဒြပ်စင်၏ 1/3 (style="width:33.33%")။
601 pixels ထက်သေးငယ်သော စခရင်များတွင် ၎င်းသည် 100% သို့ အရွယ်အစားပြောင်းသည်။
w3 တတိယ
w3 တတိယ
w3 တတိယ
ဥပမာ
<div class="w3-row">
<div class="w3-third w3-container w3-green">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
</div>
w3-tword အတန်း
w3-tword class ၏ width သည် parent element (style="width:66.66%) ၏ 2/3 ဖြစ်သည်။
601 pixels ထက်သေးငယ်သော စခရင်များတွင် ၎င်းသည် 100% သို့ အရွယ်အစားပြောင်းသည်။
w3-နှစ်ပုံ
w3 တတိယ
ဥပမာ
<div class="w3-row">
<div class="w3-green w3-container
w3-twothird">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
w3-quarter အတန်း
w3-quarter အတန်း ၏အကျယ် သည် ပင်မဒြပ်စင်၏ 1/4 (style="width:25%")။
601 pixels ထက်သေးငယ်သော စခရင်များတွင် ၎င်းသည် 100% သို့ အရွယ်အစားပြောင်းသည်။
w3 ရပ်ကွက်
w3 ရပ်ကွက်
w3 ရပ်ကွက်
w3 ရပ်ကွက်
ဥပမာ
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
w3-threequarter အတန်း
w3-threequarter class ၏ width သည် parent element (style="width:75%") ၏ 3/4 ဖြစ်သည်။
601 pixels ထက်သေးငယ်သော စခရင်များတွင် ၎င်းသည် 100% သို့ အရွယ်အစားပြောင်းသည်။
w3 သုံးပုံတစ်ပုံ
w3 ရပ်ကွက်
ဥပမာ
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
ပေါင်းစပ်မှုများ
w3 ရပ်ကွက်
w3-တစ်ဝက်
w3 ရပ်ကွက်
w3 ရပ်ကွက်
w3 ရပ်ကွက်
w3-တစ်ဝက်
w3-တစ်ဝက်
w3 ရပ်ကွက်
w3 ရပ်ကွက်
Nested အတန်းများ
ဥပမာ- w3-တစ်ဝက် အတွင်းပိုင်း w3-တစ်ဝက်
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div>
Rest ကိုအသုံးပြုသည့်ကော်လံများ
w3-col အတန်းအစား သည် 12-ကော်လံတုံ့ပြန်မှုဇယားတွင် ကော်လံတစ်ခုကို သတ်မှတ်သည်။
w3-rest class သည် ကျန် width ကို သိမ်းပိုက်ပါမည်-
ကျွန်တော်က 150px ပါ။
ငါက ကျန်တာ။
ဥပမာ
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>I
am 150px</p></div>
<div class="w3-rest
w3-green"><p>I am the rest</p></div>
</div>
ရာခိုင်နှုန်းကို အသုံးပြုထားသော ကော်လံများ
အကျယ်ကို ရာခိုင်နှုန်းသတ်မှတ်ရန် CSS အကျယ်ပိုင်ဆိုင်မှုကို သင်အသုံးပြုနိုင်သည်။
20%
60%
20%
ဥပမာ
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div>
w3-အကြောင်းအရာ အတန်းအစား
w3-content class သည် ပုံသေအရွယ်အစား ဗဟိုပြုထားသော အကြောင်းအရာအတွက် ကွန်တိန်နာတစ်ခုကို သတ်မှတ်သည်။ ပုံသေ အကျယ် (980px) ကို အစားထိုးရန် CSS ၏ max-width ကို အသုံးပြုပါ။
ဥပမာ
<body class="w3-content" style="max-width:500px">
page content...
</body>
w3-row နှင့် w3-row-padding
w3-row class သည် padding မရှိသော container တစ်ခုကို သတ်မှတ်ပြီး w3-row-padding class သည် ကော်လံတစ်ခုစီသို့ 8px ဘယ်နှင့်ညာဘက် padding ကို ပေါင်းထည့်သည်-
w3 အတန်း-
w3 တတိယ
w3 တတိယ
w3 တတိယ
w3-row-padding-
w3 တတိယ
w3 တတိယ
w3 တတိယ
w3 အတန်း-
w3-row-padding-
ဥပမာ
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col
s4"><img src="img_snowtops.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col
s4"><img src="img_snowtops.jpg"></div>
</div>
Padded Rows ဆန့်ပါ။
w3-stretch class သည် element တစ်ခုမှ ညာဘက်နှင့် ဘယ်ဘက်အနားသတ်များကို ဖယ်ရှားသည်။ ဤအတန်းကို padded အတန်းဆန့်ရန် မကြာခဏအသုံးပြုသည်-
w3-stretch ပါသော ဥပမာတစ်ခု။
w3-stretch မပါသော ဥပမာ-
ဥပမာ
<div class="w3-row-padding w3-section w3-stretch">
<div
class="w3-col s4">
<img src="img_nature_wide.jpg">
</div>
<div class="w3-col s4">
<img src="img_snow_wide.jpg">
</div>
<div class="w3-col s4">
<img
src="img_mountains_wide.jpg">
</div>
</div>
တုံ့ပြန်မှုပြ/ဖျောက်
The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.
Note: Resize the browser window to understand how it works:
Example
<div class="w3-container w3-hide-small w3-red">
<p>w3-hide-small will
be hidden on small screens (phones)</p>
</div>
<div
class="w3-container w3-hide-medium w3-green">
<p>w3-hide-medium will
be hidden on medium screens (tablets)</p>
</div>
<div
class="w3-container w3-hide-large w3-blue">
<p>w3-hide-large will be
hidden on large screens (laptops/desktop)</p>
</div>
The w3-mobile Class
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
Example
<a class="w3-button w3-mobile" href="#">Link</a>
Screen Resolutions
The built-in responsiveness of W3.CSS uses the DP size of a screen.
W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels DP.
Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.
Below is a list of typical device resolutions and reported DP sizes:
Iphone 4
Resolution
640 x 960
DP
320 x 480
Iphone 5
Resolution
640 x 1136
DP
320 x 528
Iphone 6
Resolution
750 x 1334
DP
375 x 667
Iphone 6s
Resolution
1080 x 1920
DP
414 x 736
Galaxy S6
Resolution
1440 x 2560
DP
360 x 640
Note 4
Resolution
1440 x 2560
DP
400 x 853
Nexus 6
Resolution
1440 x 2560
DP
411 x 731
iPad Mini
Resolution
768 x 1024
DP
768 x 1024
iPad
Resolution
1536 x 2048
DP
768 x 1024
Typical Laptop
Resolution
1366 x 768
DP
1366 x 768
Typical Desktop
Resolution
1920 x 1080
DP
1920 x 1080
12 Column Responsive Fluid Grid
W3.CSS also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!
This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.
You will learn a lot more about the fluid grid in a later chapter.