Sizing ƒe lolome

Wɔ element aɖe wòakeke alo wòakɔ nenema bɔbɔe kple míaƒe kekeme kple kɔkɔme ƒe dɔwɔnuwo.

Le axa sia dzi

Dzila la ƒe ƒometɔ

Wowɔa kekeme kple kɔkɔme ƒe dɔwɔnuwo tso dɔwɔnu ƒe API me le _utilities.scss. Kpekpeɖeŋunana 25%, 50%, 75%, 100%, kple autole gɔmedzedzea me hã le eme. Trɔ asi le asixɔxɔ mawo ŋu abe alesi wòhiã be nàwɔ dɔwɔnu vovovowo le afisia ene.

Kekeme 25% .

Kekeme 50% .

Kekeme 75% .

Kekeme 100% .

Kekeme ƒe 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>

Kɔkɔme 25% .

Kɔkɔme 50% .

Kɔkɔme 75% .

Kɔkɔme 100% .

Kɔkɔme 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>

Àte ŋu azã max-width: 100%;kple max-height: 100%;nuzazãwo hã ne ehiã.

html

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

Max-kɔkɔme 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>

Ne wotsɔe sɔ kple nukpɔkpɔ ƒe ʋɔtrua

Àteŋu azã dɔwɔnuwo hã atsɔ aɖo kekeme kple kɔkɔme ɖe nukpɔkpɔa ŋu.

<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 ƒe nyawo

Dɔwɔnuwo ƒe API

Woɖe gbeƒã sizing utilities le míaƒe utilities API me le scss/_utilities.scss. Srɔ̃ alesi nàzã utilities API lae.

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