۲۲
مرداد

جلسه ۳۴ : طراحی grid برای دستگاه های کوچک

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

جزئیات
نوع محتواآموزش تصویری

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. تاکنون با کلیات سیستم Grid در Bootstrap 3 ، آشنا شدید. محور اصلی مباحث این بخش و مباحث کلی فصل جاری، بررسی کلاسهای سیستم شبکه بندی در Bootstrap 3 ، خواهد بود. که این مباحث را در آموزش این بخش، با بررسی طراحی grid برای دستگاه های کوچک در Bootstrap 3 آغاز می کنیم.

طراحی grid برای دستگاه های کوچک در Bootstrap 3

فرض کنید ما یک طرح ساده با دو ستون داریم. ما می خواهیم که ستونها با عرض ۲۵٪ و ۷۵٪ برای همه دستگاه ها، تنظیم شود.

کد تقسیم بندی فوق، بصورت زیر خواهد بود:

نکته:دستگاههای با عرض صفحه نمایش بین ۷۶۸ pixels و ۹۹۱ pixels دستگاه کوچک محسوب می شود.

برای طراحی تنظیم سیستم grid متناسب با دستگاههای کوچک از سری کلاسهای .col-sm-* استفاده می شود.

ما از سری کلاسهای فوق برای ایجاد دو ستون استفاده می کنیم:

مثال :

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

1 2	<div class="col-sm-3">....</div> <div class="col-sm-9">....</div>

سپس bootsrtap در دستگاههای کوچ از طراحی های کلاس -sm- استفاده می کند.

کد مثال زیر یک طراحی دو ستونی با تقسیم بندی ۲۵%/۷۵% در دستگاههای کوچک (متوسط ، بزرگ و خیلی بزرگ) ایجاد می کند.

طراحی فوق، در دستگاههای خیلی کوچک با عرض ۱۰۰% برای هر کدام از دو عنصر و بصورت یک ستون عمودی نمایش داده می شود.

طراحی grid برای دستگاههای کوچک در Bootstrap 3

مثال:

مثال :

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

<h1>Hello World!</h1>

<p>Lorem ipsum...</p>

</div>

<p>Sed ut perspiciatis...</p>

</div>

نکته: مجموع اعداد ستون ها در هر سطر نباید از ۱۲ بیشتر باشد.

برای تقسیم بندی ۳۳٫۳%/۶۶٫۶% در دو عنصر، می توانید از کلاسهای .col-sm-4 و .col-sm-8 استفاده کنید:

تقسیم بندی ۳۳٫۳%/۶۶٫۶%

مثال:

مثال :

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-4" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-8" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

<h1>Hello World!</h1>

<p>Lorem ipsum...</p>

</div>

<p>Sed ut perspiciatis...</p>

</div>

کلام آخر

در این آموزش ،با مرور مباحث طراحی grid برای دستگاههای کوچک در Bootstrap 3 شما را با چگونگی طراحی قالب وب سایت متناسب با عرض صفحه نمایش دستگاههای کوچک مانند تبلت و نمایشگرهای بزرگتر بخوبی آشنا کردیم.

در بخش بعدی به چگونگی استفاده از grid برای طراحی متناسب با دستگاههای متوسط خواهیم پرداخت.

QR: جلسه ۳۴ : طراحی grid برای دستگاه های کوچک

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

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

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

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

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

جلسه ۳۴ : طراحی grid برای دستگاه های کوچک

مقدمه

طراحی grid برای دستگاه های کوچک در Bootstrap 3

کلام آخر

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

آموزش بوت استرپ 3

سیستم grid در Bootstrap 3

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ