آموزش W3CSS

آموزش W3.CSS – طراحی واکنش گرا

W3.CSS  کلاس های خاصی برای ایجاد طراحی واکنش گرا داره.

نام کلاس

توضیحات

w3-half

Container را طوری تنظیم می کنه که در دستگاه های با صفحه نمایش متوسط یا بزرگ، 2/1 از پنچره را اشغال کنه. اگه صفحه نمایش کوچک تر از 601 پیکسل باشه، container به 100% تغییر سایز پیدا می کنه.

w3-third

Container را طوری تنظیم می کنه که در دستگاه های با صفحه نمایش متوسط یا بزرگ، 3/1 از پنچره را اشغال کنه. اگه صفحه نمایش کوچک تر از 601 پیکسل باشه، container به 100% تغییر سایز پیدا می کنه.

w3-quarter

Container را طوری تنظیم می کنه که در دستگاه های با صفحه نمایش متوسط یا بزرگ، 4/1 از پنچره را اشغال کنه. اگه صفحه نمایش کوچک تر از 601 پیکسل باشه، container به 100% تغییر سایز پیدا می کنه.

w3-col

در یک گریدِ 12 ستونهِ (12 column grid)، یک ستون تعریف می کنه.

w3-row

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

مثال

w3css_responsive_design.htm

<html>
   <head>
      <title>The W3.CSS Containers</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>   
		 <br/>
		 <div class="w3-row w3-border">
            <div class="w3-container w3-half w3-red">
               <h2>w3-half</h2>  
               <p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
            </div>
            <div class="w3-container w3-half">
               <h2>w3-half</h2>  
            </div>
          </div>          
        </div>	  
        <br/>		
		<div class="w3-row w3-border">
            <div class="w3-container w3-third w3-red">
               <h2>w3-third</h2>  
               <p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
            </div>
            <div class="w3-container w3-third">
               <h2>w3-third</h2>  
            </div>
          </div>          
        </div>	
        <br/>		
		<div class="w3-row w3-border">
            <div class="w3-container w3-quarter w3-red">
               <h2>w3-quarter</h2>  
               <p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
            </div>
            <div class="w3-container w3-quarter">
               <h2>w3-quarter</h2>  
            </div>
          </div>          
        </div>		
   </body>
</html>

خروجی

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

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

خبـرنــامه

Newsletters

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

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

مبحث آموزشی

آموزش W3CSS

Learn W3CSS

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

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

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

https://telegram.me/softskill_ir

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

خبـرنــامه

Newsletters

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

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

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

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