Pitani kuzinthu zazikulu Pitani kumayendedwe adocs
Check
in English

Kukula

Pangani chinthu kukhala chotambalala kapena chachitali ndi zida zathu za m'lifupi ndi kutalika.

Chibale kwa kholo

Zothandizira m'lifupi ndi kutalika zimapangidwa kuchokera ku utility API mu _utilities.scss. Zimaphatikizapo chithandizo cha 25%, 50%, 75%, 100%, autondi mwachisawawa. Sinthani zikhalidwezo ngati mukufunikira kuti mupange zofunikira zosiyanasiyana pano.

M'lifupi 25%
M'lifupi 50%
M'lifupi 75%
Kukula 100%
M'lifupi 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>
Kutalika 25%
Kutalika 50%
Kutalika 75%
Kutalika 100%
Kutalika 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>

Mukhozanso kugwiritsa ntchito max-width: 100%;ndi max-height: 100%;zofunikira ngati pakufunika.

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

Zogwirizana ndi malo owonera

Mukhozanso kugwiritsa ntchito zofunikira kuti muyike m'lifupi ndi kutalika kwake mogwirizana ndi malo owonera.

<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

Sizing utility amalengezedwa mu zida zathu API mu scss/_utilities.scss. Phunzirani momwe mungagwiritsire ntchito 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)
    ),