Nafasi

Bootstrap inajumuisha anuwai ya ukingo wa kuitikia kwa mkono mfupi, padding, na madarasa ya matumizi ya pengo ili kurekebisha mwonekano wa kipengele.

Katika ukurasa huu

Pambizo na padding

Weka thamani zinazofaa kuitikia marginau paddingthamani kwa kipengele au kikundi kidogo cha pande zake chenye madarasa ya mkato. Inajumuisha usaidizi wa sifa za kibinafsi, sifa zote, na sifa za wima na za mlalo. Madarasa hujengwa kutoka kwa ramani chaguo-msingi ya Sass kuanzia .25remhadi 3rem.

Je, unatumia moduli ya mpangilio wa Gridi ya CSS? Badala yake , fikiria kutumia matumizi ya pengo .

Nukuu

Huduma za kuweka nafasi zinazotumika kwa sehemu zote za kukatika, kuanzia xshadi xxl, hazina muhtasari wa sehemu ya kukatika ndani yake. Hii ni kwa sababu madarasa hayo yanatumika kutoka min-width: 0na juu, na kwa hivyo hayafungwi na hoja ya midia. Vizuizi vilivyosalia, hata hivyo, vinajumuisha muhtasari wa sehemu ya kuvunja.

Madarasa yanaitwa kwa kutumia umbizo {property}{sides}-{size}la xsna {property}{sides}-{breakpoint}-{size}kwa sm, md, lg, xl, na xxl.

Ambapo mali ni moja ya:

m- kwa madarasa yaliyowekwamargin
p- kwa madarasa yaliyowekwapadding

Ambapo pande ni moja ya:

t- kwa madarasa yaliyowekwa margin-topaupadding-top
b- kwa madarasa yaliyowekwa margin-bottomaupadding-bottom
s- (anza) kwa madarasa yaliyowekwa margin-leftau padding-leftkatika LTR, margin-rightau padding-rightkatika RTL
e- (mwisho) kwa madarasa yaliyowekwa margin-rightau padding-rightkatika LTR, margin-leftau padding-leftkatika RTL
x- kwa madarasa ambayo yanaweka wote *-leftna*-right
y- kwa madarasa ambayo yanaweka wote *-topna*-bottom
tupu - kwa madarasa ambayo yanaweka marginau paddingpande zote 4 za kipengele

Ambapo saizi ni moja ya:

0- kwa madarasa ambayo huondoa marginau paddingkwa kuiweka0
1- (kwa chaguo-msingi) kwa madarasa ambayo yanaweka marginau paddingto$spacer * .25
2- (kwa chaguo-msingi) kwa madarasa ambayo yanaweka marginau paddingto$spacer * .5
3- (kwa chaguo-msingi) kwa madarasa ambayo yanaweka marginau paddingto$spacer
4- (kwa chaguo-msingi) kwa madarasa ambayo yanaweka marginau paddingto$spacer * 1.5
5- (kwa chaguo-msingi) kwa madarasa ambayo yanaweka marginau paddingto$spacer * 3
auto- kwa madarasa ambayo yanaweka marginkiotomatiki

(Unaweza kuongeza saizi zaidi kwa kuongeza maingizo kwenye utofauti wa $spacersramani ya Sass.)

Mifano

Hapa kuna mifano ya uwakilishi wa madarasa haya:

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

Kuweka katikati kwa usawa

Zaidi ya hayo, Bootstrap pia inajumuisha .mx-autodarasa la kuweka mlalo maudhui ya kiwango cha kuzuia upana usiobadilika—yaani, maudhui ambayo yana display: blockna widthseti—kwa kuweka ukingo mlalo hadi auto.

Kipengele kilicho katikati

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

Ukingo hasi

Katika CSS, marginsifa zinaweza kutumia maadili hasi ( paddinghayawezi). Pambizo hizi hasi huzimwa kwa chaguo-msingi , lakini zinaweza kuwashwa katika Sass kwa kuweka $enable-negative-margins: true.

Sintaksia ni karibu sawa na huduma chaguo-msingi, chanya, lakini pamoja na nyongeza ya nkabla ya saizi iliyoombwa. Hapa kuna darasa la mfano ambalo ni kinyume cha .mt-1:

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

Pengo

Unapotumia display: grid, unaweza kutumia gaphuduma kwenye kontena kuu la gridi ya taifa. Hii inaweza kuokoa kwa kulazimika kuongeza huduma za ukingo kwenye vipengee vya gridi ya mtu binafsi (watoto wa display: gridkontena). Huduma za Pengo hujibu kwa chaguomsingi, na hutolewa kupitia huduma zetu API, kulingana na $spacersramani ya Sass.

Kipengee cha gridi 1

Kipengee cha gridi 2

Kipengee cha gridi 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>

Usaidizi unajumuisha chaguo jibu kwa sehemu zote za gridi ya Bootstrap, pamoja na saizi sita kutoka kwa $spacersramani ( 0- 5). Hakuna .gap-autodarasa la matumizi kwani ni sawa na .gap-0.

Sass

Ramani

Huduma za kuweka nafasi zinatangazwa kupitia ramani ya Sass na kisha kuzalishwa na API ya huduma zetu.

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

API ya Huduma

Huduma za kuweka nafasi zinatangazwa katika API ya huduma zetu katika scss/_utilities.scss. Jifunze jinsi ya kutumia API ya huduma.

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