رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

ظروف

کانتینرها یک بلوک ساختمانی اساسی از Bootstrap هستند که محتوای شما را در یک دستگاه یا درگاه نمایشی خاص حاوی، پد، و تراز می کنند.

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

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

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

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

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

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

بسیار کوچک
<576 پیکسل
کوچک
≥576 پیکسل
متوسط
​​≥768 پیکسل
بزرگ
≥992 پیکسل
X-Large
≥1200px
XX-Large
≥1400px
.container 100% 540 پیکسل 720 پیکسل 960 پیکسل 1140 پیکسل 1320 پیکسل
.container-sm 100% 540 پیکسل 720 پیکسل 960 پیکسل 1140 پیکسل 1320 پیکسل
.container-md 100% 100% 720 پیکسل 960 پیکسل 1140 پیکسل 1320 پیکسل
.container-lg 100% 100% 100% 960 پیکسل 1140 پیکسل 1320 پیکسل
.container-xl 100% 100% 100% 100% 1140 پیکسل 1320 پیکسل
.container-xxl 100% 100% 100% 100% 100% 1320 پیکسل
.container-fluid 100% 100% 100% 100% 100% 100%

ظرف پیش فرض

کلاس پیش فرض ما .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 مراجعه کنید.