قالب های واکنش گرا (RWD Templates)
«قالب واکنش گرا (Responsive Template)» یعنی صفحه با اندازه نمایشگر هماهنگ شود. بنابراین روی موبایل و دسکتاپ همه چیز خواناست. این صفحه چند دمو آماده با چارچوب W3.CSS معرفی می کند.
نمونه های پرکاربرد W3.CSS
این دموها آزادند؛ می توانی تغییر دهی، ذخیره کنی، و در پروژه ها استفاده کنی. سپس با «Try it» کد را زنده ببین.
نمونه 1: Band Template
<a href="https://www.w3schools.com/w3css/tryw3css_templates_band.htm" target="_blank">Demo: Band Template</a>
نمونه 2: Blog Template
<a href="https://www.w3schools.com/w3css/tryw3css_templates_blog.htm" target="_blank">Demo: Blog Template</a>
نمونه 3: Portfolio Template
<a href="https://www.w3schools.com/w3css/tryw3css_templates_portfolio.htm" target="_blank">Demo: Portfolio Template</a>
نمونه 4: Startup Template
<a href="https://www.w3schools.com/w3css/tryw3css_templates_startup.htm" target="_blank">Demo: Startup Template</a>
گام های راه اندازی سریع
الان یک قالب انتخاب کن و سریع شخصی سازی کن. سپس نتیجه را تست کن.
- یکی از دموها را باز کن.
- روی «Try it Yourself» کلیک کن.
- تیتر و منو را ویرایش کن.
- تصاویر را سبک و مناسب کن.
- فایل ها را ذخیره و منتشر کن.
نکته: «واکنش گرا (Responsive)» یعنی چیدمان با عرض صفحه تغییر می کند؛ مانند عوض شدن چیدمان نیمکت ها برای کلاس کوچک.
جمع بندی سریع
- قالب واکنش گرا شروع پروژه را سریع می کند.
- Try it ویرایش زنده را ساده می کند.
- تصاویر سبک، سرعت بارگذاری را بهتر می کنند.
- W3.CSS ساده و کاربردی است.
برای ادامه، صفحه قالب واکنش گرا و تصاویر واکنش گرا را ببین. سپس برای چیدمان حرفه ای، به Grid سر بزن.