Source

Аралар

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

Ничек бу эшли

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

Искәрмә

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

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

Кайда милек :

  • 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
  • буш - элементның 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;
}

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

Eredзәк элемент 
<div class="mx-auto" style="width: 200px;">
  Centered element
</div>