التحجيم (Sizing)
اجعل العنصر عريضاً أو طويلاً بسهولة باستخدام أدوات العرض والارتفاع الخاصة بنا.
في هذه الصفحة
بالنسبة للعنصر الأب (Relative to the parent)
يتم إنشاء أدوات العرض والارتفاع من واجهة برمجة تطبيقات الأدوات (utility API) في _utilities.scss. وتتضمن الدعم لـ 25% و 50% و 75% و 100% و auto بشكل افتراضي. قم بتعديل هذه القيم حسب حاجتك لإنشاء أدوات مختلفة هنا.
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
<div class="w-25 p-3">Width 25%</div>
<div class="w-50 p-3">Width 50%</div>
<div class="w-75 p-3">Width 75%</div>
<div class="w-100 p-3">Width 100%</div>
<div class="w-auto p-3">Width auto</div>Height 25%
Height 50%
Height 75%
Height 100%
Height auto
<div style="height: 100px;">
<div class="h-25 d-inline-block" style="width: 120px;">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px;">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px;">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px;">Height 100%</div>
<div class="h-auto d-inline-block" style="width: 120px;">Height auto</div>
</div>يمكنك أيضاً استخدام أدوات max-width: 100%; و max-height: 100%; حسب الحاجة.
Max-width 100%
<div style="width: 50%; height: 100px;">
<div class="mw-100" style="width: 200%;">Max-width 100%</div>
</div>Max-height 100%
<div style="height: 100px;">
<div class="mh-100" style="width: 100px; height: 200px;">Max-height 100%</div>
</div>بالنسبة لمنطقة العرض (Relative to the viewport)
يمكنك أيضاً استخدام الأدوات لتعيين العرض والارتفاع بالنسبة لمنطقة العرض (viewport).
<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>
الـ (CSS)
واجهة برمجة تطبيقات أدوات Sass (Sass utilities API)
يتم التصريح عن أدوات التحجيم في واجهة برمجة تطبيقات الأدوات الخاصة بنا في 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)
),