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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
شبکه‌بندی
۱سیستم شبکه‌بندی
۲stacked/افقی
۳شبکه‌بندی خیلی‌کوچک
۴شبکه‌بندی کوچک
۵شبکه‌بندی متوسط
۶شبکه‌بندی بزرگ
۷شبکه‌بندی خیلی‌بزرگ
۸مثال‌های شبکه‌بندی
Theme
مرجع

مثال شبکه بندی متوسط

خیلی کوچک کوچک متوسط بزرگ خیلی بزرگ
پیشوند کلاس .col- .col-sm- .col-md- .col-lg- .col-xl-
عرض صفحه نمایش <576px >=576px >=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- را جستجو کرده و از آنها استفاده کنید.»

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

مثال

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>


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


نکته: مطمئن شوید که مجموع کلی همیشه حداکثر ۱۲ یا کمتر باشد (لزومی ندارد که از همهٔ ۱۲ ستون موجود استفاده کنید):

فقط از اندازه متوسط استفاده کنید

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

مثال

<div class="row">
  <div class="col-md-6">
    <p>Lorem ipsum...</p>
  </div>
  <div class="col-md-6">
    <p>Sed ut perspiciatis...</p>
  </div>
</div>


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


ستون‌هایی با چیدمان خودکار (Auto Layout)

در بوت استرپ ۴، روش ساده ای برای ایجاد ستون‌هایی با عرض مساوی در همهٔ دستگاه‌ها وجود دارد: تنها باید عدد را از .col-md-* حذف کنید و فقط از کلاس .col-md با تعداد مشخصی از عناصر col استفاده کنید. بوت استرپ تشخیص خواهد داد چند ستون وجود دارد و هر ستون عرض برابر می‌گیرد.

اگر سایز صفحه نمایش کمتر از ۷۶۸ پیکسل باشد، ستون‌ها بطور افقی بالای هم (stack) قرار می‌گیرند:

<!-- Two columns: 50% width on medium and up-->
<div class="row">
  <div class="col-md">1 of 2</div>
  <div class="col-md">2 of 2</div>
</div>

<!-- Four columns: 25% width on medium and up -->
<div class="row">
  <div class="col-md">1 of 4</div>
  <div class="col-md">2 of 4</div>
  <div class="col-md">3 of 4</div>
  <div class="col-md">4 of 4</div>
</div>


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


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


منابع آموزشی