Interspacigo

Bootstrap inkluzivas ampleksan gamon de stenografio respondema marĝeno, remburaĵo, kaj interspaco utileco klasoj por modifi elemento aspekto.

Sur ĉi tiu paĝo

Rando kaj kompletigo

Asignu respondemajn amikajn marginaŭ paddingvalorojn al elemento aŭ subaro de ĝiaj flankoj kun stenografioklasoj. Inkluzivas subtenon por individuaj propraĵoj, ĉiuj propraĵoj, kaj vertikalaj kaj horizontalaj propraĵoj. Klasoj estas konstruitaj de defaŭlta Sass-mapo intervalanta de .25remĝis 3rem.

Ĉu vi uzas la CSS Grid-aranĝan modulon? Konsideru uzi la interspacan ilon .

Notacio

Interspacaj iloj kiuj validas por ĉiuj rompopunktoj, de xsĝis xxl, havas neniun rompopunktomallongigon en ili. Ĉi tio estas ĉar tiuj klasoj estas aplikataj de min-width: 0kaj supren, kaj tiel ne estas ligitaj per amaskomunikila demando. La ceteraj rompopunktoj tamen inkluzivas mallongpunkton.

La klasoj estas nomitaj uzante la formaton {property}{sides}-{size}por xskaj {property}{sides}-{breakpoint}-{size}por sm, md, lg, xl, kaj xxl.

Kie posedaĵo estas unu el:

m- por klasoj kiuj starigismargin
p- por klasoj kiuj starigispadding

Kie flankoj estas unu el:

t- por klasoj kiuj starigas margin-topaŭpadding-top
b- por klasoj kiuj starigas margin-bottomaŭpadding-bottom
s- (komenco) por klasoj kiuj fiksas margin-leftaŭ padding-leften LTR, margin-rightaŭ padding-righten RTL
e- (fino) por klasoj kiuj fiksas margin-rightaŭ padding-righten LTR, margin-leftaŭ padding-leften RTL
x- por klasoj kiuj starigas ambaŭ *-leftkaj*-right
y- por klasoj kiuj starigas ambaŭ *-topkaj*-bottom
malplena - por klasoj kiuj starigas a marginaŭ paddingsur ĉiuj 4 flankoj de la elemento

Kie grandeco estas unu el:

0- por klasoj kiuj forigas la marginaŭ paddingagordante ĝin al0
1- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer * .25
2- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer * .5
3- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer
4- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer * 1.5
5- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer * 3
auto- por klasoj kiuj agordas la marginal aŭtomata

(Vi povas aldoni pliajn grandecojn aldonante enskribojn al la $spacersSass-mapo-variablo.)

Ekzemploj

Jen kelkaj reprezentaj ekzemploj de ĉi tiuj klasoj:

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

Horizontala centrado

Aldone, Bootstrap ankaŭ inkluzivas .mx-autoklason por horizontale centrado de fiks-larĝa bloknivela enhavo—tio estas, enhavo kiu havas display: blockkaj widtharon—agordante la horizontalajn randojn al auto.

Centrita elemento

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

Negativa marĝeno

En CSS, marginpropraĵoj povas utiligi negativajn valorojn ( paddingne povas). Ĉi tiuj negativaj randoj estas malebligitaj defaŭlte , sed povas esti ebligitaj en Sass per agordo $enable-negative-margins: true.

La sintakso estas preskaŭ la sama kiel la defaŭltaj, pozitivaj marĝenaj utilecoj, sed kun aldono de nantaŭ la petita grandeco. Jen ekzempla klaso kiu estas la malo de .mt-1:

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

Gap

Kiam vi uzas display: grid, vi povas uzi gapilojn sur la gepatra kradujo. Ĉi tio povas ŝpari devi aldoni marĝenservaĵojn al individuaj kradaj eroj (infanoj de display: gridujo). Gap-servaĵoj estas respondemaj defaŭlte, kaj estas generitaj per niaj iloj API, bazita sur la $spacersSass-mapo.

Krada ero 1

Krada ero 2

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

Subteno inkluzivas respondemajn eblojn por ĉiuj kradaj rompopunktoj de Bootstrap, kaj ankaŭ ses grandecoj de la $spacersmapo ( 0– 5). Ne ekzistas .gap-autoutilklaso ĉar ĝi estas efektive la sama kiel .gap-0.

Sass

Mapoj

Interspacaj utilecoj estas deklaritaj per Sass-mapo kaj poste generitaj per niaj utilecoj 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);

Utilaĵoj API

Interspacaj utilecoj estas deklaritaj en nia utileco API en scss/_utilities.scss. Lernu kiel uzi la utilecojn 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
    ),