Salá koleka na makambo ya ntina Salta na navigation ya docs
Check
in English

Kosala bonene ya biloko

Facilement sala élément moko ya large to ya molayi lokola na ba utilitaires na biso ya largeur na hauteur.

Ndeko ya moboti

Ba utilitaires ya largeur na hauteur esalemi na API ya utilitaire na _utilities.scss. Esangisi lisungi mpo na 25%, 50%, 75%, 100%, mpe autona ndenge ya libela. Modifier ba valeurs wana ndenge esengeli o produire ba utilitaires différentes awa.

Bolai ya 25% .
Bolai ya 50% .
Bolai ya 75% .
Bolai ya 100%
Largura 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>
Bolai 25% .
Bolai 50% .
Bolai 75% .
Bolai 100% .
Taille 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>

Okoki mpe kosalela max-width: 100%;mpe max-height: 100%;ba utilités soki esengeli.

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

Relatif na esika ya kotala

Okoki mpe kosalela ba utilitaires mpo na kotiya bonene mpe bosanda na boyokani na esika ya kotala.

<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 oyo azali

API ya ba utilitaires

Ba utilitaires ya dimensionnement esakolami na API ya ba utilitaires na biso na scss/_utilities.scss. Yekola ndenge ya kosalela API ya ba utilitaires.

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