Аралар

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>

Тискәре маржа

CSS-та marginүзлекләр тискәре кыйммәтләрне куллана ала ( paddingбулдыра алмый). 4.2 булганга 1, без югарыда күрсәтелгән һәр нуль булмаган бөтен сан өчен тискәре маржа ярдәмчеләрен өстәдек (мәсәлән ,,,,, ) . Бу коммуналь челтәрләр челтәр баганаларын чистарту өчен идеаль.2345

Синтаксис, килешү, уңай маржа коммуналь хезмәтләре белән бертигез диярлек, ләкин nсоралган зурлыкка кадәр кушылу белән. Менә киресенчә үрнәк класс .mt-1:

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

mdМенә Bootstrap челтәрен урта ( ) тукталыш ноктасында һәм өстәрәк көйләү мисалы . Без паддерны арттырдык, .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>