Dodome dometsotso

Bootstrap lɔ shorthand responsive margin, padding, kple gap utility class vovovowo ɖe eme be woatrɔ asi le element aɖe ƒe dzedzeme ŋu.

Le axa sia dzi

Margin kple padding

De ŋuɖoɖo-xɔlɔ̃wɔwɔ marginalo paddingasixɔxɔwo asi na element alo eƒe axawo ƒe akpa sue aɖe kple nuŋɔŋlɔ kpui ƒe klasswo. Kpekpeɖeŋu na nɔnɔme ɖekaɖekawo, nɔnɔmewo katã, kple nɔnɔme siwo le tsitrenu kple esiwo le tsia dzi la le eme. Wotua klasswo tso Sass ƒe anyigbatata si woɖo ɖi si tso .25remvaseɖe 3rem.

CSS Grid ƒe ɖoɖowɔɖi ƒe module zazãa? Bu gap utility zazã ŋu kpɔ .

Nuŋɔŋlɔ

Dometsotso ƒe dɔwɔnu siwo ku ɖe breakpoints katã ŋu, tso xsvaseɖe xxl, mekpɔ breakpoint ƒe kpukpui aɖeke le wo me o. Esia le alea elabena wowɔa klass mawo ŋudɔ tso min-width: 0kple dzi, eye to esia me la, womeblaa wo kple nyadzɔdzɔgblɔmɔnuwo ƒe biabia o. Gake breakpoint susɔeawo dometɔ aɖewoe nye breakpoint kpukpui aɖe.

Wozãa nɔnɔme {property}{sides}-{size}si xsnye {property}{sides}-{breakpoint}-{size}, sm, md, lg, xlkple xxl.

Afisiwo nunɔamesiwo nye:

m- na klass siwo ɖomargin
p- na klass siwo ɖopadding

Afisi akpawo nye:

t- na klass siwo ɖo margin-topalopadding-top
b- na klass siwo ɖo margin-bottomalopadding-bottom
s- (dze egɔme) na klass siwo ɖo margin-leftalo padding-leftle LTR me, margin-rightalo padding-rightle RTL me
e- (nuwuwu) na klass siwo ɖo margin-rightalo padding-rightle LTR me, margin-leftalo padding-leftle RTL me
x- na klass siwo ɖoa evea siaa *-leftkple*-right
y- na klass siwo ɖoa evea siaa *-topkple*-bottom
blank - na klass siwo ɖo a marginalo paddingɖe element la ƒe akpa 4 katã dzi

Afisi lolome nye:

0- na klass siwo ɖea marginalo paddingto eɖoɖo ɖe0
1- (le gɔmedzedzea me) na klass siwo ɖo marginalo paddingto$spacer * .25
2- (le gɔmedzedzea me) na klass siwo ɖo marginalo paddingto$spacer * .5
3- (le gɔmedzedzea me) na klass siwo ɖo marginalo paddingto$spacer
4- (le gɔmedzedzea me) na klass siwo ɖo marginalo paddingto$spacer * 1.5
5- (le gɔmedzedzea me) na klass siwo ɖo marginalo paddingto$spacer * 3
auto- na klass siwo ɖoa marginbe auto

(Àteŋu atsɔ lolome bubuwo akpe ɖe eŋu to nyawo tsɔtsɔ kpe ɖe $spacersSass ƒe anyigbatata ƒe tɔtrɔ ŋu me.)

Kpɔɖeŋuwo

Klass siawo ƒe kpɔɖeŋu siwo tsi tre ɖi na dometɔ aɖewoe nye esi:

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

Titina si le tsia dzi

Tsɔ kpe ɖe eŋu la, Bootstrap hã de .mx-autoklass aɖe si me woatsɔ aɖo titina le tsia dzi le fixed-width block level content—si fia be, content that has display: blockand a widthset—to ɖoɖowɔwɔ ɖe horizontal margins ɖe auto.

Nusi le titina

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

Negative ƒe vovototodedeameme

Le CSS me la, marginnɔnɔmewo ateŋu azã asixɔxɔ manyomanyowo ( paddingmateŋu o). Wowɔa margin manyomanyo siawo ŋudɔ le gɔmedzedzea me , gake woateŋu awɔ dɔ le Sass me to ɖoɖowɔwɔ me $enable-negative-margins: true.

Nyagɔmeɖegbalẽa sɔ kple default, positive margin utilities kloe, gake wotsɔe kpe ɖe eŋu ndo ŋgɔ na lolome si wobia. Kpɔɖeŋu ƒe klass aɖe si to vovo na .mt-1:

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

Memama

Ne èle , zãm display: gridla, àteŋu awɔ gapdɔwɔnu siwo le dzila ƒe grid ƒe nugoe la dzi ŋudɔ. Esia ateŋu akpɔ ga geɖe le alesi wòle be woatsɔ margin utilities akpe ɖe grid nu ɖekaɖekawo ŋu ( display: gridnugoe aɖe ƒe viwo) ŋu. Gap dɔwɔnuwo wɔa dɔ le gɔmedzedzea me, eye wowɔa wo to míaƒe dɔwɔnuwo API dzi, si wotu ɖe $spacersSass ƒe anyigbatata dzi.

Grid ƒe nu 1 lia

Grid ƒe nu 2 lia

Grid ƒe nu 3 lia

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

Kpekpeɖeŋu ƒe akpa aɖewoe nye tiatia siwo ɖoa nya ŋu na Bootstrap ƒe grid breakpoints katã, kpakple lolome ade tso $spacersanyigbatata dzi ( 0– 5). .gap-autoutility class aɖeke meli o elabena le nyateƒe me la, esɔ kple .gap-0.

Sass ƒe nyawo

Anyigbatatawo

Woɖea gbeƒã dometsotso ƒe dɔwɔnuwo to Sass anyigbatata dzi eye emegbe wowɔa wo kple míaƒe dɔwɔnuwo 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);

Dɔwɔnuwo ƒe API

Woɖe gbeƒã dometsotso ƒe dɔwɔnuwo le míaƒe dɔwɔnuwo API me le scss/_utilities.scss. Srɔ̃ alesi nàzã utilities API lae.

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