ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
in English

ሳይዚንግ ምግባር

ብቐሊሉ ንሓደ ባእታ ክንድኡ ገፊሕ ወይ ክንድኡ ነዊሕ ብስፍሓትናን ቁመትን ዩቲሊቲታትና ግበሮ።

ምስ ወላዲ ዝዛመድ

ስፍሓትን ቁመትን ዩቲሊቲታት ካብቲ ዩቲሊቲ ኤፒኣይ ኣብ _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%;

Placeholder Max-width 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>

ሳስ

ዩቲሊቲስ ኤፒኣይ

ሳይዚንግ ዩቲሊቲታት ኣብ ዩቲሊቲታትና ኤፒኣይ ኣብ scss/_utilities.scss. ከመይ ጌርካ ናይ ዩቲሊቲስ ኤፒኣይ ከም እትጥቀመሉ ተማሃር።

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