Sizing (Sizing) kɛ

Aw bɛ fɛn dɔ kɛ nɔgɔya la min ka bon walima ka janya ni an ka bonya ni janya nafamafɛnw ye.

Nin ɲɛ in kan

Somɔgɔw ni bangebaga

bonya ni janya nafalanw bɛ sɔrɔ nafalan API la san _utilities.scss. A bɛ dɛmɛ don 25%, 50%, 75%, 100%, ani autoa daminɛ na. O nafaw bεε bε Yεlεma i n’a fɔ i mago bε cogo min na ka nafalan suguya wɛrɛw Sɔrɔ yan.

Bonya 25% ye .

Largeur 50% ye .

Bonya 75% .

Largeur 100% ye .

Largeur auto

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

Janya 25% ye .

Janya 50% ye .

Kɔrɔya 75%

Janya 100%

Janya auto

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

Aw bɛ se fana ka baara kɛ max-width: 100%;ni ani max-height: 100%;nafamafɛnw ye i n’a fɔ aw mago bɛ cogo min na.

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

Max-haute 100% Bamako

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

A bɛ tali kɛ filɛlikɛyɔrɔ la

Aw bɛ se fana ka baara kɛ ni nafamafɛnw ye walasa ka bonya ni janya sigi ka kɛɲɛ ni filɛlikɛlan ye.

<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 ye

Nafamafɛnw API

Sizing utilities bɛ fɔ an ka utilities API kɔnɔ san scss/_utilities.scss. Aw ye baara kɛcogo dɔn ni utilities API ye.

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