فاصله گذاری

بوت استرپ شامل طیف گسترده ای از کلاس های کاربردی حاشیه و padding پاسخگو برای تغییر ظاهر یک عنصر است.

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

به یک عنصر یا زیرمجموعه ای از کناره های آن با کلاس های کوتاه نویسی، مقادیر marginیا Responsive-friendly نسبت دهید. paddingشامل پشتیبانی از ویژگی های فردی، همه ویژگی ها، و ویژگی های عمودی و افقی است. کلاس ها از یک نقشه پیش فرض Sass ساخته می شوند که از .25remتا 3rem.

نشانه گذاری

ابزارهای فاصله گذاری که برای همه نقاط شکست، از xsتا xl، اعمال می شوند، هیچ علامت اختصاری نقطه شکست در آنها وجود ندارد. این به این دلیل است که آن کلاس‌ها از min-width: 0و بالاتر اعمال می‌شوند، و بنابراین توسط یک درخواست رسانه محدود نمی‌شوند. با این حال، نقاط شکست باقیمانده شامل یک مخفف نقطه شکست هستند.

کلاس ها با استفاده از فرمت {property}{sides}-{size}برای xsو {property}{sides}-{breakpoint}-{size}برای sm،،، mdو نامگذاری می lgشوند xl.

جایی که ملک یکی از موارد زیر است:

• m- برای کلاس هایی که مجموعهmargin
• p- برای کلاس هایی که مجموعهpadding

جایی که طرف ها یکی از موارد زیر است:

• t- برای کلاس هایی که مجموعه margin-topیاpadding-top
• b- برای کلاس هایی که مجموعه margin-bottomیاpadding-bottom
• l- برای کلاس هایی که مجموعه margin-leftیاpadding-left
• r- برای کلاس هایی که مجموعه margin-rightیاpadding-right
• x- برای کلاس هایی که هر دو *-leftو*-right
• y- برای کلاس هایی که هر دو *-topو*-bottom
• خالی - برای کلاس هایی که یک marginیا paddingدر هر 4 طرف عنصر را تنظیم می کنند

جایی که اندازه یکی از موارد زیر است:

• 0- برای کلاس هایی که marginیا paddingبا تنظیم آن را حذف می کنند0
• 1- (به طور پیش فرض) برای کلاس هایی که marginیا paddingرا تنظیم می کنند$spacer * .25
• 2- (به طور پیش فرض) برای کلاس هایی که marginیا paddingرا تنظیم می کنند$spacer * .5
• 3- (به طور پیش فرض) برای کلاس هایی که marginیا paddingرا تنظیم می کنند$spacer
• 4- (به طور پیش فرض) برای کلاس هایی که marginیا paddingرا تنظیم می کنند$spacer * 1.5
• 5- (به طور پیش فرض) برای کلاس هایی که marginیا paddingرا تنظیم می کنند$spacer * 3
• auto- برای کلاس هایی که روی marginخودکار تنظیم می کنند

(شما می توانید اندازه های بیشتری را با افزودن ورودی به $spacersمتغیر Sass map اضافه کنید.)

مثال ها

در اینجا چند نمونه نماینده از این کلاس ها آورده شده است:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

مرکز افقی

علاوه بر این، Bootstrap همچنین شامل یک .mx-autoکلاس برای متمرکز کردن افقی محتوای سطح بلوک با عرض ثابت - یعنی محتوایی که دارد display: blockو یک widthمجموعه - با تنظیم حاشیه‌های افقی روی auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>