فریم ورک واکنش گرا (RWD Frameworks)
«فریم ورک واکنش گرا» مجموعه ای از کلاس ها و الگوهای آماده است که با HTML و CSS ظاهر سایت را در همه اندازه ها سازگار می کند. در این صفحه دو نمونه رایگانِ پرکاربرد را می بینید و یاد می گیرید چگونه سریع شروع کنید.
استفاده از فریم ورک واکنش گرا W3.CSS
W3.CSS یک استایل شیت واکنش گراست که توسعه سایت های خوش نما را ساده می کند. تنها با افزودن لینک CDN و رعایت ویوپورت، چیدمان شما در ردیف ها و ستون ها مقیاس پذیر می شود.
<!-- افزودن ویوپورت و W3.CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container w3-blue">
<h1>W3.CSS Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">...</div>
<div class="w3-third">...</div>
<div class="w3-third">...</div>
</div>نکته: برای آشنایی با ویدئو و تصاویر واکنش گرا نیز به ویدئوی واکنش گرا سر بزنید.
فریم ورک واکنش گرا Bootstrap
Bootstrap با شبکه سیستمی و ابزارک های آماده، ساخت صفحات واکنش گرا را ممکن می کند. کافی است CSS و اسکریپت باندل را اضافه کنید و از کلاس های grid استفاده نمایید.
<!-- Bootstrap 5 starter -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>
</div>مسیر بعدی با فریم ورک واکنش گرا
برای الگوهای آماده می توانید به قالب های RWD مراجعه کنید. همچنین برای درک بهتر، بخش فریم ورک واکنش گرا را به عنوان مرجع سریع نگه دارید.
هشدار: اندازه ها را فقط با پیکسل ثابت نسازید؛ بهتر است از شبکه ها و کلاس های واکنش گرا استفاده کنید تا در دستگاه های کوچک بشکند.