Tazara

Bootstrap ya haɗa da faffadan kewayon gajarta amsa gajarta, padding, da azuzuwan masu amfani don canza kamannin wani abu.

A wannan shafi

Margin da padding

Sanya ma'amala marginko paddingƙima ga wani yanki ko ɓangaren ɓangaren sa tare da azuzuwan gajerun hannu. Ya haɗa da tallafi don kaddarorin mutum ɗaya, duk kaddarorin, da kaddarorin a tsaye da a kwance. An gina azuzuwan daga taswirar Sass tsoho daga .25remzuwa 3rem.

Ana amfani da tsarin shimfidar Grid na CSS? Yi la'akari da yin amfani da mai amfani tata .

Sanarwa

Abubuwan amfani tazara waɗanda suka shafi duk wuraren karya, daga xszuwa xxl, ba su da taƙaitaccen wuri a cikinsu. Wannan saboda waɗannan azuzuwan ana amfani da su daga min-width: 0sama da sama, don haka ba su da alaƙa da tambayar kafofin watsa labarai. Ragowar wuraren karya, duk da haka, sun haɗa da gajarta wurin hutu.

Sunayen azuzuwan suna amfani da tsari {property}{sides}-{size}don , , , , da .xs{property}{sides}-{breakpoint}-{size}smmdlgxlxxl

Inda dukiya take daya daga cikin:

m- don azuzuwan da aka saitamargin
p- don azuzuwan da aka saitapadding

Inda bangarorin daya ne:

t- don azuzuwan da suka saita margin-topkopadding-top
b- don azuzuwan da suka saita margin-bottomkopadding-bottom
s- (fara) don azuzuwan da suka saita margin-leftko padding-lefta cikin LTR, margin-rightko padding-righta cikin RTL
e- (ƙarshen) don azuzuwan da suka saita margin-rightko padding-righta cikin LTR, margin-leftko padding-lefta cikin RTL
x- domin azuzuwan cewa saita biyu *-leftda kuma*-right
y- domin azuzuwan cewa saita biyu *-topda kuma*-bottom
blank - don azuzuwan da suka saita marginko paddinga duk bangarorin 4 na kashi

Inda girman daya daga cikin:

0- don azuzuwan da ke kawar da marginko paddingta saita shi zuwa0
1- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer * .25
2- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer * .5
3- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer
4- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer * 1.5
5- (ta tsohuwa) don azuzuwan da suka saita marginko paddingzuwa$spacer * 3
auto- don azuzuwan da ke saita marginzuwa auto

(Zaka iya ƙara ƙarin masu girma dabam ta ƙara shigarwar zuwa $spacersmadaidaicin taswirar Sass.)

Misalai

Ga wasu misalan wakilai na waɗannan azuzuwan:

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

Tsaya a kwance

Bugu da ƙari, Bootstrap kuma ya haɗa da .mx-autoaji don a kwance madaidaiciya-tsaye ƙayyadadden abun ciki matakin toshe-wato abun ciki da ke display: blockda widthsaiti- ta hanyar saita madaidaitan maginin zuwa auto.

Abun tsakiya

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

Rage mara kyau

A cikin CSS, marginkaddarorin na iya amfani da munanan dabi'u ( paddingba za su iya ba). Ana kashe waɗannan ragi mara kyau ta tsohuwa , amma ana iya kunna su a cikin Sass ta saitin $enable-negative-margins: true.

Rubutun ya kusan iri ɗaya ne da tsoho, kayan aikin gefe masu inganci, amma tare da ƙari nkafin girman da ake nema. Ga misali ajin wanda ke da sabanin haka .mt-1:

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

Tazari

Lokacin amfani da display: grid, zaku iya yin amfani da gapkayan aiki akan kwandon grid na iyaye. Wannan na iya ajiyewa akan samun ƙara abubuwan amfani da gefe zuwa abubuwan grid ɗaya ɗaya ('ya'yan display: gridakwati). Abubuwan amfani da rata suna amsawa ta tsohuwa, kuma ana samarwa ta hanyar API ɗin mu, bisa $spacerstaswirar Sass.

Grid abu 1

Grid abu 2

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

Taimako ya haɗa da zaɓuɓɓukan amsawa ga duk wuraren grid na Bootstrap, da kuma masu girma dabam shida daga $spacerstaswira ( 0- 5). Babu .gap-autoaji mai amfani kamar yadda yake daidai da .gap-0.

Sass

Taswirori

Ana ayyana abubuwan amfani tazara ta taswirar Sass sannan a samar da API ɗin mu.

$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);

API ɗin Utilities

Ana bayyana abubuwan amfani tazara a cikin API ɗin mu a cikin scss/_utilities.scss. Koyi yadda ake amfani da API ɗin abubuwan amfani.

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