صفحات واکنشگرا

چاپ

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-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-third

عرض کلاسw3-third برابر (1/3)عنصر والدش است("style="width:33.33%)

در صفحه نمایش های کوچکتر از 601 پیکسل ، به اندازه 100% عنصر والد می شود.

w3-third

w3-third

w3-third

مثال

<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-twothird

عرض کلاسw3-twothird برابر (2/3)عنصر والدش است("style="width:66.66%)

در صفحه نمایش های کوچکتر از 601 پیکسل ، به اندازه 100% عنصر والد می شود.

 

w3-twothird

w3-third

مثال

<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 پیکسل ، به اندازه 100% عنصر والد می شود.

 

w3-quarter

w3-quarter

w3-quarter

w3-quarter

مثال

<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 برابر (3/4)عنصر والدش است("style="width:75%)

در صفحه نمایش های کوچکتر از 601 پیکسل ، به اندازه 100% عنصر والد می شود.

 

w3-threequarter

w3-quarter

مثال

<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-quarter

w3-half

w3-quarter

 

w3-quarter

w3-quarter

w3-half

 

w3-half

w3-quarter

w3-quarter

 

w3-third

w3-twothird

 

w3-quarter

w3-threequarter

ردیف های تو درتو

مثال: w3-half Inside w3-half

<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>
خودتان امتحان کنيد »

  ستون هایی که از باقیمانده ی عرض فضا استفاده میکنند

کلاس w3-col  یک ستون در یک شبکه 12 ستونه واکنشگرا تعریف می کند.

کلاس w3-rest باقی مانده عرض را اشغال می کند:

من 15px  هستم

من باقیمانده هستم.

مثال

<div class="w3-row">
    <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-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-content

کلاس w3-content یک container برای محتوای وسط چین با اندازه ثابت تعریف میکند. با استفاده از خصوصیت max-width در css ، می توانید عرض پیش فرض (980px) را  تغییر دهید.

مثال

<body class="w3-content" style="max-width:500px">

  page content...

</body>
خودتان امتحان کنيد »

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-row">
  <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 برای مخفی کردن عنصر درسایز متوسط (تبلت )می باشد.  

مثال

<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>
خودتان امتحان کنيد »

 رزولوشن های صفحات نمایش

در W3.CSS برای واکنشگرا کردن میتوان از DP در صفحه نمایش استفاده کرد.

W3.CSS با آیفون 6 با رزولوشن750x1334 مانند صفحات کوچک با اندازه 375x667 pixel ،Dp رفتار می کند.

صفحه نمایش های کوچک  با کمتر از 601 پیکسل DP،  و صفحه نمایشهای  متوسط  با کمتر از 993 پیکسل DP هستند.

 

شبکه بندی دوازده ستونه واکنشگرا

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

شما  اطلاعات بیشتر در مورد شبکه ها را در فصل بعد یاد بگیرند.

نوشته شده توسط زهرا داوودی
بازدید: 3593