انتقل إلى محتوى الدرس

BootStrap Responsive Embeds العناصر المضمنة المتجاوبة في bootstrap

ستتعلم في هذا الدرس عمل styling لكثير من elements العناصر وجعلها more responsive اكثر تجاوبا بدون كتابة كود CSS وذلك باستخدام اطار عمل bootstrap.

1 صفوف تعليمية
Bootstrap
3,170 مشاهدة

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

الصف 1 شرح توضيحي
  • يضاف كلاس ratio الى العنصر الاب الذي يحتوي بداخله على عنصر <iframe> للتحكم في aspect ratio نسبة العرض الى الطول لهذا العنصر لكتون متجاوبة مع الشاشات بمختلف احجامها.
  • بجانب كلاس ratio يتم اضافة كلاس ratio-a x b حيث a و b هما نسبة العرض الى الطول التي نريدها.
جرّب بنفسك

Responsive Embeds

عمل <iframe> متجاوب

HTML
<div class="ratio ratio-1x1 mx-auto mt-3 w-50">
   <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>