סייזינג

מאַכן אַן עלעמענט ווי ברייט אָדער ווי הויך מיט אונדזער ברייט און הייך יוטילאַטיז.

אויף דעם בלאַט

קאָרעוו צו דער פאָטער

ברייט און הייך יוטילאַטיז זענען דזשענערייטאַד פון די נוצן אַפּי אין _utilities.scss. כולל שטיצן פֿאַר 25%, 50%, 75%, 100%, און autoדורך פעליקייַט. מאָדיפיצירן די וואַלועס ווי איר דאַרפֿן צו דזשענערייט פאַרשידענע יוטילאַטיז דאָ.

ברייט 25%

ברייט 50%

ברייט 75%

ברייט 100%

ברייט אַוטאָ

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

הייך 25%

הייך 50%

הייך 75%

הייך 100%

הייך אַוטאָ

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

איר קענט אויך נוצן max-width: 100%;און max-height: 100%;יוטילאַטיז ווי דארף.

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

מאַקס-הייך 100%

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

גלייך צו די וויופּאָרט

איר קענט אויך נוצן יוטילאַטיז צו שטעלן די ברייט און הייך קאָרעוו צו די וויופּאָרט.

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

סאַס

Utilities API

סייזינג יוטילאַטיז זענען דערקלערט אין אונדזער יוטילאַטיז אַפּי אין scss/_utilities.scss. לערנען ווי צו נוצן די Utilities 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)
    ),