Go beakanya sekgoba

Bootstrap e akaretša mehutahuta ya diklase tša go arabela mošito, padding, le sekgoba go fetoša ponagalo ya elemente.

Letlakaleng le

Margin le padding

Abela go arabela-bogwera margingoba paddingboleng go elemente goba sehlopha se senyenyane sa mahlakore a yona ka diklase tša mongwalokopana. E akaretša thekgo ya dithoto tša motho ka o tee ka o tee, dithoto ka moka, le dithoto tša go ema le tša go rapalala. Diklase di agilwe go tšwa go mmapa wa Sass wa go se fetoge go tloga go go .25remya go 3rem.

Go šomiša modula wa peakanyo ya CSS Grid? Nagana ka go diriša utility ya sekgoba go e na le moo.

Notation

Didirišwa tša go arola sekgoba tšeo di šomago go dintlha ka moka tša go kgaotša, go tloga xsgo go ya go xxl, ga di na khutsofatšo ya dintlha tša go kgaotša go tšona. Se ke ka lebaka la gore diklase tšeo di dirišwa go tloga min-width: 0le godimo, gomme ka go realo ga di tlemilwe ke potšišo ya boraditaba. Dintlha tše di šetšego tša go kgaotša, le ge go le bjalo, di akaretša khutsofatšo ya dintlha tša go kgaotša.

Diklase di reeletšwe maina ka go šomiša sebopego {property}{sides}-{size}sa xsle {property}{sides}-{breakpoint}-{size}sa sm, md, lg, xl, le xxl.

Moo thoto e lego ye nngwe ya:

m- bakeng sa diklase tse behamargin
p- bakeng sa diklase tse behapadding

Moo mahlakore e lego e nngwe ya:

t- bakeng sa diklase tse beha margin-topkapapadding-top
b- bakeng sa diklase tse beha margin-bottomkapapadding-bottom
s- (qala) bakeng sa diklase tse beha margin-leftkapa padding-leftka LTR, margin-rightkapa padding-rightka RTL
e- (qetellong) bakeng sa diklase tse beha margin-rightkapa padding-rightka LTR, margin-leftkapa padding-leftka RTL
x- bakeng sa diklase tse beha bobeli *-leftle*-right
y- bakeng sa diklase tse beha bobeli *-tople*-bottom
lefeela - bakeng sa diklase tse beha a marginkapa paddingka mahlakoreng ohle a 4 a elemente

Moo bogolo e lego e nngwe ya:

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

(O ka oketša bogolo bjo bongwe ka go oketša dikeno go $spacersphetogo ya mmapa wa Sass.)

Mehlala

Mehlala e mengwe ya boemedi ya diklase tše še:

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

Go tsepama ga go rapalala

Go tlaleletša, Bootstrap e akaretša gape le .mx-autosehlopha sa go tsepamiša ka go rapalala diteng tša maemo a boloko bja bophara bjo bo sa fetogego—ke gore, diteng tšeo di nago display: blockle le widthsete—ka go beakanya mapheko a go rapalala go auto.

Element e tsepameng

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

Moedi wa go se loke

Ka CSS, marginthepa ka sebelisa boleng bo mpe ( paddingke ke). Diphetho tše tše mpe di šitišitšwe ka go ikemela , eupša di ka kgontšhwa ka go Sass ka go beakanya $enable-negative-margins: true.

Popegopolelo e nyakile go swana le didirišwa tša go se fetoge, tša mošito wo mobotse, eupša ka tlaleletšo ya npele ga bogolo bjo bo kgopetšwego. Mona ke sehlopha sa mohlala seo se fapaneng le .mt-1:

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

Sekgoba

Ge o šomiša display: grid, o ka šomiša gapdidirišwa godimo ga setshelo sa keriti ya motswadi. Se se ka boloka go swanelwa ke go oketša didirišwa tša margin go dilo tša keriti ka botee (bana ba display: gridsetshelo). Didirišwa tša sekgoba di arabela ka go ikemela, gomme di tšweletšwa ka API ya rena ya didirišwa, yeo e theilwego godimo ga $spacersmmapa wa Sass.

Ntlha ya keriti 1

Ntlha ya keriti 2

Ntlha ya keriti 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>

Thekgo e akaretša dikgetho tše di arabelago bakeng sa dintlha ka moka tša go kgaotša keriti ya Bootstrap, gammogo le bogolo bjo bo tshela go tšwa $spacersmmapeng ( 0– 5). Ga go na .gap-autosehlopha sa utility ka ge e swana ka mo go atlegilego le .gap-0.

Sass

Dimmapa

Didirišwa tša go arola sekgoba di tsebagatšwa ka mmapa wa Sass gomme ka morago tša tšweletšwa ka API ya rena ya didirišwa.

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

API ya Didirišwa

Didirišwa tša go arola sekgoba di tsebagaditšwe ka go API ya rena ya didirišwa ka scss/_utilities.scss. Ithute kamoo o ka dirišago API ya didirišwa.

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