Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
Check
in English

Saayizii gochuu

Faayidaa bal'inaafi olka'iinsa keenyaatiin salphaatti elementii tokko akka bal'ina ykn akka dheeratu godhi.

Fira warraa wajjin

Faayidaaleen bal'inaa fi olka'iinsaa API faayilii irraa _utilities.scss. Deeggarsa 25%, 50%, 75%, 100%, fi autodurtii of keessatti qabata. Gatiiwwan sana akka fayyadamtoota adda addaa asitti uumuu barbaaddutti fooyyessi.

Bal'inni isaa 25% .
Bal'inni isaa 50% .
Bal'inni isaa 75% .
Bal'inni isaa 100% .
Bal'inni isaa auto
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>
Dheerinni 25% .
Dheerinni 50% .
Dheerinni 75% .
Olka'iinsa 100% .
Olka'iinsa auto
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>

Akkasumas akka barbaachisummaa isaatti fayyadamuu max-width: 100%;fi max-height: 100%;utilities fayyadamuu dandeessu.

Placeholder Max-width 100%
html
<img src="..." class="mw-100" alt="...">
Max-olka'iinsa 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>

Bakka ilaalchaa wajjin walqabatee

Akkasumas bal'ina fi olka'iinsa walqabsiisa mul'ataa wajjin saaguuf faayilii fayyadamuu dandeessa.

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

API faayidaa

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

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