فاصله گذاری

بوت استرپ شامل طیف گسترده ای از کلاس های کاربردی حاشیه و 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>

حاشیه منفی

در CSS، marginویژگی ها می توانند از مقادیر منفی ( paddingنمی تواند) استفاده کنند. 1از 4.2 ، ما ابزارهای حاشیه منفی را برای هر اندازه عدد صحیح غیرصفر فهرست شده در بالا اضافه کرده ایم (به عنوان مثال 2،،،،،، . این ابزارها برای سفارشی کردن ناودان ستون شبکه در نقاط شکست ایده آل هستند.345

نحو تقریباً مشابه ابزارهای پیش‌فرض و حاشیه مثبت است، اما با اضافه nکردن اندازه قبل از درخواست. در اینجا یک کلاس مثال است که برعکس .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

در اینجا نمونه ای از سفارشی کردن شبکه بوت استرپ در mdنقطه شکست متوسط ​​( ) و بالاتر آورده شده است. ما .colبالشتک را با والد افزایش دادیم .px-md-5و سپس با آن مقابله کردیم ..mx-md-n5.row

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>