Phapanyetsano

Bootstrap e kenyelletsa mefuta e mengata e fapaneng e arabelang ka nako e khuts'oane, padding, le litlelase tsa lisebelisoa tsa gap ho fetola chebahalo ea element.

Leqepheng lena

Margin le padding

Abela lintho tse arabelang hantle marginkapa paddingtsa boleng ho element kapa karoloana ea mahlakore a eona e nang le litlelase tsa shorthand. E kenyelletsa tšehetso bakeng sa thepa ea motho ka mong, thepa eohle, le thepa e otlolohileng le e tšekaletseng. Litlelase li hahiloe ho tloha ho 'mapa oa kamehla oa Sass ho tloha .25remho 3rem.

U sebelisa mojule oa sebopeho sa Grid ea CSS? Nahana ka ho sebelisa sesebelisoa sa gap .

Notation

Lisebelisoa tsa sebaka tse sebetsang ho libaka tsohle tsa phomolo, ho tloha xsho ea ho xxl, ha li na khutsufatso ea li-breakpoint ho tsona. Lebaka ke hobane litlelase tseo li sebelisoa ho tloha min-width: 0holimo le holimo, 'me ka hona ha li tlangoe ke potso ea media. Li-breakpoints tse setseng, leha ho le joalo, li kenyelletsa khutsufatso ea breakpoint.

Litlelase li reheletsoe ho sebelisoa sebopeho {property}{sides}-{size}sa xsle {property}{sides}-{breakpoint}-{size}bakeng sa sm, md, lg, xl, le xxl.

Moo thepa e leng e 'ngoe ea:

m- bakeng sa lihlopha tse behiloengmargin
p- bakeng sa lihlopha tse behiloengpadding

Moo mahlakore ke e 'ngoe ea:

t- bakeng sa litlelase tse behang margin-topkapapadding-top
b- bakeng sa litlelase tse behang margin-bottomkapapadding-bottom
s- (qala) bakeng sa litlelase tse behiloeng margin-leftkapa padding-leftho LTR, margin-rightkapa padding-rightho RTL
e- (qetellong) bakeng sa litlelase tse behiloeng margin-rightkapa padding-righttse LTR, margin-leftkapa padding-leftho RTL
x- bakeng sa lihlopha tse behang bobeli *-leftle*-right
y- bakeng sa lihlopha tse behang bobeli *-tople*-bottom
blank - bakeng sa litlelase tse behang a marginkapa paddingmahlakoreng 'ohle a 4 a element

Moo boholo e leng e 'ngoe ea:

0- bakeng sa litlelase tse felisang marginkapa paddingka ho e beha ho0
1- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer * .25
2- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer * .5
3- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer
4- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer * 1.5
5- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer * 3
auto- bakeng sa litlelase tse behang marginho auto

(O ka eketsa boholo bo eketsehileng ka ho kenyelletsa likenyelletso tsa $spacers'mapa oa Sass.)

Mehlala

Mona ke mehlala ea baemeli ba lihlopha tsena:

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

Horizontal centering

Ho ekelletsa moo, Bootstrap e boetse e kenyelletsa .mx-autosehlopha sa litaba tsa boemo bo sa tsitsang ba bophara bo sa fetoheng—ke hore, litaba tse nang display: blockle widthsete-ka ho beha mecheng e tšekaletseng ho auto.

Karolo e bohareng

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

Negative margin

Ho CSS, marginthepa e ka sebelisa litekanyetso tse mpe ( paddingha li khone). Mehaho ena e mebe e timilwe ka ho sa feleng , empa e ka dumellwa ho Sass ka ho seta $enable-negative-margins: true.

Syntax e batla e ts'oana le lits'ebeletso tsa kamehla, tse ntle, empa ka kenyelletso ea npele ho boholo bo kopiloeng. Mona ke sehlopha sa mohlala se fapaneng le .mt-1:

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

Lekhalo

Ha u sebelisa display: grid, u ka sebelisa gaplisebelisoa tse ka har'a setshelo sa grid ea motsoali. Sena se ka boloka ka ho eketsa lisebelisoa tsa marang-rang ho lintho tsa marang-rang (bana ba display: gridsetshelo). Lisebelisoa tsa Gap li arabela ka mokhoa o ikhethileng, 'me li hlahisoa ka lisebelisoa tsa rona tsa API, ho ipapisitsoe le $spacers' mapa oa Sass.

Ntho ea Grid 1

Ntho ea Grid 2

Ntho ea Grid 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>

Ts'ehetso e kenyelletsa likhetho tsa ho arabela bakeng sa libaka tsohle tsa marang-rang tsa Bootstrap, hammoho le boholo bo ts'eletseng ho tsoa ' $spacersmapeng ( 0– 5). Ha ho na .gap-autosehlopha sa utility kaha se tšoana hantle le .gap-0.

Sass

Limmapa

Lisebelisoa tsa sebaka li phatlalatsoa ka 'mapa oa Sass ebe li hlahisoa ka lisebelisoa tsa rona tsa API.

$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

Lisebelisoa tsa sebaka li phatlalatsoa ho lits'ebeletso tsa rona tsa API ho scss/_utilities.scss. Ithute ho sebelisa lisebelisoa tsa 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
    ),