Kala dheeraynta

Bootstrap waxa ku jira tiro balaadhan oo ah margin jawaab-gaaban, suuf, iyo fasalada utility gap si wax looga beddelo muuqaalka shay.

Boggaan

Margin iyo suufka

U qoondee saaxiibtinimo-saaxiibtinimo marginama paddingqiyamka shay ama qayb ka mid ah dhinacyadiisa oo leh fasalo gaaban. Waxaa ku jira taageerada guryaha gaarka ah, dhammaan guryaha, iyo kuwa toosan iyo kuwa jiifka ah. Fasallada waxaa laga dhisay khariidadda Sass ee caadiga ah oo u dhaxaysa .25remilaa 3rem.

Isticmaalka qaabka qaabaynta Grid ee CSS? Ka fikir inaad isticmaasho utility gap .

Ogaysiis

Kala dheeraynta yutiilitida ee khuseeya dhammaan meelaha jabinta, laga bilaabo xsilaa xxl, kuma jiraan wax soo gaabin ah. Tani waa sababta oo ah fasalladaas waxaa laga dalbadaa min-width: 0kor iyo kor, sidaas darteed kuma xirna su'aal warbaahineed. Dhibcaha soo haray, si kastaba ha ahaatee, waxaa ku jira soo gaabinta barta jabinta.

{property}{sides}-{size}Fasallada waxaa lagu magacaabay qaabka xsiyo {property}{sides}-{breakpoint}-{size}, sm, md, lg, xliyo xxl.

Halka hantidu ka mid tahay:

m- fasallada dhigaymargin
p- fasallada dhigaypadding

Halka dhinacyadu ay ka mid yihiin:

t- fasallada dhigay margin-topamapadding-top
b- fasallada dhigay margin-bottomamapadding-bottom
s- (bilow) fasallada dhigay margin-leftama padding-leftku jira LTR, margin-rightama padding-rightRTL
e- (dhammaadka) ee fasallada dhigay margin-rightama padding-rightku jira LTR, margin-leftama padding-leftRTL
x- fasallada dhigay labada *-leftiyo*-right
y- fasallada dhigay labada *-topiyo*-bottom
maran - fasallada dhigay a marginama paddingdhammaan 4 dhinac ee curiyaha

Halka cabbirku yahay mid ka mid ah:

0- fasallada baabi'iya marginama paddingdejinaya0
1- (sida caadiga ah) ee fasallada dejiya marginama paddingku dhejiya$spacer * .25
2- (sida caadiga ah) ee fasallada dejiya marginama paddingku dhejiya$spacer * .5
3- (sida caadiga ah) ee fasallada dejiya marginama paddingku dhejiya$spacer
4- (sida caadiga ah) ee fasallada dejiya marginama paddingku dhejiya$spacer * 1.5
5- (sida caadiga ah) ee fasallada dejiya marginama paddingku dhejiya$spacer * 3
auto- fasallada u dejinaya marginauto

(Waxaad ku dari kartaa cabbirro badan adiga oo ku daraya gelinta $spacersdoorsoomiyaha khariidada Sass.)

Tusaalooyinka

Waa kuwan qaar ka mid ah tusaalayaal matala fasalladan:

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

Horizontal centering

Intaa waxaa dheer, Bootstrap sidoo kale waxaa ku jira .mx-autofasal si toos ah u dhexeya nuxurka heerka block ballac go'an-taasi waxa uu ka kooban yahay display: blockiyo widthgo'an-adiga oo dejinaya soohdimaha tooska ah auto.

Cunsurka dhexe

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

Margin xun

CSS gudaheeda, marginguryaha waxay isticmaali karaan qiimayaal taban ( paddingma karaan). Marginsyada taban waa la naafo si caadi ah , laakiin waxaa lagu awoodsiin karaa Sass iyadoo la dejinayo $enable-negative-margins: true.

Syntax-ku wuxuu ku dhow yahay inuu la mid yahay kan caadiga ah, yutiilitiyada margin togan, laakiin marka lagu daro ka nhor cabbirka la codsaday. Waa kan tusaale tusaale ka soo horjeeda .mt-1:

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

Farqiga

Markaad isticmaalayso display: grid, waxaad isticmaali kartaa gapyutiilitida weelka grid waalidka. Tani waxay badbaadin kartaa inaad ku darto yutiilitida margin alaabta sharoobada ah (carruurta display: gridweel). Gap utilities waa kuwo si caadi ah uga jawaaba, waxaana lagu soo saaraa adeegyadayada API, oo ku salaysan $spacerskhariidadda Sass.

Shayga grid 1

Shayga grid 2

Shayga grid 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>

Taageerada waxaa ku jira xulashooyin jawaab celin ah oo loogu talagalay dhammaan Bootstrap's gunnada goynta, iyo sidoo kale lix cabbir ee $spacerskhariidada ( 0- 5). Ma jiro .gap-autofasalka utility maadaama uu si wax ku ool ah ula mid yahay .gap-0.

Sass

Maab

Utility-ka fogeynta waxaa lagu caddeeyaa khariidadda Sass ka dibna waxaa lagu soo saaray adeegyadayada API.

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

Utilities API

Utility-ka fogeynta waxaa lagu caddeeyey adeegyadayada API gudaha scss/_utilities.scss. Baro sida loo isticmaalo API utilities.

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