سائز کرنا

ہماری چوڑائی اور اونچائی کی افادیت کے ساتھ آسانی سے ایک عنصر کو اتنا ہی چوڑا یا لمبا بنائیں۔

اس صفحہ پر

والدین کا رشتہ دار

چوڑائی اور اونچائی کی افادیتیں یوٹیلیٹی API سے _utilities.scss. 25%, 50%, 75%, 100%, اور autoبطور ڈیفالٹ کے لیے سپورٹ شامل ہے ۔ ان اقدار میں ترمیم کریں جیسا کہ آپ کو یہاں مختلف یوٹیلیٹیز پیدا کرنے کی ضرورت ہے۔

چوڑائی 25%

چوڑائی 50%

چوڑائی 75%

چوڑائی 100%

چوڑائی آٹو

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>

اونچائی 25%

اونچائی 50%

اونچائی 75%

اونچائی 100%

اونچائی آٹو

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>

آپ ضرورت کے مطابق استعمال max-width: 100%;اور max-height: 100%;افادیت بھی لے سکتے ہیں۔

html

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

زیادہ سے زیادہ اونچائی 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>

ویو پورٹ سے متعلق

آپ ویو پورٹ کی نسبت چوڑائی اور اونچائی سیٹ کرنے کے لیے بھی یوٹیلیٹیز استعمال کر سکتے ہیں۔

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

سس

یوٹیلیٹیز API

سائز سازی کی افادیت کا اعلان ہماری یوٹیلیٹیز API میں scss/_utilities.scss. یوٹیلیٹیز 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)
    ),