شبکه بندی واکنشگرا
شبکه بندی واکنشگرا
W3.CSS یک شبکه بندی 12 ستونه واکنشگرا را پشتیبانی میکند.
صفحه را برای مشاهده افکت تغییر سایزدهید:
این قسمت 12 ستون در یک نمایشگر کوچک و 4 ستون در نمایشگر متوسط و 3 ستون در نمایشگر بزرگ اشغال میکند.
این قسمت 12 ستون در یک نمایشگر کوچک و 8 ستون در نمایشگر متوسط و 9 ستون در نمایشگر بزرگ اشغال میکند.
مثال
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.</p>
</div>
</div>
ردیف های واکنشگرا
سیستم شبکه بندی W3.CSS واکنشگرا است.ستون ها به صورت خودکار براساس اندازه صفحه نمایش تنظیم میشوند. در نمایشگرهای بزرگ بهتر است محتوا در سه ستون قرار بگیرند اما در نمایشگرهای کوچک اینکه محتوا به صورت استک و پشته روی یکدیگر قرار میگیرند.
| Class | توضیحات |
|---|---|
| w3-row | Container برای کلاس های واکنشگرا ،بدون padding |
| w3-row-padding | Container برای کلاس های واکنشگرا ،با padding چپ و راست به اندازه 8px |
| w3-col | یک ستون در یک شبکه بندی 12 ستونه واکنشگرا تعریف میکند. |
w3-col کلاس های زیر را دارد:
ستون ها برای نمایشگرهای کوچک (تلفن های هوشمند معمولی) :
| Class | توضیحات |
|---|---|
| s1 | یک ستون از 12 ستون (width:08.33%) برای نمایشگرهای کوچک را تعریف میکند |
| s2 | دو ستون از 12 ستون (width:16.66%) برای نمایشگرهای کوچک را تعریف میکند |
| s3 | سه ستون از 12 ستون (width:25.00%) برای نمایشگرهای کوچک را تعریف میکند |
| s4 | چهارستون از 12 ستون (width:33.3%) برای نمایشگرهای کوچک را تعریف میکند |
| s5-s11 | |
| s12 | دوازده ستون از 12 ستون (width:100%) برای نمایشگرهای کوچک را تعریف میکند. مقدار پیشفرض در نمایشگرهای کوچک است. |
ستون ها برای نمایشگرهای متوسط (تبلتهای معمولی):
| Class | توضیحات |
|---|---|
| m1 | یک ستون از 12 ستون (width:08.33%) برای نمایشگرهای متوسط را تعریف میکند |
| m2 | دو ستون از 12 ستون (width:16.66%) برای نمایشگرهای متوسط را تعریف میکند |
| m3 | سه ستون از 12 ستون (width:25.00%) برای نمایشگرهای متوسط را تعریف میکند |
| m4 | چهار ستون از 12 ستون (width:33.33%) برای نمایشگرهای متوسط را تعریف میکند |
| m5-m11 | |
| m12 | دوازده ستون از 12 ستون (width:100%) برای نمایشگرهای متوسط را تعریف میکند. مقدارپیشفرض برای نمایشگرهای متوسط است. |
ستون ها برای نمایشگرهای کوچک (لپتاپ ها و رایانه های رومیزی):
| Class | توضیحات |
|---|---|
| l1 | یک ستون از 12 ستون (width:08.33%) برای نمایشگرهای بزرگ را تعریف میکند |
| l2 | دو ستون از 12 ستون (width:16.66%) برای نمایشگرهای بزرگ را تعریف میکند |
| l3 | سه ستون از 12 ستون (width:25.00%) برای نمایشگرهای بزرگ را تعریف میکند |
| l4 | چهار ستون از 12 ستون (width:33.3%) برای نمایشگرهای بزرگ را تعریف میکند |
| l5-l11 | |
| l12 | دوازده ستون از 12 ستون (width:100%) برای نمایشگرهای بزرگ را تعریف میکند. که مقدار پیش فرض در نمایشگرهای بزرگ است. |
کلاسهای بالا برای ایجاد طرح های پویا و قابل انعطاف با یکدیگرترکیب میشوند.
هرکلاس سایز کوچک ،برای سایز های بزرگتر نیز استفاده میشود،بنابراین اگر شما بخواهید همان اندازه عرض را برای نمایشگرهای کوچک ،متوسط و بزرگ تنظیم کنید، شما فقط نیاز است که کلاس کوچک را قرار دهیدو اگر میخواهید همان اندازه را برای نمایشگرهای متوسط داشته باشید ،تنها نیاز است از کلاس متوسط استفاده کنید.
اگرچه ،شما از کلاس های متوسط و /یا بزرگ استفاده کنید، عرض در نمایشگرهای کوچک به اندازه 100% خواهد شد.
نکته: در هر ردیف تعداد ستون هایی که باید همیشه 12 باشد.(6+6, 3+3+6, 9+3, غیره)
دو ستون مساوی
دو ستون با عرض مساوی (50%/50%) در تمام نمایشگرها خواهیم داشت:
s6
s6
مثال
<div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
<div class="w3-col s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>
دو ستون نامساوی
دو ستون با عرض نامساوی (25%/75%) درتمام نمایشگرها خواهیم داشت :
s3
s9
مثال
<div class="w3-col s3 w3-green w3-center"><p>s6</p></div>
<div class="w3-col s9 w3-dark-grey w3-center"><p>s6</p></div>
</div>
سه ستون مساوی
سه ستون با عرض مساوی (33.3%/33.3%/33.3%) در تمام نمایشگرها داریم.
s4
s4
s4
مثال
<div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-red w3-center"><p>s4</p></div>
</div>
سه ستون نامساوی
سه ستون با عرض های متفاوت (25%/50%/25%) در تبلت ها ،لپتاپ ها و رایانه های رومیزی داریم. در تلفن های همراه ،ستون ها به صورت اتوماتیک به صورت استک روی هم قرار میگیرند(عرض 100%):
m3
m6
m3
مثال
<div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
<div class="w3-col m6 w3-dark-grey w3-center"><p>m6</p></div>
<div class="w3-col m3 w3-red w3-center"><p>m3</p></div>
</div>
نکته : این مثال از w3-quarter (m3), w3-half (m6), w3-quarter (m3) استفاده میکند که شما در فصل W3.CSS Responsive آموختید.
شش ستون
شش ستون با عرض برابر (هرکدام 16%) در تبلتها ،لپتاپ ها و رایانه های رومیزی داریم. در تلفن های همراه،ستون ها به صورت اتوماتیک روی هم قرار میگیرند( عرض 100%)
m2
m2
m2
m2
m2
m2
مثال
<div class="w3-col m2 w3-green w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-red w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-blue w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-dark-grey w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-black w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-purple w3-center"><p>m2</p></div>
</div>
ترکیب شده:موبایل و لپ تاپ ها
شما میتوانید کلاس ها را برای ایجاد یک طرح داینامیک و قابل انعطاف ترکیب کنید.این مثال یک طرح دو ستونه با قسمتهای 83.34%/16.66% (l10, l2) در نمایشگرهای بزرگ و قسمت های 50%/50% (s6, s6) در نمایشگرهای کوچک ایجاد میکند:
l10 s6
l2 s6
مثال
<div class="w3-col l10 s6 w3-pink w3-center"><p>l10 s6</p></div>
<div class="w3-col l2 s6 w3-dark-grey w3-center"><p>l2 s6</p></div>
</div>
ترکیب شده: موبایل ، تبلت و لپتاپ ها
این مثال یک طرح سه ستونه با قسمت های 25%/58.34%/16.66% (l3, l7, l2) در نمایشگرهای بزرگ وقسمت های50%/25%/25% (m6, m3, m3) در نمایشگرهای متوسط و 33.3%/33.3%/33.3% (s4, s4, s4) در نمایشگرهای کوچک ایجاد میکند:
l3 m6 s4
l7 m3 s4
l2 m3 s4
مثال
<div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>
<div class="w3-col l7 m3 s4 w3-dark-grey w3-center"><p>l7 m3 s4</p></div>
<div class="w3-col l2 m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>
</div>
تفاوت بین w3-row و w3-row-padding
کلاس container یک رردیف با فضای خالی (padding )کم تعریف میکند. درحالی که کلاس w3-row-padding مقدار padding ازسمت چپ و راست به اندازه 8px برای هر ستون اضافه میکند:
w3-row:
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_fjords.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_fjords.jpg"></div>
</div>
استفاده از w3-rest
کلاس w3-rest یک کلاس قدرتمند و قابل انعطاف است که برای آنچه از ستون های شبکه باقی مانده استفاده میشود.
مثال استفاده از باقی مانده
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
عنصری که از کلاس "w3-reset " استفاده میکند، باید آخرین عنصر در کد باشد:
استفاده از درصدها
ویژگی width در CSS برای تعیین عرض ستون ها مورد استفاده قرار میگیرد.
مثال
<div class="w3-col w3-container w3-green" style="width:20%"><p>20%</p></div>
<div class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>
- نوشته شده توسط زهرا داوودی
- بازدید: 3647
