نسب العرض والارتفاع المئوية | الحدود والأبعاد والظلال في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لضبط أبعاد العنصر كنسبة مئوية من أبعاد العنصر الأب المحيط به، يوفر بوتستراب خمس درجات جاهزة للعرض .w-25 و.w-50 و.w-75 و.w-100 و.w-auto، ونظيراتها للارتفاع .h-25 و.h-50 و.h-75 و.h-100 و.h-auto.

بالإضافة إلى ذلك، يمنع كلاس .mw-100 (max-width: 100%) وكلاس .mh-100 (max-height: 100%) تجاوز العنصر لحدود حاويته القصوى. انتبه جيداً إلى أن نسب الارتفاع المئوية مثل .h-50 و.h-100 لا تعمل إلا إذا كان للعنصر الأب ارتفاع صريح محدد مسبقاً!

الصف 2 كود برمجي

HTML

<div class="p-2 bg-body-tertiary rounded-3">
  <div class="w-25 p-2 mb-2 text-bg-secondary">25%</div>
  <div class="w-50 p-2 mb-2 text-bg-info">50%</div>
  <div class="w-75 p-2 mb-2 text-bg-primary">75%</div>
  <div class="w-100 p-2 text-bg-success">100%</div>
</div>

جرّب بنفسك

الصف 3 ملاحظة هامة

Relative Width and Height نسب العرض والارتفاع المئوية

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (الحدود والأبعاد والظلال في بوتستراب 5)