تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
Check
in English

تحجيم

اجعل عنصرًا عريضًا أو طويلًا بسهولة باستخدام أدوات العرض والارتفاع الخاصة بنا.

قريب من الوالد

يتم إنشاء أدوات العرض والارتفاع من الأداة المساعدة API في _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)
    ),