صفحات واکنشگرا
W3.CSS یک سیستم شبکه بندی واکنشگرا برای کنترل طرح ها دارد.
کلاس های واکنشگرا در W3.CSS
سیستم شبکه بندی W3.CSS واکنشگرا است و ستون ها به صورت اتوماتیک براساس اندازه صفحه نمایش، مرتب می شوند:
| کلاس | توضیحات |
|---|---|
| w3-half | 1/2 اندازه پنجره را اشغال میکند(درون صفحه نمایش های بزرگ و متوسط) |
| w3-third | 1/3 اندازه پنجره را اشغال میکند(درون صفحه نمایش های بزرگ و متوسط) |
| w3-twothird | 2/3 اندازه پنجره را اشغال میکند(درون صفحه نمایش های بزرگ و متوسط) |
| w3-quarter | 1/4 اندازه پنجره را اشغال میکند(درون صفحه نمایش های بزرگ و متوسط) |
| w3-threequarter | 3/4 اندازه پنجره را اشغال میکند(درون صفحه نمایش های بزرگ و متوسط) |
| w3-rest | باقی مانده عرض ستون را اشغال میکند. |
| w3-col | یک ستون در یک شبکه بندی واکنشگرای دوازده ستونه تعریف میکند. |
برای اینکه به طور کامل واکنشگرا باشد ، باید کلاس های واکنشگرای بالا درون کلاس w3-row (یا کلاس w3-row-padding)قرار بگیرند
| Class | توضیحات |
|---|---|
| w3-row | یک container برای کلاس های واکنشگرا ،بدون padding |
| w3-row-padding | یک container برای کلاس های واکنشگرا،با padding به اندازه 8px از سمت چپ و راست |
| w3-content | Container برای محتوای وسط چین با اندازه ثابت |
| w3-hide-small | مخفی کردن محتوا در صفحه نمایش های کوچک(کمتر از 610px) |
| w3-hide-medium | مخفی کردن محتوا در صفحه نمایش های متوسط |
| w3-hide-large | مخفی کردن محتوا در صفحه نمایش های بزرگ(بزرگتر از( 992px) |
| l1 - l12 | اندازه های واکنشگرا برای صفحه نمایش های بزرگ |
| m1 - m12 | اندازه های واکنشگرا برای صفحه نمایش های متوسط |
| s1 - s12 | اندازه های واکنشگرا برای صفحه نمایش های کوچک |
کلاس w3-half
عرض کلاس w3-half نصف(1/2)عنصر والدش است("style="width:50%)
در صفحه نمایش های کوچکتر از 601 پیکسل ، به اندازه 100% عنصر والد می شود.
w3-half
w3-half
مثال
<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-third
عرض کلاسw3-third برابر (1/3)عنصر والدش است("style="width:33.33%)
در صفحه نمایش های کوچکتر از 601 پیکسل ، به اندازه 100% عنصر والد می شود.
w3-third
w3-third
w3-third
مثال
<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-twothird
عرض کلاسw3-twothird برابر (2/3)عنصر والدش است("style="width:66.66%)
در صفحه نمایش های کوچکتر از 601 پیکسل ، به اندازه 100% عنصر والد می شود.
w3-twothird
w3-third
مثال
<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 پیکسل ، به اندازه 100% عنصر والد می شود.
w3-quarter
w3-quarter
w3-quarter
w3-quarter
مثال
<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 برابر (3/4)عنصر والدش است("style="width:75%)
در صفحه نمایش های کوچکتر از 601 پیکسل ، به اندازه 100% عنصر والد می شود.
w3-threequarter
w3-quarter
مثال
<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-quarter
w3-half
w3-quarter
w3-quarter
w3-quarter
w3-half
w3-half
w3-quarter
w3-quarter
ردیف های تو درتو
مثال: w3-half Inside w3-half
<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>
ستون هایی که از باقیمانده ی عرض فضا استفاده میکنند
کلاس w3-col یک ستون در یک شبکه 12 ستونه واکنشگرا تعریف می کند.
کلاس w3-rest باقی مانده عرض را اشغال می کند:
من 15px هستم
من باقیمانده هستم.
مثال
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest w3-green"><p>rest</p></div>
</div>
ستون هایی که از درصد استفاده میکنند
برای تنظیم عرض به صورت درصدی شما میتوانید از خصوصیت width در css استفاده کنید:
مثال
<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-content
کلاس w3-content یک container برای محتوای وسط چین با اندازه ثابت تعریف میکند. با استفاده از خصوصیت max-width در css ، می توانید عرض پیش فرض (980px) را تغییر دهید.
w3-row و w3-row-padding
کلاس w3-row یک container بدون padding تعریف میکند، در حالی که کلاس w3-row-padding ،یک padding چپ وراست به اندازه 8px به هر ستون میدهد.
w3-row:
w3-third
w3-third
w3-third
w3-row-padding:
w3-third
w3-third
w3-third
w3-row:
w3-row-padding:
مثال
<div class="w3-third"><img src="/img_lights.jpg"></div>
<div class="w3-third"><img src="/img_nature.jpg"></div>
<div class="w3-third"><img src="/img_fjords.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-third"><img src="/img_lights.jpg"></div>
<div class="w3-third"><img src="/img_nature.jpg"></div>
<div class="w3-third"><img src="/img_fjords.jpg"></div>
</div>
نمایش /عدم نمایش بصورت ریسپانسیو
کلاس های w3-hide-small, w3-hide-mediumو w3-hide-large برای پنهان کردن یک عنصر در سایز خاصی مورد استفاده قرار می گیرند.
نکته :برای فهمیدن اینکه این کلاس ها چگونه کار می کنند مرورگر خود را تغییر سایز دهید .
کلاس w3-hide-small برای مخفی کردن عنصر در سایز کوچک (موبایل)می باشد.
کلاس w3-hide-medium برای مخفی کردن عنصر درسایز متوسط (تبلت )می باشد.
مثال
<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>
رزولوشن های صفحات نمایش
در W3.CSS برای واکنشگرا کردن میتوان از DP در صفحه نمایش استفاده کرد.
W3.CSS با آیفون 6 با رزولوشن750x1334 مانند صفحات کوچک با اندازه 375x667 pixel ،Dp رفتار می کند.
صفحه نمایش های کوچک با کمتر از 601 پیکسل DP، و صفحه نمایشهای متوسط با کمتر از 993 پیکسل DP هستند.
شبکه بندی دوازده ستونه واکنشگرا
W3.CSS شبکه بندی 12 ستونه را پشتیبانی می کند
برای دیدن تاثیر، صفحه را تغییر سایز دهید.
این قسمت 12 ستون در یک صفحه نمایش کوچک، 4 بر روی صفحه نمایش متوسط و 3 در یک صفحه نمایش بزرگ را اشغال کند.
این قسمت 12 ستون در یک صفحه نمایش کوچک، 8 بر روی صفحه نمایش متوسط، و 9 در یک صفحه نمایش بزرگ را اشغال کند.
شما اطلاعات بیشتر در مورد شبکه ها را در فصل بعد یاد بگیرند.
- نوشته شده توسط زهرا داوودی
- بازدید: 3853
