نسب أبعاد الفيديو بكلاس ratio | المساعدات البصرية والإتاحة في بوتستراب 5

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

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

عند تضمين مقطع فيديو أو خريطة تفاعلية أو لوحة رسوم داخل عمود متجاوب، يؤدي غياب نسبة الأبعاد الثابتة إلى تمدد العرض مع بقاء الارتفاع جامداً فيظهر إطار مشوّه، أو قفز محتوى الصفحة فجأة أثناء التحميل. استبدل Bootstrap 5 الكلاس الطويل الملغى .embed-responsive بالمساعد الرشيق .ratio مقروناً بأربع نسب قياسية جاهزة هي .ratio-1x1 للمربعات، و.ratio-4x3، و.ratio-16x9 للفيديو القياسي، و.ratio-21x9 للعروض السينمائية العريضة.

كل ما عليك فعله هو تغليف العنصر الابن مثل <iframe> أو <video> أو حتى <div> مباشرة داخل حاوية تحمل class="ratio ratio-16x9"، كما يمكنك تخصيص أي نسبة مئوية مخصصة عبر المتغير المحلي --bs-aspect-ratio: 50% لصنع نسبة 2x1 دقيقة.

الصف 2 صورة توضيحية

مخطط المساعدات البصرية وأدوات الإتاحة في بوتستراب 5.3

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

HTML

<div class="ratio ratio-16x9 text-bg-dark rounded mb-2">
  <div class="d-flex align-items-center
    justify-content-center">16x9 Video Stage</div>
</div>
<div class="ratio ratio-4x3 text-bg-secondary rounded">
  <div class="d-flex align-items-center
    justify-content-center">4x3 Presentation</div>
</div>

جرّب بنفسك

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

Aspect Ratio Helper Classes نسب أبعاد الفيديو بكلاس ratio

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

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