٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

طراحی وب پاسخگو – چارچوب ها

بسیاری از چارچوب های CSS رایگان وجود دارد که طراحی پاسخگو را ارائه می دهند. با استفاده از W3.CSS یک راه عالی برای ایجاد یک طراحی پاسخگو ، استفاده از یک صفحه سبک پاسخگو ، مانند W3.CSS است W3.CSS توسعه سایتهایی…

محمد یوسفی

16 جولای 2021

بسیاری از چارچوب های CSS رایگان وجود دارد که طراحی پاسخگو را ارائه می دهند.


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

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

W3.CSS توسعه سایتهایی را که از هر اندازه زیبا به نظر می رسند آسان می کند!

مثال

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

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


بوت استرپ

چارچوب محبوب دیگر Bootstrap است ، از HTML ، CSS و jQuery برای ایجاد صفحات وب پاسخگو استفاده می کند.

مثال

<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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>

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها