Addaan fageenyaa

Bootstrap bifa elementii tokkoo fooyyessuuf gitaalee faayidaa margina, padding, fi qaawwa deebii gabaabaa bal'aa of keessatti qabata.

Fuula kana irratti

Margin fi padding

Deebii-michuu marginykn paddinggatiiwwan elementii ykn tuuta xiqqaa cinaacha isaa gita gabaabaa waliin ramadi. Deeggarsa qabeentota dhuunfaa, qabeentota hunda, fi qabeentota dhaabbataa fi qajeelaa of keessatti qabata. Gitoota kaartaa Sass durtii irraa hanga .25remhanga 3rem.

Moojulii haalata CSS Grid fayyadamuu? Inumaa faayidaa qaawwa fayyadamuu yaadaa .

Nootashinii

Faayidaaleen addaan baasuu kanneen tuqaawwan ciccituu hunda irratti raawwatiinsa qaban, irraa xsgara xxl, gabaabduu tuqaawwan ciccituu isaan keessaa hin qaban. Sababni isaas, gitawwan sun irraa min-width: 0fi ol hojii irra waan oolan, kanaaf gaaffii miidiyaatiin waan hin hidhamneef. Qabxiileen cabbii hafan garuu gabaabduu qabxii cabbii of keessatti qabatu.

Gitoota akkaataa , , , , fi {property}{sides}-{size}tiif xsfi {property}{sides}-{breakpoint}-{size}tiif fayyadamuun moggaafamu .smmdlgxlxxl

Bakka qabeenyi keessaa tokko ta’etti:

m- dareewwan saaganiifmargin
p- dareewwan saaganiifpadding

Bakka sides keessaa tokko ta'etti:

t- dareewwan margin-topykn saaganiifpadding-top
b- dareewwan margin-bottomykn saaganiifpadding-bottom
s- (jalqaba) gitaalee saaganiif margin-leftykn padding-leftLTR keessatti, margin-rightykn padding-rightRTL keessatti
e- (dhuma) gitaalee saaganiif margin-rightykn padding-rightLTR keessatti, margin-leftykn padding-leftRTL keessatti
x- daree lamaanuu *-leftfi*-right
y- daree lamaanuu *-topfi*-bottom
duwwaa - gita a marginykn paddinggama 4 hunda elementii irratti saaganiif

Bakka guddinni tokko ta'etti:

0margin- dareewwan ykn paddinggara saaguun dhabamsiisaniif0
1- (akka durtiitti) gitaalee marginykn paddinggara saaganiif$spacer * .25
2- (akka durtiitti) gitaalee marginykn paddinggara saaganiif$spacer * .5
3- (akka durtiitti) gitaalee marginykn paddinggara saaganiif$spacer
4- (akka durtiitti) gitaalee marginykn paddinggara saaganiif$spacer * 1.5
5- (akka durtiitti) gitaalee marginykn paddinggara saaganiif$spacer * 3
auto- gitaalee margingara autotti saaganiif

$spacers(Galtee jijjiiramaa kaartaa Sass irratti dabaluudhaan hammangaa dabalataa dabaluu dandeessa .)

Fakkeenyaaf

Fakkeenyonni bakka bu’oota gita kanaa tokko tokko kunooti:

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

Giddugaleessa gochuu horizontal ta’uu

Dabalataan, Bootstrap akkasumas .mx-autogita qabiyyee sadarkaa uggura bal'ina dhaabbataa qajeelaa giddu galeessa gochuuf-jechuunis, qabiyyee qabuu display: blockfi widthtuuta-margaa qajeelaa gara auto.

Elementii giddugaleessa qabu

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

Margiin negaatiivii ta’e

CSS keessatti, marginqabeentota gatiiwwan negaatiivii fayyadamuu paddingdanda'u ( hin danda'amu). Marginoonni negaatiivii kun durtiidhan hanqifamu , garuu Sass keessatti qindaa'uun dandeessisuun ni danda'ama $enable-negative-margins: true.

Gingilchaan faayidaalee margina durtii, pozaatiivii wajjin wal fakkaata jechuun ni danda'ama, garuu nhammangaa gaafatame dura dabaluu wajjin. Kunoo gita fakkeenyaa kan faallaa .mt-1:

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

Qaawwaa

Yeroo , fayyadamtu qabduu tarjaa warraa irratti display: gridfayyadamuu dandeessa . Kunis wanta tarjaa dhuunfaa (ijoollee qabduu) gapirratti faayidaa margina dabaluu qusachuu danda'a . display: gridFaayidaaleen qaawwaa durtiidhaan deebii kennu, fi karaa API faayidaa keenyaa, $spacerskaartaa Sass irratti hundaa'uun uumamu.

Wanti giiridii 1.

Qabxii giiridii 2.

Qabxii giiridii 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>

Deeggarsi filannoowwan deebii kennan qabxiiwwan cabsuu giiridii Bootstrap hundaaf, akkasumas safara ja'a $spacerskaartaa irraa ( 0– 5) of keessatti qabata. .gap-autoBu'a qabeessa ta'ee wajjin tokko waan ta'eef gita faayidaa hin jiru .gap-0.

Sass jedhama

Kaartaa

Faayidaaleen addaan fageenyaa karaa kaartaa Sass labsamanii sana booda API faayidaa keenyaatiin uumamu.

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

API faayidaa

Faayidaaleen addaan baasuu API faayidaa keenya keessatti labsamu bara scss/_utilities.scss. Akkaataa API faayilii itti fayyadamtu baradhu.

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