آموزش W3CSS

آموزش W3.CSS – کار با Gridها

W3.CSS یک grid واکنش گرایِ 12 column fluid ارائه میده.

این grid برای تعریف سطرها و ستون ها به ترتیب از w3-row و w3-col استفاده می کنه.

نام کلاس

توضیحات

w3-row

یک padding-less container تعریف می کنه که برای ستون های واکنش گرا استفاده می شه. این کلاس به کلاس های واکنش گرا الزام می کنه که به طور کامل واکنش گرا باشن.

w3-col

با زیرکلاس ها، یک ستون تعریف می کنه. 


W3-col چندین زیرکلاس، برای انواع مختلف صفحه نمایش داره.

ستون ها برای دستگاه های با صفحه نمایش کوچک

در زیر لیستی از استایل های مربوط به ستون ها برای دستگاه های با صفحه نمایش کوچک (معمولاً تلفن های هوشمند) آورده شده:

نام کلاس

توضیحات

s1

1 ستون از 12 ستون را با 08.33% پهنا (عرض) تعریف می کنه.

s2

2 ستون از 12 ستون را با 16.66% پهنا (عرض) تعریف می کنه.

s3

3 ستون از 12 ستون را با 25.00% پهنا (عرض) تعریف می کنه.

s4

4 ستون از 12 ستون را با 33.33% پهنا (عرض) تعریف می کنه.

s5 - s11

 

s12

12 ستون از 12 ستون را با 100% پهنا (عرض) تعریف می کنه. کلاس پیش فرض برای تلفن های با صفحه نمایش کوچک.

  

ستون ها برای دستگاه های با صفحه نمایش متوسط

در زیر لیستی از استایل های مربوط به ستون ها برای دستگاه های با صفحه نمایش متوسط (معمولاً تبلت ها) آورده شده:

نام کلاس

توضیحات

m1

1 ستون از 12 ستون را با 08.33% پهنا (عرض) تعریف می کنه.

m2

2 ستون از 12 ستون را با 16.66% پهنا (عرض) تعریف می کنه.

m3

3 ستون از 12 ستون را با 25.00% پهنا (عرض) تعریف می کنه.

m4

4 ستون از 12 ستون را با 33.33% پهنا (عرض) تعریف می کنه.

m5 –m11

 

m12

12 ستون از 12 ستون را با 100% پهنا (عرض) تعریف می کنه. کلاس پیش فرض برای تلفن های با صفحه نمایش متوسط.

 

 ستون ها برای دستگاه های با صفحه نمایش بزرگ

در زیر لیستی از استایل های مربوط به ستون ها برای دستگاه های با صفحه نمایش بزرگ (معمولاً لپ تاپ ها) آورده شده:

نام کلاس

توضیحات

l1

1 ستون از 12 ستون را با 08.33% پهنا (عرض) تعریف می کنه.

l2

2 ستون از 12 ستون را با 16.66% پهنا (عرض) تعریف می کنه.

l3

3 ستون از 12 ستون را با 25.00% پهنا (عرض) تعریف می کنه.

l4

4 ستون از 12 ستون را با 33.33% پهنا (عرض) تعریف می کنه.

l5 –l11

 

l12

12 ستون از 12 ستون را با 100% پهنا (عرض) تعریف می کنه. کلاس پیش فرض برای دستگاه های با صفحه نمایش بزرگ.

 

کاربرد

هر زیرکلاس، تعداد ستون هایِ Grid را برای استفاده بر اساس نوع دستگاه مشخص می کنه. قطعه کدِ HTML زیر را در نظر بگیرین.

<div class="w3-row">
   <div class="w3-col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
   </div>
</div>

اگه از زیرکلاس در کلاس خصیصه ی (attribute) عنصرِ HTML استفاده نمی شد، تعداد ستون های پیش فرض مورد استفاده، 12 بود.

مثال

w3css_grids.htm

<html>
   <head>
      <title>The W3.CSS Grids</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
   </head>
   <body> 
     
         <header class="w3-container w3-teal">   
            <h2>Mobile First Design Demo</h2>  
            <p class="w3-large">Resize the window to see the effect!</p>			
         </header>   
         <div class="w3-row">
            <div class="w3-col m1 w3-center w3-grey">1</div>
            <div class="w3-col m1 w3-center">2</div>
            <div class="w3-col m1 w3-center w3-grey">3</div>
            <div class="w3-col m1 w3-center">4</div>
            <div class="w3-col m1 w3-center w3-grey">5</div>
            <div class="w3-col m1 w3-center">6</div>
            <div class="w3-col m1 w3-center w3-grey">7</div>
            <div class="w3-col m1 w3-center">8</div>
            <div class="w3-col m1 w3-center w3-grey">9</div>
            <div class="w3-col m1 w3-center">10</div>
            <div class="w3-col m1 w3-center w3-grey">11</div>
            <div class="w3-col m1 w3-center">12</div>
         </div>
         <div class="w3-row">
            <div class="w3-col w3-container m4 l3 w3-yellow">
               <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
            </div>
            <div class="w3-col w3-container s4 m8 l9">  
               <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
         </div>
         </div>
   </body>
</html>

خروجی کد بالا بصورت زیر خواهد بود.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش W3CSS

Learn W3CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...