Ejupi contenido principal-pe Eike docs jeguatahápe
Check
in English

Dimensionamiento rehegua

Facilmente jajapo petet elemento ipypuku téra ijyvateháicha ñande utilidad ancho ha altura reheve.

Relativo pe túva ndive

Umi purupyrã ipypuku ha ijyvate rehegua oñemboheko API purupyrãgui _utilities.scss. Oike pytyvõ 25%, 50%, 75%, 100%, ha autopor defecto-pe g̃uarã. Emoambue umi mba’ekuaarã tekotevẽháicha emoheñói opaichagua tembipuru’i ko’ápe.

Ipukukue 25% .
Ipukukue 50% .
Ipukukue 75% .
Ipukukue 100% .
Ancho auto rehegua
html rehegua
<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>
Ijyvate 25% .
Ijyvate 50% .
Ijyvate 75% .
Ijyvate 100% .
Altura auto rehegua
html rehegua
<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>

Ikatu avei reipuru max-width: 100%;ha max-height: 100%;umi utilidad oñeikotevẽháicha.

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

Relativo pe jehechaukaha rehegua

Ikatu avei eipuru purupyrã emohenda hag̃ua ipekue ha ijyvateha pe jehechaukaha rehegua.

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

API de Utilidades rehegua

Umi utilidad tamaño rehegua ojedeclara ore utilidad API-pe ary scss/_utilities.scss. Eikuaa mba’éichapa eipurukuaa API utilidad rehegua.

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