Sayz fɔ di sayz

I izi fɔ mek wan ɛlimɛnt as waid ɔ as lɔng wit wi wid ɛn ayt yutiliti dɛn.

Na dis pej

Fambul to di mama ɔ papa

Width ɛn height yutiliti dɛn de jenarayz frɔm di yutiliti API insay _utilities.scss. Inklud sɔpɔt fɔ 25%, 50%, 75%, 100%, ɛn autobay difɔlt. Modify dɛn valyu dɛn de as yu nid fɔ jenarayz difrɛn yutiliti dɛn ya.

Width na 25%

Width na 50%

Width na 75%

Width na 100%

Width otomatik

html

<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>

Ayt na 25% .

Ayt na 50%

Ayt na 75%

Ayt na 100%

Ayt ɔto

html

<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>

Yu kin yuz max-width: 100%;ɛn max-height: 100%;yutiliti dɛn bak as nid de.

html

<img src="..." class="mw-100" alt="...">

Maks-heit na 100%

html

<div style="height: 100px; background-color: rgba(255,0,0,.1);">
  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.1);">Max-height 100%</div>
</div>

Rilaytiv to di say we dɛn de si di pikchɔ

Yu kin yuz yutiliti dɛn bak fɔ sɛt di wit ɛn ayt we yu kɔmpia am to di say we yu de si.

<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>

Sass bin de

Yutiliti dɛn API

Sayz yutiliti dɛn de diklar insay wi yutiliti API insay scss/_utilities.scss. Lan aw fɔ yuz di yutiliti dɛn API.

    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    "max-width": (
      property: max-width,
      class: mw,
      values: (100: 100%)
    ),
    "viewport-width": (
      property: width,
      class: vw,
      values: (100: 100vw)
    ),
    "min-viewport-width": (
      property: min-width,
      class: min-vw,
      values: (100: 100vw)
    ),
    "height": (
      property: height,
      class: h,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    "max-height": (
      property: max-height,
      class: mh,
      values: (100: 100%)
    ),
    "viewport-height": (
      property: height,
      class: vh,
      values: (100: 100vh)
    ),
    "min-viewport-height": (
      property: min-height,
      class: min-vh,
      values: (100: 100vh)
    ),