Bil

Bootstrap inniheldur mikið úrval af skammstöfum sem bregðast við spássíu, fyllingu og bilabúnaðarflokkum til að breyta útliti þáttar.

Á þessari síðu

Spássía og fylling

Úthlutaðu viðbragðsvænum gildum margineða paddinggildum til þáttar eða undirmengi hliðar hans með stuttmyndaflokkum. Inniheldur stuðning fyrir einstakar eignir, allar eignir og lóðrétta og lárétta eiginleika. Flokkar eru byggðir úr sjálfgefnu Sass korti, allt frá .25remtil 3rem.

Notarðu CSS Grid skipulagseininguna? Íhugaðu að nota bilið í staðinn.

Nótaskrift

Bil tól sem eiga við um alla brotpunkta, frá xstil xxl, hafa enga brotpunkta skammstöfun í þeim. Þetta er vegna þess að þessir flokkar eru notaðir frá min-width: 0og upp og eru því ekki bundnir af fjölmiðlafyrirspurn. Hinir brotpunktarnir innihalda hins vegar brotpunkta skammstöfun.

Flokkarnir eru nefndir með sniðinu {property}{sides}-{size}fyrir xsog {property}{sides}-{breakpoint}-{size}fyrir sm, md, lg, xl, og xxl.

Þar sem eign er ein af:

m- fyrir flokka sem setjamargin
p- fyrir flokka sem setjapadding

Þar sem hliðar eru ein af:

t- fyrir flokka sem setja margin-topeðapadding-top
b- fyrir flokka sem setja margin-bottomeðapadding-bottom
s- (byrjun) fyrir flokka sem setja margin-lefteða padding-leftí LTR, margin-righteða padding-rightí RTL
e- (endir) fyrir flokka sem setja margin-righteða padding-rightí LTR, margin-lefteða padding-leftí RTL
x- fyrir flokka sem setja bæði *-leftog*-right
y- fyrir flokka sem setja bæði *-topog*-bottom
auður - fyrir flokka sem setja a margineða paddingá allar 4 hliðar frumefnisins

Þar sem stærð er ein af:

0- fyrir flokka sem útrýma margineða paddingmeð því að stilla það á0
1- (sjálfgefið) fyrir flokka sem stilla margineða paddingá$spacer * .25
2- (sjálfgefið) fyrir flokka sem stilla margineða paddingá$spacer * .5
3- (sjálfgefið) fyrir flokka sem stilla margineða paddingá$spacer
4- (sjálfgefið) fyrir flokka sem stilla margineða paddingá$spacer * 1.5
5- (sjálfgefið) fyrir flokka sem stilla margineða paddingá$spacer * 3
auto- fyrir flokka sem stilla á marginsjálfvirkt

(Þú getur bætt við fleiri stærðum með því að bæta færslum við $spacersSass kortabreytuna.)

Dæmi

Hér eru nokkur dæmigerð dæmi um þessa flokka:

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

Lárétt miðja

Að auki inniheldur Bootstrap einnig .mx-autoflokk til að miðja efni með fastri breidd blokkarstigs lárétt – það er efni sem hefur display: blockog widthsett – með því að stilla láréttu spássíuna á auto.

Miðjaður þáttur

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

Neikvæð framlegð

Í CSS geta margineignir notað neikvæð gildi ( paddingget ekki). Þessar neikvæðu spássíur eru sjálfgefnar óvirkar en hægt er að virkja þær í Sass með því að stilla $enable-negative-margins: true.

Setningafræðin er næstum sú sama og sjálfgefna, jákvæð framlegðartól, en með því að bæta við á nundan umbeðinni stærð. Hér er dæmi um flokk sem er andstæða við .mt-1:

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

Gap

Þegar þú notar display: gridgeturðu nýtt þér gaptól á foreldrisílátinu. Þetta getur sparað á að þurfa að bæta framlegðartólum við einstaka ristliði (börn í display: gridílát). Gap tól eru sjálfgefið móttækileg og eru framleidd með tólum API okkar, byggt á $spacersSass kortinu.

Ratliður 1

Ratliður 2

Grind liður 3

html

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

Stuðningur felur í sér móttækilega valkosti fyrir alla rist brotpunkta Bootstrap, auk sex stærða af $spacerskortinu ( 0– 5). Það er enginn .gap-autonytjaflokkur þar sem hann er í raun það sama og .gap-0.

Sass

Kort

Tilkynnt er um bilaforrit með Sass korti og síðan búið til með forritaskilum veitunnar okkar.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Utilities API

Tilgreint er frá bili í forritaskilum tóla okkar í scss/_utilities.scss. Lærðu hvernig á að nota utilities API.

    "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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),