Aralyk

“Bootstrap” elementiň daşky görnüşini üýtgetmek üçin stenografiki täsirli margin we padding peýdaly synplaryň giň toplumyny öz içine alýar.

Bu nähili işleýär

Haýsydyr bir elemente ýa-da onuň taraplarynyň bir bölegini stenografiýa sapaklary bilen jogap marginberiň padding. Aýry-aýry häsiýetleri, ähli häsiýetleri we dik we kesel häsiýetleri goldaýar. Sapaklar adaty Sass kartasyndan başlap üýtgeýär .25rem.3rem

Bellik

Fromhli arakesmelere degişli aralyk hyzmatlary xs, xlolarda aralyk gysgaltmasy ýok. Sebäbi bu sapaklar min-width: 0ýokary we ýokary derejede ulanylýar we şeýlelik bilen media soragy bilen baglanyşykly däl. Galan bölekler bolsa, nokat gysgaltmasyny öz içine alýar.

Sapaklar ,,,,,,,,,,,,,,,,,,,,,,,,,,, {property}{sides}-{size}_ xs_ {property}{sides}-{breakpoint}-{size}_ sm_ md_ lg_xl

Gozgalmaýan emläk :

m- düzülen sapaklar üçinmargin
p- düzülen sapaklar üçinpadding

Taraplaryň biri :

t- düzýän sapaklar üçin margin-topýa-dapadding-top
b- düzýän sapaklar üçin margin-bottomýa-dapadding-bottom
l- düzýän sapaklar üçin margin-leftýa-dapadding-left
r- düzýän sapaklar üçin margin-rightýa-dapadding-right
x- ikisini hem kesgitleýän sapaklar üçin *-leftwe*-right
y- ikisini hem kesgitleýän sapaklar üçin *-topwe*-bottom
boş - elementiň 4 tarapyny ýa- marginda hemme tarapyny düzýän sapaklar üçinpadding

Ululygy nirede :

0- ýok edýän marginýa-da paddingony düzýän sapaklar üçin0
1margin- (tertip boýunça) ýa-da düzýän synplar paddingüçin$spacer * .25
2margin- (tertip boýunça) ýa-da düzýän synplar paddingüçin$spacer * .5
3margin- (tertip boýunça) ýa-da düzýän synplar paddingüçin$spacer
4margin- (tertip boýunça) ýa-da düzýän synplar paddingüçin$spacer * 1.5
5margin- (tertip boýunça) ýa-da düzýän synplar paddingüçin$spacer * 3
automargin- awtomatik sazlaýan sapaklar üçin

$spacers( Sass kartasynyň üýtgeýjisine ýazgylar goşup has köp ululyk goşup bilersiňiz .)

Mysallar

Ine, bu synplaryň käbir wekilçilikli mysallary:

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

Gorizontal merkezleşdirme

Mundan başga-da, “Bootstrap ” keseligine çäkleri kesgitlemek arkaly .mx-autokeseligine merkezleşdirilen kesgitli giňlikdäki blok derejesindäki mazmuny, ýagny mazmuny display: blockwe widthtoplumyny öz içine alýar auto.

Merkezleşdirilen element

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

Ativearamaz margin

CSS-de marginhäsiýetler otrisatel bahalary ulanyp biler ( paddingedip bilmeýär). 4.2 - e görä 1, ýokarda sanalan her nol däl bitewi ululyk üçin negatiw margin kömeklerini goşduk (meselem ,,,, ) . Bu kömekçi enjamlar, gözenek sütünleriniň böleklerini kesmek üçin amatlydyr.2345

Sintaksis, deslapky, polo positiveitel margin kömekleri bilen deňdir, ýöne ntalap edilýän ululykdan öň goşulmagy bilen. Ine, munuň tersi bolan mysal synpy .mt-1:

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

mdIne, orta ( ) aralyk nokadynda we ýokarda Bootstrap toruny sazlamagyň mysaly . .colPadding bilen köpeltdik, soň bolsa ene-atanyň .px-md-5garşysyna çykdyk ..mx-md-n5.row

Columnörite sütün padding

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