Umwanya

Bootstrap ikubiyemo intera nini ya shorthand yitabiriye margin, padding, hamwe nicyiciro cyingirakamaro kugirango uhindure ikintu kigaragara.

Kuriyi page

Margin na padi

Shinga igisubizo-cyiza margincyangwa paddingindangagaciro kubintu cyangwa igice cyimpande zacyo hamwe namasomo magufi. Harimo inkunga kubintu byihariye, ibintu byose, hamwe na vertical na horizontal. Amasomo yubatswe kuva ikarita ya Sass isanzwe kuva .25remkuri 3rem.

Ukoresheje uburyo bwa CSS Grid module? Tekereza gukoresha icyuho cyingirakamaro .

Icyitonderwa

Umwanya utanga ibikoresho bikoreshwa mubice byose, kuva xskuri xxl, nta magambo ahinnye muri byo. Ibi ni ukubera ko ayo masomo akoreshwa kuva min-width: 0hejuru no hejuru, bityo ntagengwa nikibazo cyitangazamakuru. Ibice bisigaye, ariko, birimo amagambo ahinnye.

Amasomo yitiriwe akoresheje imiterere {property}{sides}-{size}ya xsna {property}{sides}-{breakpoint}-{size},,,, na sm.mdlgxlxxl

Aho umutungo ari umwe muri:

m- ku masomo yashizehomargin
p- ku masomo yashizehopadding

Aho impande ari imwe muri:

t- ku masomo ashyiraho margin-topcyangwapadding-top
b- ku masomo ashyiraho margin-bottomcyangwapadding-bottom
s- (tangira) kumasomo ashyiraho margin-leftcyangwa padding-leftmuri LTR, margin-rightcyangwa padding-rightmuri RTL
e- (iherezo) kumasomo ashyiraho margin-rightcyangwa padding-rightmuri LTR, margin-leftcyangwa padding-leftmuri RTL
x- kumasomo ashyiraho byombi *-leftna*-right
y- kumasomo ashyiraho byombi *-topna*-bottom
ubusa - kumasomo ashyiraho a margincyangwa paddingkumpande 4 zose yibintu

Aho ingano ari imwe muri:

0- kumasomo akuraho margincyangwa cyangwa paddingkuyashyiraho0
1- (Mburabuzi) kumasomo ashyiraho margincyangwa paddingkuri$spacer * .25
2- (Mburabuzi) kumasomo ashyiraho margincyangwa paddingkuri$spacer * .5
3- (Mburabuzi) kumasomo ashyiraho margincyangwa paddingkuri$spacer
4- (Mburabuzi) kumasomo ashyiraho margincyangwa paddingkuri$spacer * 1.5
5- (Mburabuzi) kumasomo ashyiraho margincyangwa paddingkuri$spacer * 3
auto- kumasomo ashyiraho marginimodoka

(Urashobora kongeramo ubunini wongeyeho ibyanditswe kuri $spacersSass ikarita ihinduka.)

Ingero

Dore ingero zimwe zihagarariye aya masomo:

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

Gutambika kuri horizontal

Byongeye kandi, Bootstrap ikubiyemo kandi .mx-autoicyiciro cyo gutambukiranya hagati yubugari bwagutse buringaniye-ni ukuvuga ibirimo bifite display: blockhamwe widthnugushiraho - mugushiraho impande zombi auto.

Ikintu cyibanze

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

Inyungu mbi

Muri CSS, marginimitungo irashobora gukoresha indangagaciro mbi ( paddingntishobora). Izi ntera mbi zahagaritswe byanze bikunze , ariko zirashobora gukoreshwa muri Sass mugushiraho $enable-negative-margins: true.

Igishushanyo ni kimwe nkibisanzwe, byiza margin yingirakamaro, ariko hamwe ninyongera nmbere yubunini bwasabwe. Dore urugero rwicyiciro gihabanye na .mt-1:

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

Icyuho

Mugihe ukoresheje display: grid, urashobora gukoresha gapibikoresho byingirakamaro kuri kontineri yababyeyi. Ibi birashobora kuzigama mugomba kongeramo ibikorwa byingirakamaro kubintu bya gride (abana ba display: gridkontineri). Ibikoresho byingirakamaro birasubizwa byanze bikunze, kandi byakozwe binyuze mubikorwa byacu API, bishingiye ku $spacersikarita ya Sass.

Ingingo ya 1

Ikintu cya gride 2

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

Inkunga ikubiyemo amahitamo yitabiriye ibintu byose bya Bootstrap ya gride yacitse, kimwe nubunini butandatu uhereye ku $spacersikarita ( 0- 5). Nta .gap-autobyiciro byingirakamaro nkuko bigenda neza nkibyo .gap-0.

Sass

Ikarita

Umwanya utanga serivisi utangazwa ukoresheje ikarita ya Sass hanyuma ukabyara hamwe nibikorwa byacu 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);

Ibikorwa API

Umwanya utanga serivisi watangajwe mubikorwa byacu API muri scss/_utilities.scss. Wige gukoresha ibikoresho 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
    ),