Bo'shliq

Marja va to'ldirish

Elementga yoki uning tomonlari toʻplamiga stenogramma sinflari bilan javob beradigan qulay marginyoki qiymatlarni belgilang. paddingShaxsiy xususiyatlar, barcha xususiyatlar va vertikal va gorizontal xususiyatlarni qo'llab-quvvatlashni o'z ichiga oladi. .25remSinflar birlamchi Sass xaritasidan dan gacha boʻlgan masofada qurilgan 3rem.

Belgilash

Barcha to'xtash nuqtalariga tegishli bo'lgan intervalli yordamchi dasturlarda to'xtash xsnuqtasi xxlqisqartmasi yo'q. Buning sababi shundaki, bu sinflar yuqoridan min-width: 0va yuqoridan qo'llaniladi va shuning uchun media so'rovi bilan bog'lanmaydi. Qolgan to'xtash nuqtalari esa to'xtash nuqtasi qisqartmasini o'z ichiga oladi.

{property}{sides}-{size}Sinflar uchun va , , , xsva {property}{sides}-{breakpoint}-{size}uchun formati yordamida nomlanadi .smmdlgxlxxl

Bu erda mulk quyidagilardan biri hisoblanadi:

• m- belgilangan sinflar uchunmargin
• p- belgilangan sinflar uchunpadding

Bu tomonlardan biri:

• t- belgilangan sinflar uchun margin-topyokipadding-top
• b- belgilangan sinflar uchun margin-bottomyokipadding-bottom
• s- (boshlash) o'rnatilgan margin-leftyoki padding-leftLTRda margin-rightyoki padding-rightRTLda o'rnatilgan sinflar uchun
• e- (tugashi) o'rnatilgan margin-rightyoki padding-rightLTRda margin-leftyoki padding-leftRTLda o'rnatilgan sinflar uchun
• x*-left- ikkalasini ham o'rnatadigan sinflar uchun*-right
• y*-top- ikkalasini ham o'rnatadigan sinflar uchun*-bottom
• bo'sh - elementning barcha 4 tomonida a marginyoki o'rnatilgan sinflar uchunpadding

Bu erda o'lcham quyidagilardan biri:

• 0- ni yo'q qiladigan marginyoki paddinguni o'rnatish orqali sinflar uchun0
• 1- (sukut bo'yicha) marginyoki ni o'rnatgan sinflar paddinguchun$spacer * .25
• 2- (sukut bo'yicha) marginyoki ni o'rnatgan sinflar paddinguchun$spacer * .5
• 3- (sukut bo'yicha) marginyoki ni o'rnatgan sinflar paddinguchun$spacer
• 4- (sukut bo'yicha) marginyoki ni o'rnatgan sinflar paddinguchun$spacer * 1.5
• 5- (sukut bo'yicha) marginyoki ni o'rnatgan sinflar paddinguchun$spacer * 3
• automargin- auto ni o'rnatgan sinflar uchun

$spacers( Sass xaritasi oʻzgaruvchisiga yozuvlar qoʻshish orqali koʻproq oʻlchamlarni qoʻshishingiz mumkin .)

Misollar

Mana bu sinflarning ba'zi namunaviy namunalari:

.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;
}

Gorizontal markazlashtirish

Bundan tashqari, Bootstrap shuningdek, gorizontal chegaralarni o'rnatish orqali .mx-autoqattiq kenglikdagi blok darajasidagi tarkibni, ya'ni mavjud tarkib display: blockva width​​to'plamni gorizontal markazlashtirish uchun sinfni o'z ichiga oladi auto.

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

Salbiy marja

CSS-da marginxususiyatlar salbiy qiymatlardan foydalanishi mumkin ( paddingmumkin). Ushbu salbiy chegaralar sukut bo'yicha o'chirilgan , lekin sozlash orqali Sass'da faollashtirilishi mumkin $enable-negative-margins: true.

Sintaksis sukut bo'yicha, ijobiy chegara yordam dasturlari bilan deyarli bir xil, ammo nso'ralgan o'lchamdan oldin qo'shilishi bilan. Bunga qarama-qarshi bo'lgan misol sinfi .mt-1:

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

Bo'shliq

dan foydalanayotganda display: grid, siz gapota-grid konteyneridagi yordamchi dasturlardan foydalanishingiz mumkin. display: gridBu alohida panjara elementlariga ( konteynerning bolalari) marja yordam dasturlarini qo'shish zaruriyatini tejash imkonini beradi . $spacersGap yordam dasturlari sukut bo'yicha javob beradi va Sass xaritasi asosida bizning API yordam dasturlarimiz orqali yaratiladi .

<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>

Qo'llab-quvvatlash barcha Bootstrap panjara to'xtash nuqtalari uchun javob beruvchi variantlarni, shuningdek, $spacersxaritadan oltita o'lchamni ( 0– 5) o'z ichiga oladi. Utility sinfi yo'q .gap-auto, chunki u samarali tarzda bir xil .gap-0.

Sass

Xaritalar

Space utilities Sass xaritasi orqali e'lon qilinadi va keyin bizning yordam dasturlarimiz API bilan yaratiladi.

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

Utilities API

Space utilities bizning yordam dasturlarimiz API da e'lon qilingan scss/_utilities.scss. API yordam dasturlarini qanday ishlatishni bilib oling.

    "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
    ),