CSS — چارچوب های واکنش گرا (RWD Frameworks)

آخرین بروزرسانی: 1404/08/08

قبلی: ویدیوهای واکنش گرا (RWD Videos) بعدی: قالب های واکنش گرا (RWD Templates)

چارچوب های واکنش گرا (RWD Frameworks)

«چارچوب واکنش گرا (Responsive Framework)» یعنی یک بسته آماده CSS که چیدمان را در اندازه های مختلف سامان می دهد. بنابراین سایت روی موبایل، تبلت، و دسکتاپ درست می چیند.

استفاده از W3.CSS

W3.CSS یک چارچوب سبک است. شبکه واکنش گرا و کلاس های ساده می دهد. بنابراین ساخت صفحه واکنش گرا سریع تر می شود.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
  &lt;body&gt;
    &lt;div class="w3-container w3-blue"&gt;
      &lt;h1&gt;W3Schools Demo&lt;/h1&gt;
      &lt;p&gt;Resize this responsive page!&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="w3-row-padding"&gt;
      &lt;div class="w3-third"&gt;
        &lt;h2&gt;London&lt;/h2&gt;
        &lt;p&gt;London is the capital city of England.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="w3-third"&gt;
        &lt;h2&gt;Paris&lt;/h2&gt;
        &lt;p&gt;Paris is the capital of France.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="w3-third"&gt;
        &lt;h2&gt;Tokyo&lt;/h2&gt;
        &lt;p&gt;Tokyo is the capital of Japan.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

مشاهده در ادیتور

استفاده از Bootstrap

Bootstrap هم شبکه قدرتمند دارد. با کلاس های container و row و col ستون ها می سازد. بنابراین چیدمان منظم و واکنش گرا می شود.

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap 5 Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container-fluid p-5 bg-primary text-white text-center"&gt;
      &lt;h1&gt;My First Bootstrap Page&lt;/h1&gt;
      &lt;p&gt;Resize this responsive page to see the effect!&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="container mt-5"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;h3&gt;Column 1&lt;/h3&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;h3&gt;Column 2&lt;/h3&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;h3&gt;Column 3&lt;/h3&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

مشاهده در ادیتور

گام های عملی

meta viewport را در head بگذار.
چارچوب را با لینک CDN اضافه کن.
شبکه را با کلاس های ستون پیاده کن.

نکته: همیشه فاصله گذاری را بسنج. چون ستون های تودرتو سریع شلوغ می شوند.

جمع بندی سریع

W3.CSS ساده و سبک است.
Bootstrap امکانات و کامپوننت های بیشتر دارد.
هر دو شبکه واکنش گرا می دهند.
meta viewport را فراموش نکن.

ادامه مسیر: نما (Viewport)، چیدمان شبکه واکنش گرا، و پرس وجوهای رسانه ای. برای تصاویر هم بخش تصاویر واکنش گرا را ببین.