آموزش W3CSS

آموزش W3CSS – ابزارهای کاربردی (Utilities)

W3.CSS چندین کلاس utility داره که برای رفع نیازهای روزانه‌ی طراحان بسیار مفید و کارآمد هستن.

  • Color utility classes – مثال‌ها: w3-red, w3-yellow
  • Padding utility classes - مثال‌ها: w3-padding-jumbo, w3-padding-16
  • Margin utility classes – مثال‌ها: w3-margin-8, w3-margin-64
  • Border utility class - مثال‌ها: w3-border-left, w3-border-right
  • Size utility classes – مثال‌ها: w3-tiny, w3-small
  • Circle utility class – مثال‌: w3-circle
  • Center utility class - مثال‌: w3-center

مثال

w3css_utilities.htm

<html>
   <head>
      <title>The W3.CSS Utilities</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">	 
   </head>
   <body class="w3-container"> 
      <h2>W3.CSS Utilities</h2>
      <hr/>
	  <h3>Color Utilities Demo</h3>
      <div class="w3-container w3-red">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
	  </div>
	  <div class="w3-container w3-green">
		 <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
	  <h3>Padding Utilities Demo</h3>
     <div class="w3-container w3-red  w3-padding-jumbo">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
	  </div>
	  <div class="w3-container w3-green w3-padding-16">
		 <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
	  <h3>Margin Utilities Demo</h3>
      <div class="w3-container w3-margin-64">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
	  </div>
	  <div class="w3-container w3-margin-8">
		 <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
	  <h3>Border Utilities Demo</h3>
      <div class="w3-container w3-red w3-border-left w3-border-right">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
	  </div>
	  <div class="w3-container w3-green w3-border">
		 <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
	  <h3>Size Utilities Demo</h3>
      <div class="w3-container">
         <p class="w3-small">Using w3-small font.</p>
         <p>Using Default (medium).</p>
         <p class="w3-large">Using w3-large font.</p>
         <p class="w3-xlarge">Using w3-xlarge font.</p>
      </div>
	  <h3>Circle Utility Demo</h3>
	  <div class="w3-container">
        <img src="html5-mini-logo.jpg" alt="html5" class="w3-circle">           
      </div>
	  <h3>Center Utility Demo</h3>
	  <div class="w3-container w3-center w3-black w3-card-2">
        <img src="html5-mini-logo.jpg" class="w3-circle" alt="html5">           
      </div>
   </body>
</html>

نتیجه

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

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

خبـرنــامه

Newsletters

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

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

مبحث آموزشی

آموزش W3CSS

Learn W3CSS

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

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

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

https://telegram.me/softskill_ir

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

خبـرنــامه

Newsletters

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

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

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

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