Titobi

Ni irọrun ṣe ohun kan bi fife tabi bi giga pẹlu iwọn ati awọn ohun elo giga wa.

Lori iwe yi

Ojulumo si obi

Iwọn ati awọn ohun elo giga jẹ ipilẹṣẹ lati inu API IwUlO ni _utilities.scss. Pẹlu atilẹyin fun 25%, 50%, 75%, 100%ati autonipasẹ aiyipada. Ṣe atunṣe awọn iye wọnyẹn bi o ṣe nilo lati ṣe agbekalẹ awọn ohun elo oriṣiriṣi nibi.

Ìbú 25%

Ìbú 50%

Ìbú 75%

Ìbú 100%

Aifọwọyi iwọn

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>

Giga 25%

Giga 50%

Giga 75%

Giga 100%

Ọkọ ayọkẹlẹ giga

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>

O tun le lo max-width: 100%;ati max-height: 100%;awọn ohun elo bi o ṣe nilo.

html

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

Iwọn giga julọ 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>

Ojulumo si wiwo

O tun le lo awọn ohun elo lati ṣeto iwọn ati giga ni ibatan si ibudo wiwo.

<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

API Awọn ohun elo

Awọn ohun elo iwọn ni a kede ni API awọn ohun elo wa ni scss/_utilities.scss. Kọ ẹkọ bi o ṣe le lo API awọn ohun elo.

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