ظروف

چگونه کار می کنند

کانتینرها اساسی ترین عنصر چیدمان در بوت استرپ هستند و هنگام استفاده از سیستم شبکه پیش فرض ما مورد نیاز هستند . کانتینرها برای محتوی، بالشتک کردن و (گاهی) وسط محتوای درون خود استفاده می شوند. در حالی که ظروف را می توان تو در تو قرار داد، اما اکثر چیدمان ها به ظرف تو در تو نیاز ندارند.

Bootstrap دارای سه کانتینر مختلف است:

• .container، که max-widthدر هر نقطه شکست پاسخگو یک عدد تعیین می کند
• .container-fluid، که width: 100%در تمام نقاط شکست است
• .container-{breakpoint}، که width: 100%تا نقطه شکست مشخص شده است

جدول زیر نحوه max-widthمقایسه هر کانتینر با نمونه اصلی .containerو .container-fluidدر هر نقطه شکست را نشان می دهد.

آنها را در عمل ببینید و در مثال Grid ما مقایسه کنید .

ظرف پیش فرض

کلاس پیش فرض ما .containerیک ظرف با عرض ثابت پاسخگو است، به این معنی که max-widthدر هر نقطه شکست تغییر می کند.

<div class="container">
  <!-- Content here -->
</div>

ظروف پاسخگو

کانتینرهای پاسخگو به شما این امکان را می دهند که کلاسی را مشخص کنید که 100٪ عرض دارد تا زمانی که به نقطه شکست مشخص شده برسد، پس از آن ما max-widths را برای هر یک از نقاط شکست بالاتر اعمال می کنیم. به عنوان مثال، .container-sm100٪ عرض است تا شروع شود تا به smنقطه شکست برسد، جایی که با md, lg, xlو xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

ظروف مایع

برای .container-fluidیک کانتینر با عرض کامل استفاده کنید، که کل عرض درگاه دید را در بر می گیرد.

<div class="container-fluid">
  ...
</div>

ساس

همانطور که در بالا نشان داده شد، بوت استرپ یک سری کلاس های کانتینری از پیش تعریف شده ایجاد می کند تا به شما در ایجاد طرح بندی های مورد نظرتان کمک کند. می‌توانید این کلاس‌های کانتینر از پیش تعریف‌شده را با تغییر نقشه Sass (موجود در _variables.scss) که به آنها قدرت می‌دهد، سفارشی کنید:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

علاوه بر سفارشی کردن Sass، شما همچنین می توانید ظروف خود را با Sass mixin ما ایجاد کنید.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

برای اطلاعات بیشتر و مثال‌هایی درباره نحوه اصلاح نقشه‌ها و متغیرهای Sass، لطفاً به بخش Sass در مستندات Grid مراجعه کنید.