شبکه‌بندی بزرگ

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
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 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

اما بهتر است در دستگاه‌های بزرگ از طراحی ۳۳٪-۶۶٪ استفاده کنیم.

دستگاه‌های بزرگ بعنوان صفحه نمایش‌هایی با عرض ۹۹۲ پیکسل تا ۱۱۹۹ پیکسل تعریف می‌شوند.

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

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

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

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

مثال

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


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


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

فقط از اندازه بزرگ استفاده کنید

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

مثال

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


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


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

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

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

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

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


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



منابع آموزشی