أدوات الأبعاد في إطار العمل Bootstrap
استخدم أدوات العرض والطول التي يوفّرها إطار العمل Bootstrap لجعل يأخذ كامل عرض أو طول العنصُر الذي يحويه.
الأبعاد نسبة إلى العنصر الأب
تُولَّد أدوات العرض والطول من الجدول $sizes في الملفّ _variables.scss. تتضمَّن هذه الأدوات مبدئيًّا دعمَ القيّم 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>
<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)">الطول 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">الطول 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">الطول 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)">الطول تلقائي</div>
</div>
يمكن كذلك استخدام الأداتيْن max-width: 100%; وmax-height: 100%; حسب الحاجة.
<img class="mw-100" data-src="..." alt="Max-width 100%">
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.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>