Hapësira

Bootstrap përfshin një gamë të gjerë të klasave reaguese të marzhit, mbushjes dhe boshllëqeve për të modifikuar pamjen e një elementi.

Në këtë faqe

Margjina dhe mbushja

Cakto vlera marginose paddingvlera të përshtatshme për një element ose një nëngrup të anëve të tij me klasa stenografi. Përfshin mbështetje për pronat individuale, të gjitha pronat dhe vetitë vertikale dhe horizontale. Klasat janë ndërtuar nga një hartë e paracaktuar Sass që varion nga .25remnë 3rem.

Po përdorni modulin e paraqitjes së rrjetit CSS? Merrni parasysh përdorimin e mjetit të boshllëkut .

Shënimi

Shërbimet e ndarjes që zbatohen për të gjitha pikat e ndërprerjes, nga xsnë xxl, nuk kanë asnjë shkurtim të pikës së ndërprerjes në to. Kjo është për shkak se ato klasa aplikohen nga min-width: 0dhe lart, dhe kështu nuk janë të lidhura nga një pyetje mediatike. Megjithatë, pikat e mbetura të ndërprerjes përfshijnë një shkurtim të pikës së ndërprerjes.

Klasat emërtohen duke përdorur formatin {property}{sides}-{size}për xsdhe {property}{sides}-{breakpoint}-{size}për sm, md, lg, xldhe xxl.

Ku prona është një nga:

m- për klasat që vendosenmargin
p- për klasat që vendosenpadding

Ku anët është një nga:

t- për klasat që vendosin margin-toposepadding-top
b- për klasat që vendosin margin-bottomosepadding-bottom
s- (fillimi) për klasat që vendosen margin-leftose padding-leftnë LTR, margin-rightose padding-rightnë RTL
e- (fund) për klasat që vendosen margin-rightose padding-rightnë LTR, margin-leftose padding-leftnë RTL
x- për klasat që vendosin të dyja *-leftdhe*-right
y- për klasat që vendosin të dyja *-topdhe*-bottom
bosh - për klasat që vendosin një marginose paddingnë të katër anët e elementit

Ku madhësia është një nga:

0- për klasat që eliminojnë marginose paddingduke e vendosur atë në0
1- (si parazgjedhje) për klasat që vendosin marginose paddingnë$spacer * .25
2- (si parazgjedhje) për klasat që vendosin marginose paddingnë$spacer * .5
3- (si parazgjedhje) për klasat që vendosin marginose paddingnë$spacer
4- (si parazgjedhje) për klasat që vendosin marginose paddingnë$spacer * 1.5
5- (si parazgjedhje) për klasat që vendosin marginose paddingnë$spacer * 3
auto- për klasat që vendosin marginnë auto

(Mund të shtoni më shumë madhësi duke shtuar hyrje në $spacersvariablin e hartës Sass.)

Shembuj

Këtu janë disa shembuj përfaqësues të këtyre klasave:

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

Përqendrimi horizontal

Për më tepër, Bootstrap përfshin gjithashtu një .mx-autoklasë për përqendrimin horizontalisht të përmbajtjes së nivelit të bllokut me gjerësi fikse - domethënë përmbajtjen që ka display: blockdhe një widthgrup - duke vendosur margjinat horizontale në auto.

Element i përqendruar

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

Marzhi negativ

Në CSS, marginvetitë mund të përdorin vlera negative ( paddingnuk mund). Këto margjina negative janë çaktivizuar si parazgjedhje , por mund të aktivizohen në Sass duke vendosur $enable-negative-margins: true.

Sintaksa është pothuajse e njëjtë me shërbimet e paracaktuara, me diferencë pozitive, por me shtimin e nmadhësisë së kërkuar përpara. Këtu është një klasë shembull që është e kundërta e .mt-1:

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

Boshllëk

Kur përdorni display: grid, mund të përdorni gapshërbimet në kontejnerin e rrjetit prind. Kjo mund të kursejë nevojën për të shtuar shërbime të marzhit në artikujt individual të rrjetit (fëmijët e një display: gridkontejneri). Shërbimet Gap janë të përgjegjshme si parazgjedhje dhe krijohen nëpërmjet API-së së shërbimeve tona, bazuar në $spacershartën Sass.

Artikulli i rrjetit 1

Artikulli i rrjetit 2

Pika e rrjetit 3

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

Mbështetja përfshin opsione të përgjegjshme për të gjitha pikat e ndërprerjes së rrjetit të Bootstrap, si dhe gjashtë madhësi nga $spacersharta ( 0– 5). Nuk ka asnjë .gap-autoklasë të shërbimeve pasi është efektivisht e njëjtë me .gap-0.

Sass

Hartat

Shërbimet e ndarjes deklarohen përmes hartës Sass dhe më pas gjenerohen me API-në e shërbimeve tona.

$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

Shërbimet e ndarjes janë deklaruar në API të shërbimeve tona në scss/_utilities.scss. Mësoni se si të përdorni API të shërbimeve.

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