Okugabanya ebanga

Bootstrap erimu ebika bingi eby’okuddamu mu shorthand responsive margin, padding, ne gap utility classes okukyusa endabika y’ekintu.

Ku muko guno

Margin ne padding

Gabira responsive-friendly marginoba paddingvalues ku element oba subset y'enjuyi zaayo ne shorthand classes. Mulimu okuwagira eby’obugagga ssekinnoomu, eby’obugagga byonna, n’eby’obugagga ebyesimbye n’eby’okwesimbye. Ebika bizimbibwa okuva ku maapu ya Sass eya bulijjo okuva ku .25remokutuuka ku 3rem.

Okukozesa modulo y'ensengeka ya CSS Grid? Lowooza ku kukozesa ekintu ekiyitibwa gap utility .

Okuwandiika ebigambo

Ebikozesebwa mu kugabanya ebanga ebikola ku bifo byonna eby’okumenya, okuva xsku okutuuka ku xxl, tebirina bufupi bwa bifo bya kumenya mu byo. Kino kiri bwe kityo kubanga kiraasi ezo zikozesebwa okuva min-width: 0n’okudda waggulu, era bwe zityo tezisibibwa ku kubuuza kwa mikutu. Ebifo ebisigaddewo, naye, bibaamu enfunyiro y’okumenya.

Ebisulo bituumibwa amannya nga tukozesa ensengeka {property}{sides}-{size}ya xs, {property}{sides}-{breakpoint}-{size}, sm, md, lgne xl.xxl

Awali ebintu ekimu ku:

m- ku bibiina ebiteekawomargin
p- ku bibiina ebiteekawopadding

Awali enjuyi emu ku:

t- ku bibiina ebiteeka margin-topobapadding-top
b- ku bibiina ebiteeka margin-bottomobapadding-bottom
s- (okutandika) ku kiraasi eziteeka margin-leftoba padding-leftmu LTR, margin-rightoba padding-rightmu RTL
e- (end) ku kiraasi eziteeka margin-rightoba padding-rightmu LTR, margin-leftoba padding-leftmu RTL
x- ku bibiina ebiteeka byombi *-leftne*-right
y- ku bibiina ebiteeka byombi *-topne*-bottom
blank - ku kiraasi eziteeka a marginoba paddingku njuyi zonna 4 eza elementi

Awali sayizi emu ku:

0- ku bibiina ebimalawo marginoba paddingnga bibiteeka ku0
1- (by default) ku kiraasi eziteeka marginoba paddingku$spacer * .25
2- (by default) ku kiraasi eziteeka marginoba paddingku$spacer * .5
3- (by default) ku kiraasi eziteeka marginoba paddingku$spacer
4- (by default) ku kiraasi eziteeka marginoba paddingku$spacer * 1.5
5- (by default) ku kiraasi eziteeka marginoba paddingku$spacer * 3
auto- ku kiraasi eziteeka ku marginku auto

(Osobola okwongerako sayizi endala ng'ossaako ebiyingizibwa ku $spacersnkyukakyuka ya maapu ya Sass.)

Eby’okulabirako

Wano waliwo ebyokulabirako ebikiikirira ebika bino:

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

Okuteeka wakati mu bbanga (horizontal centering).

Okugatta ku ekyo, Bootstrap era erimu .mx-autokiraasi ey’okussa wakati mu bbanga (horizontal centering fixed-width block level content) ebirimu —kwe kugamba, ebirimu ebirina display: blockn’ekisengekeddwa width—nga oteeka emimwa egy’okwebungulula ku auto.

Ekintu ekiri wakati

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

Negative margin

Mu CSS, margineby'obugagga bisobola okukozesa emiwendo emibi ( paddingtesobola). Ensimbi zino ezitali nnungi zilemesebwa mu butonde , naye zisobola okusobozesa mu Sass nga ziteekawo $enable-negative-margins: true.

Ensengeka y'ebigambo kumpi y'emu n'ebikozesebwa ebisookerwako, ebirungi margin utilities, naye nga kwogasse nnga tebannaba sayizi esabiddwa. Wano waliwo ekibiina eky'okulabirako ekikontana ne .mt-1:

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

Ebbanga

Nga okozesa display: grid, osobola okukozesa gapebikozesebwa ku kibya kya grid eky'omuzadde. Kino kiyinza okukekkereza ku kuba n’okwongera ku margin utilities ku bintu bya grid ssekinnoomu (abaana ba display: gridkonteyina). Gap utilities ziddamu nga default, era zikolebwa nga ziyita mu utilities API yaffe, nga zeesigamiziddwa ku $spacersmaapu ya Sass.

Ekintu kya giridi 1

Ekintu kya giridi 2

Ekintu kya giridi 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>

Obuwagizi bulimu eby’okulonda ebiddamu ku byonna Bootstrap’s grid breakpoints, wamu ne sayizi mukaaga okuva ku $spacersmaapu ( 0– 5). Tewali .gap-autoutility class nga effectively kye kimu ne .gap-0.

Sass nga bwe kiri

Maapu

Ebikozesebwa mu kugabanya ebanga bilangirirwa nga biyita ku maapu ya Sass oluvannyuma ne bikolebwa n’ebikozesebwa byaffe 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);

Ebikozesebwa API

Ebikozesebwa mu kugabanya ebanga bilangirirwa mu API yaffe ey'ebikozesebwa mu scss/_utilities.scss. Yiga engeri y'okukozesaamu API y'ebikozesebwa.

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