Qhov loj me

Yooj yim ua ib lub caij dav lossis siab siab nrog peb qhov dav thiab qhov siab siv.

Ntawm nplooj ntawv no

Kwv tij niam txiv

Qhov dav thiab qhov siab qhov hluav taws xob yog tsim los ntawm kev siv hluav taws xob API hauv _utilities.scss. Xws li kev txhawb nqa rau 25%, 50%, 75%, 100%, thiab autolos ntawm lub neej ntawd. Hloov kho cov txiaj ntsig raws li koj xav tau los tsim cov khoom siv sib txawv ntawm no.

Dav 25%

Dav 50%

Dav 75%

Dav 100%

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

Qhov siab 25%

Qhov siab 50%

Qhov siab 75%

Qhov siab 100%

Qhov siab 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>

Koj tseem tuaj yeem siv max-width: 100%;thiab max-height: 100%;cov khoom siv hluav taws xob raws li xav tau.

html

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

Max-siab 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>

txheeb ze rau lub viewport

Koj tuaj yeem siv cov khoom siv los teeb tsa qhov dav thiab qhov siab txheeb ze rau qhov chaw saib.

<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 cov nqi hluav taws xob tau tshaj tawm hauv peb cov khoom siv hluav taws xob API hauv scss/_utilities.scss. Kawm paub siv cov khoom siv hluav taws xob API li cas.

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