به آموزشگاه مجازی سینا خوش آمدید!

آموزش فریم ورک ها در واکنش گرایی در CSS

امتیاز
(0)

در حال حاضر فریم ورک های CSS رایگان زیادی وجود دارند که واکنش گرایی را به ما ارائه می دهند. 

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

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

مثال شماره 1

<html>
<title>W3.CSS</title>
<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-blue">
  <h1>آموزشگاه مجازی سینا</h1> 
  <p>این صفحه ی واکنش گرا را تغییر اندازه دهید!</p> 
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>شیراز</h2>
    <p>شیراز کلان شهری در ایران و مرکز استان فارس در جنوب ایران است.</p>
    <p>شیراز از دیرباز به واسطهٔ مرکزیت نسبی اش در منطقهٔ زاگرس جنوبی و واقع شدن در یک منطقهٔ به نسبت حاصل خیز، محلی طبیعی برای مبادلات محلی کالا بین کشاورزان، یک جانشینان و عشایر بوده است. </p>
  </div>

  <div class="w3-third">
    <h2>اصفهان</h2>
    <p>اصفهان کلان شهری در مرکز ایران، مرکز استان اصفهان و نیز شهرستان اصفهان است.</p> 
    <p>کلان شهر اصفهان نیز با ۱۵ منطقه شهری، پس از تهران و مشهد سومین کلانشهر بزرگ ایران از دید گستره فضای شهری است.</p>
  </div>

  <div class="w3-third">
    <h2>تهران</h2>
    <p>پرجمعیت ترین شهر و پایتخت کشور ایران، مرکز استان تهران و شهرستان تهران است.</p>
    <p>پیشینهٔ زندگی در تهران به دوران نوسنگی برمی گردد و کاوش های باستان شناسی صورت گرفته در تهران، منجر به کشف اسکلت های ۷۰۰۰ سالهٔ انسان و ابزارهای سنگی شده است.</p>
  </div>
</div>

</body>
</html>
امتحان کنید

استفاده از بوت استرپ(Bootstrap)

یک فریم ورک محبوب دیگر، بوت استرپ نام دارد. که از HTML و CSS برای ایجاد صفحات وب واکنش گرا استفاده می کند:

مثال شماره 2

<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <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>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>اولین صفحه بوت استرپ من</h1>
  <p>این صفحه ی واکنش گرا را تغییر اندازه دهید تا نتیجه را مشاهده کنید.</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>شیراز</h3>
      <p>شیراز کلان شهری در ایران و مرکز استان فارس در جنوب ایران است.</p>
      <p>شیراز از دیرباز محلی طبیعی برای مبادلات محلی کالا بین کشاورزان، یک جانشینان و عشایر بوده است.</p>
    </div>
    <div class="col-sm-4">
      <h3>اصفهان</h3>
      <p>اصفهان کلان شهری در مرکز ایران، مرکز استان اصفهان و نیز شهرستان اصفهان است.</p>
      <p>اصفهان  پس از تهران و مشهد سومین کلانشهر بزرگ ایران از دید گستره فضای شهری است.</p>
    </div>
    <div class="col-sm-4">
      <h3>تهران</h3>        
      <p>پرجمعیت ترین شهر و پایتخت کشور ایران، مرکز استان تهران و شهرستان تهران است.</p>
      <p>پیشینهٔ زندگی در تهران به دوران نوسنگی برمی گردد و کاوش ها منجر به کشف ابزارهای سنگی شده است.</p>
    </div>
  </div>
</div>

</body>
</html>
امتحان کنید

 

 

منبع: https://www.w3schools.com/css

 

  • بازدید: 82

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال