Ku pima mpimo

Hi ku olova endla elemente yo anama kumbe yo leha ku fana na switirhisiwa swa hina swa ku anama na ku leha.

Eka tluka leri

Xaka na mutswari

Switirhisiwa swa ku anama na ku tlakuka swi endliwa ku suka eka API ya vukorhokeri eka _utilities.scss. Ku katsa na nseketelo wa 25%, 50%, 75%, 100%, na autohi ku tiyimisela. Cinca mimpimo yoleyo tani hi leswi u lavaka ku tumbuluxa switirhisiwa swo hambana laha.

Ku anama 25% .

Ku anama 50% .

Ku anama 75% .

Ku anama 100% .

Ku anama ka 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>

Ku leha 25% .

Ku leha 50% .

Ku leha 75% .

Ku leha 100% .

Ku leha ka 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>

U nga ha tlhela u tirhisa max-width: 100%;na max-height: 100%;switirhisiwa loko swi laveka.

html

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

Max-ku leha 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>

Ku yelana na xivono

U nga ha tlhela u tirhisa switirhisiwa ku veka ku anama na ku tlakuka loko swi pimanisiwa na xivono.

<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

API ya switirhisiwa

Switirhisiwa swo pima swi tivisiwile eka API ya hina ya switirhisiwa hi scss/_utilities.scss. Dyondza ndlela yo tirhisa API ya switirhisiwa.

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