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.

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