ظروف
کانتینرها یک بلوک ساختمانی اساسی از 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-width
s را برای هر یک از نقاط شکست بالاتر اعمال می کنیم. به عنوان مثال، .container-sm
100٪ عرض است تا شروع شود تا به 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 مراجعه کنید.