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.
Na lokasa oyo
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 auto
na 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
<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
<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.
<img src="..." class="mw-100" alt="...">
Max-hauteur 100% Ezali na .
<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)
),