آموزش W3.CSS
W3.CSS چیست؟
w3.CSS یکی از فریم ورک های CSS است و توسط W3schools پیاده سازی شده است. بعد از لینک کردن فایل W3.CSS به صفحات پروژه تان، می توانید از الگوهای بسیار جذاب آن برای ساخت سایت های واکنشگرا استفاده نمایید.
- W3.CSS نسبت به دیگر فریم ورک ها مثل Bootstrap از حجم کمتری برخوردار است و در نتیجه سرعت لود صفحات افزایش پیدا خواهد کرد.
- یادگیری و استفاده از آن نسبت به دیگر فریم ورک ها (Bootstrap) آسان تر است.
- در پیاده سازی W3.CSS تنها از CSS استفاده شده است. (از JavaScript یا jQuery استفاده نشده)
- با استفاده از W3.CSS با سرعت و سادگی بیشتری می توانید طراحی کنید.
- زمانی که آنرا به صفحه لینک می کنید، بصورت پیش فرض، حالت واکنشگرا را پشتیبانی می کند.
- سایت تان در تمام مروگرهای اصلی مثل کروم, فایرفاکس, اینترنت اکسپلورر, سافاری و ... بدون مشکل کار خواهد کرد.
- W3.CSS در تمام دستگاه ها، مثل کامپیوتر, لپتاپ, تبلت و موبایل کار خواهد کرد.
W3.CSS رایگان است.
W3.CSS برای یادگیری و استفاده رایگان است و نیازی به تهیه ی لایسنس نیست.
آسان برای یادگیری
اولین مثال W3.CSS
<div class="w3-container w3-teal">
<h1>My Header</h1>
</div>
<img src="/img_car.jpg" alt="Car">
<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>
<div class="w3-container w3-teal">
<p>My Footer</p>
</div>
خودتان امتحان کنيد »<h1>My Header</h1>
</div>
<img src="/img_car.jpg" alt="Car">
<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>
<div class="w3-container w3-teal">
<p>My Footer</p>
</div>
لینک کردن W3.CSS به صفحات سایت
برای استفاده از W3.CSS در وب سایتتان, کافیست لینک W3.CSS را به صفحه ی وب سایتتان اضافه نمایید:
مثال
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.beyamooz.com/lib/w3.css">
خودتان امتحان کنيد »<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.beyamooz.com/lib/w3.css">
و یا میتوانید فایل w3.css را از خود سایت w3schools.com دانلود کرده و در پوشه ای در وبسایتتان قرار دهید.
مثال
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/w3.css">
خودتان امتحان کنيد »<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/w3.css">
قالب های وب سایتی w3.css
در لینک زیر تعدادی قالب واکنشگرا با w3.css درست شده است و شما آزادید که این قالب هارا تغییر بدید, سیو کنید, به اشتراک بگذارید, استفاده کنید و یا هرکاری که میخواهید با آنها انجام دهید:
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 27245