شبکه بندی واکنشگرا

چاپ

شبکه بندی واکنشگرا

W3.CSS  یک شبکه بندی 12 ستونه واکنشگرا را پشتیبانی میکند.

 صفحه را برای مشاهده افکت تغییر سایزدهید:

1
2
3
4
5
6
7
8
9
10
11
12
 

این قسمت 12 ستون در یک نمایشگر کوچک  و 4 ستون در نمایشگر متوسط و 3 ستون در نمایشگر بزرگ اشغال میکند.

این قسمت 12 ستون در یک نمایشگر کوچک  و 8 ستون در نمایشگر متوسط و 9 ستون در نمایشگر بزرگ اشغال میکند.

1
2
3
4
5
6
7
8
9
10
11
12

 

مثال

<div class="w3-row">
  <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-row">
  <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-row">
  <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-row">
  <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-row">
  <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-row">
  <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-row">
  <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-row">
  <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-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_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-row">
    <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-row">
    <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>
خودتان امتحان کنيد »