شبکه‌بندی دستگاه‌های متوسط

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
خیلی کوچک کوچک متوسط بزرگ
پیشوند کلاس .col-xs .col-sm .col-md .col-lg
عرض صفحه نمایش <768px >=768px >=992px >=1200px

در بخش قبلی، مثالی از شبکه بندی با کلاس‌هایی برای دستگاه‌های کوچک ارائه کردیم. از دو div (ستون) استفاده کرده و یه آنها تقسیم بندی ۲۵٪-۷۵٪ دادیم.[۱]

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

اما در دستگاه‌های متوسط ممکن است طراحی با تقسیم بندی ۵۰٪-۵۰٪ بهتر باشد.

نکته: دستگاه‌های متوسط بعنوان دستگاه‌های دارای ۹۹۲ پیکسل تا ۱۱۹۹ پیکسل تعریف می‌شوند.

برای دستگاه‌های متوسط از کلاس‌های .col-md-* استفاده می‌کنیم.

اکنون عرض ستون‌ها را برای دستگاه‌های متوسط اضافه می‌کنیم:

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

حال بوت استرپ خواهد گفت «برای سایزهای کوچک به دنبال کلاس‌هایی با عبارت -sm- بگردید و از آنها استفاده کنید. در دستگاه‌های متوسط، کلاس‌های دارای عبارت -md- را جستجو کرده و از آنها استفاده کنید».

مثال زیر منجر به ایجاد تقسیم بندی ۷۵٪-۲۵٪ در دستگاه‌های کوچک و تقسیم بندی ۵۰٪-۵۰٪ در دستگاه‌های متوسط (و بزرگ) می‌شود. در دستگاه‌های بسیار کوچک، بطور خودکار به حالت پشته‌ای تبدیل می‌شود (۱۰۰٪).

مثال

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

مشاهدهٔ نتیجه

توجه: مطمئن شوید که همیشه مجموع حداکثر ۱۲ شود.

فقط از کلاس متوسط (Medium) استفاده شود

در مثال پایین، فقط کلاس .col-md-6 را به کار برده‌ایم (بدون استفاده از .col-sm-*). این یعنی دستگاه‌های متوسط، بزرگ و خیلی بزرگ تقسیم‌بندی ۵۰٪-۵۰٪ دارند زیرا کلاس افزایش مقیاس می‌دهد. با این حال، برای دستگاه‌های کوچک، بطور عمودی بالای هم (stack vertically) قرار می‌گیرد (عرض ۱۰۰٪):

مثال

<div class="row">
  <div class="col-md-6" style="background-color:yellow;">
    <p>Lorem ipsum...</p>
  </div>
  <div class="col-md-6" style="background-color:pink;">
    <p>Sed ut perspiciatis...</p>
  </div>
</div>


مشاهدهٔ نتیجه


بخش بعدی نحوهٔ اضافه کردن درصد تقسیم‌بندی‌های متفاوت در دستگاه‌های بزرگ را نشان می‌دهد.

منابع آموزشی