طراحی وب واکنش‌گرا - چارچوب‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


Framework (به فارسی: چارچوب)های CSS زیادی وجود دارند که طراحی واکنش گرا را ارائه می‌دهند.[۱]

آنها رایگان هستند، و استفاده از آنها آسان است.

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

یک روش عالی برای ساخت طراحی واکنش گرا، استفاده از یک style sheet واکنش گرا، مانند W3.CSS است.

W3.CSS توسعه سایت‌هایی که در هر اندازه ای خوب بنظر برسند؛ مانند دستگاه‌های رومیزی، لب‌تاب، تبلت، یا را آسان کرده‌است:

مثال

<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-green">
  <h1>W3Schools Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>

</body>


برای یادگیری مطالب در مورد W3.CSS، آموزش W3.CSS ما را مطالع کنید.

Bootstrap

چارچوب محبوب دیگر Bootstrap است، این چارچوب از HTML ,CSS، و جی کوئری برای واکنش گرا کردن صفحات وب استفاده می‌کند.

مثال

<!DOCTYPE html>

<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>


برای یادگیری مطالب در مورد بوت استرپ، آموزش بوت استرپ ما را مطالعه کنید.

منابع آموزشی