Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
Check
in English

Famaritana

Manaova mora singa iray ho sakany na havony miaraka amin'ny fitaovana ilaina amin'ny sakany sy ny haavony.

Mifandray amin'ny ray aman-dreny

Ny fitaovana sakany sy ny haavony dia novokarina avy amin'ny API fampiasa amin'ny _utilities.scss. Ahitana fanohanana ny 25%, 50%, 75%, 100%, ary autony default. Ovao ireo soatoavina ireo satria mila mamorona fitaovana samihafa eto ianao.

sakany 25%
sakany 50%
sakany 75%
sakany 100%
Auto sakany
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>
Haavo 25%
Haavo 50%
Haavo 75%
Haavo 100%
Haavo fiara
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>

Azonao atao ihany koa ny mampiasa max-width: 100%;sy max-height: 100%;ny utility raha ilaina.

Placeholder Max-width 100%
html
<img src="..." class="mw-100" alt="...">
Haavo ambony indrindra 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>

Mifandray amin'ny viewport

Azonao atao ihany koa ny mampiasa fitaovana mba hametrahana ny sakany sy ny haavony mifandraika amin'ny viewport.

<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

Utilities API

Ny famatsiana fitaovana dia ambara ao amin'ny utilitaria API ao amin'ny scss/_utilities.scss. Ianaro ny fomba fampiasana ny utility 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)
    ),