ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
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)
    ),