Meudachadh

Dèan gu furasta eileamaid cho farsaing no cho àrd leis na goireasan leud is àirde againn.

Air an duilleig seo

An coimeas ris a’ phàrant

Tha goireasan leud is àirde air an gineadh bhon API goireasach ann an _utilities.scss. A’ toirt a-steach taic airson 25%, 50%, 75%, , 100%, agus autogu bunaiteach. Atharraich na luachan sin mar a dh’ fheumas tu gus diofar ghoireasan a ghineadh an seo.

Leud 25%

Leud 50%

Leud 75%

Leud 100%

Auto leud

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

àirde 25%

àirde 50%

àirde 75%

àirde 100%

Auto àirde

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

Faodaidh tu cuideachd goireasan max-width: 100%;agus max-height: 100%;goireasan a chleachdadh mar a dh ’fheumar.

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

Àrd-àirde 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>

Co-cheangailte ris a’ phort-seallaidh

Faodaidh tu cuideachd goireasan a chleachdadh gus an leud agus an àirde a shuidheachadh an coimeas ris a’ phort-seallaidh.

<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

Tha goireasan meudachaidh air an ainmeachadh anns na goireasan API againn ann an scss/_utilities.scss. Ionnsaich mar a chleachdas tu an API Utilities.

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