Esasy mazmuna geçiň Docs nawigasiýasyna geçiň
in English

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.

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