Aralyk

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

Bu sahypada

Margin we padding

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

CSS Grid düzüliş modulyny ulanýarsyňyzmy? Boşluk peýdalylygyny ulanmagy göz öňünde tutuň .

Bellik

Fromhli arakesmelere degişli aralyk hyzmatlary xs, xxlolarda aralyk gysgaltmasy ýok. Sebäbi bu synplar 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_xxl

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
s- ( LTR ) margin-leftýa - da RTL - de goýlan sapaklar üçinpadding-leftmargin-rightpadding-right
e- ( LTR ) margin-rightýa - da RTL - de goýlan sapaklar üçinpadding-rightmargin-leftpadding-left
x*-left- ikisini hem kesgitleýän sapaklar üçin*-right
y*-top- ikisini hem kesgitleýän sapaklar üçin*-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;
}

.ms-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 derejesiniň mazmunyny, ý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). Bu otrisatel aralyklar adaty ýagdaýda ýapylýar, ýöne sazlamak arkaly Sass-da işledilip bilner $enable-negative-margins: true.

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

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

Gap

Ulanylanda, esasy set konteýnerinde kömekçi enjamlary ulanyp display: gridbilersiňiz . Bu aýratyn gözenek elementlerine ( konteýneriň gapçagalary) margin hyzmatlaryny goşmagy tygşytlap biler . Gap hyzmatlary, adaty ýagdaýda jogap berýär we Sass kartasyna display: gridesaslanyp, kommunal hyzmatlarymyz API arkaly döredilýär .$spacers

1-nji element

2-nji element

3-nji element

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

Goldaw, “Bootstrap” -yň gözenegiň ähli nokatlary üçin täsirli wariantlary, şeýle hem $spacerskartadan alty ululygy ( 0- 5) öz içine alýar. .gap-autoNetijeli ýaly peýdaly synp ýok .gap-0.

Sass

Kartalar

Aralyk hyzmatlary Sass kartasy arkaly yglan edilýär we soňra kommunal hyzmatlarymyz API bilen döredilýär.

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

Utilities API

Aralyk hyzmatlary, biziň API-lerimizde yglan edilýär scss/_utilities.scss. Utilities API-ni nähili ulanmalydygyny öwreniň.

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