فاصله گذاری

Bootstrap شامل طیف وسیعی از کلاس‌های کاربردی حاشیه، padding و gap برای تغییر ظاهر یک عنصر است.

در این صفحه

حاشیه و بالشتک

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

از ماژول طرح بندی شبکه CSS استفاده می کنید؟ به جای آن از ابزار شکاف استفاده کنید .

نشانه گذاری

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

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

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

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

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

t- برای کلاس هایی که مجموعه margin-topیاpadding-top
b- برای کلاس هایی که مجموعه margin-bottomیاpadding-bottom
s- (شروع) برای کلاس هایی که در LTR margin-leftیا در RTL تنظیم می شوندpadding-leftmargin-rightpadding-right
e- (پایان) برای کلاس هایی که در LTR margin-rightیا در RTL تنظیم می شوندpadding-rightmargin-leftpadding-left
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;
}

.ms-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نمی تواند) استفاده کنند. این حاشیه های منفی به طور پیش فرض غیرفعال هستند ، اما می توان آنها را در Sass با تنظیم فعال $enable-negative-margins: trueکرد.

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

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

شکاف

هنگام استفاده از display: grid، می توانید از برنامه های gapکاربردی موجود در ظرف شبکه والد استفاده کنید. این می‌تواند باعث صرفه‌جویی در اضافه کردن ابزارهای حاشیه به آیتم‌های شبکه جداگانه (فرزندان یک display: gridظرف) شود. ابزارهای Gap به طور پیش فرض پاسخگو هستند و از طریق API ابزارهای ما بر اساس $spacersنقشه Sass تولید می شوند.

مورد گرید 1

مورد شبکه 2

مورد شبکه 3

html

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

پشتیبانی شامل گزینه‌های پاسخگو برای تمام نقاط شکست شبکه Bootstrap، و همچنین شش اندازه از $spacersنقشه ( 0– 5) است. هیچ .gap-autoکلاس کاربردی وجود ندارد زیرا در واقع مشابه .gap-0است.

ساس

نقشه ها

ابزارهای فاصله گذاری از طریق نقشه Sass اعلام می شوند و سپس با API ابزارهای ما تولید می شوند.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Utilities API

ابزارهای فاصله گذاری در API ابزارهای ما در اعلان شده اند scss/_utilities.scss. با نحوه استفاده از Utilities API آشنا شوید.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),