۱۸
آبان

جلسه ۶۹ : آشنایی با فریم ورک ها برای طراحی واکنش گرا

دسته‌بندی‌ها :

جزئیات
نوع مطلبآموزشی

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم . به آشنایی با انواع فریم ورک های Responsive آماده ، برای طراحی Responsive ، قالب وب سایت بپردازیم. در مطالب آموزشی قبل ، تا حدودی با ویژگی Responsive ، و چگونگی استفاده از این ویژگی در صفحات وب، آشنا شدید. و همچنین Responsive کردن عناصر html مهم، ر ادر قالب وب سایت ارائه کردیم.

در آموزشهای بخش Responsive در css، به موضوعات مهم و کاربردی استفاده از تنظیمات viewport در css ، استفاده از grid-view در css ، responsive کردن عکس ها در css و همچنین چگونگی responsive کردن ویدئوها در css ،در طراحی قالب وب سایت پرداختیم.

در ادامه آموزشهای Responsive در css ، در این پست ، به آشنایی با انواع فریم ورک های Responsive آماده . برای Responsive کردن قالب وب سایت پرداخته ایم.

bootstrap

انواع فریم ورک های Responsive آماده

فریم ورک های آماده زیادی برای اعمال ویژگی Responsive. روی طراحی قالب وب سایت وجود دارد.

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

در این پست ، ما به دو نمونه از معتبرترین و مهم ترین فریم ورک های Responsive قالب وب سایت ، اشاره کرده ایم.

W3.CSS
Bootstrap

فریم ورک W3.CSS

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

این فرم ورک، برای توسعه سایت ها ، در هر اندازه ای در دستگاهای مختلف، مناسب است.

مثال:

مثال : فریم ورک w3

<!DOCTYPE html>
<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>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>W3Schools Demo</h1>

<p>Resize this responsive page!</p>

</div>

<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>

<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>

<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>

</body>

</html>

خودتان امتحان کنید »

فریم ورک Bootstrap

فریم ورک مشهور دیگر ، Bootstrap است . این فریم ورک از HTML, CSS و jQuery . برای Responsive کردن. قالب وب سایت، استفاده می کند.

مثال:

مثال : فریم ورک bootstrap

<!DOCTYPE html>
<html lang="en">
<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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h1>My First Bootstrap Page</h1>

</div>

...

</div>

...

</div>

...

</div>

</body>

</html>

خودتان امتحان کنید »

کلام آخر

آماده کردن وب سایت های رسپانسیو با کدهای CSS بصورت دستی زمان زیادی خواهد برد، اما فریم ورک های آماده برای رسپانسیو قالب وب سایت این کار را بسیار ساده کرده اند، از این رو در این بخش شما را با انواع فریم ورک های Responsive آماده آشنا کرده ایم.

QR: جلسه ۶۹ : آشنایی با فریم ورک ها برای طراحی واکنش گرا

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۶۹ : آشنایی با فریم ورک ها برای طراحی واکنش گرا

مقدمه

انواع فریم ورک های Responsive آماده

فریم ورک W3.CSS

فریم ورک Bootstrap

کلام آخر

لیست مطالب دوره

آموزش های پیشرفته CSS

گریدبندی در css

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ