Аралар

Bootstrap элементның тышкы кыяфәтен үзгәртү өчен стенограмманың җаваплы маржасын, паддингын һәм бушлык ярдәм классларын үз эченә ала.

Бу биттә

Маргин һәм паддинг

Элементка яисә аның як өлешенә стенограмма класслары белән җаваплы дуслык marginяки кыйммәтләр билгеләгез. paddingАерым үзлекләр, барлык үзлекләр, вертикаль һәм горизонталь үзлекләр өчен ярдәм керә. Дәресләр Sass картасыннан алып .25remүзгәртелә 3rem.

CSS челтәр макеты куллану? Бушлыкны кулланырга уйлагыз .

Искәрмә

xsБарлык өзек нокталарына кагыла торган аралар xxl, аларда бернинди кыскарту юк. Чөнки ул класслар өстән- min-width: 0өстән кулланыла, һәм шулай итеп медиа соравы белән бәйләнешле түгел. Калган өзекләр, ләкин кыскартуны үз эченә ала.

Класслар ,,,, һәм {property}{sides}-{size}өчен формат ярдәмендә атала . _xs{property}{sides}-{breakpoint}-{size}smmdlgxlxxl

Кайда милек :

m- куелган класслар өченmargin
p- куелган класслар өченpadding

Кайда якларның берсе:

t- куйган класслар өчен margin-topякиpadding-top
b- куйган класслар өчен margin-bottomякиpadding-bottom
smargin-left- (башлау) яки padding-leftLTR, margin-rightяки padding-rightRTL класслары өчен
e- (ахыр) LTR margin-rightяки RTL класслары өченpadding-rightmargin-leftpadding-left
x*-left- икесен дә куйган класслар өчен*-right
y*-top- икесен дә куйган класслар өчен*-bottom
буш - элементның 4 ягына куелган класслар marginөченpadding

Кайда зурлык :

0- бетерүче marginяки paddingаны урнаштырган класслар өчен0
1margin- (килешү буенча) яки куйган класслар paddingөчен$spacer * .25
2margin- (килешү буенча) яки куйган класслар paddingөчен$spacer * .5
3margin- (килешү буенча) яки куйган класслар paddingөчен$spacer
4margin- (килешү буенча) яки куйган класслар paddingөчен$spacer * 1.5
5margin- (килешү буенча) яки куйган класслар paddingөчен$spacer * 3
automargin- автомобильне куйган класслар өчен

$spacers(Сез Sass картасы үзгәрүенә язулар өстәп күбрәк зурлыклар өсти аласыз .)

Мисаллар

Менә бу классларның кайбер вәкиллекле мисаллары:

.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куеп .widthauto

Eredзәк элемент

<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контейнер балалары) маржа коммуналь хезмәтләрен өстәргә туры килә. $spacersGap коммуналь хезмәтләре килешү буенча җаваплы, һәм Sass картасы нигезендә безнең коммуналь API аша ясала .

Челтәр 1

Челтәр 2

Челтәр 3

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

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

Коммуналь API

Аралык коммуналь хезмәтләре безнең коммуналь APIда игълан ителә scss/_utilities.scss. Коммуналь 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
    ),