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

BootStrap Responsive Images الصور المتجاوبة في bootstrap

ستتعلم في هذا الدرس كيفية التحكم في خصائص الصور مثل الاطارات والتجاوب مع الشاشات المختلفة عن طريق اطار عمل bootstrap. 

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

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

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

حجم شاشات الاجهزة التي يمكنها تصفح اي موقع تعتبر مختلفة وكثيرة, لذلك من المهم ان تكون الصورة متجاوبة اي يمكنها تغيير حجمها بشكل تلقائي لكي تناسب حجم الشاشة المعروضة عليها.

تستطيع الصورة ان تتجاوب مع حجم اي شاشة باستخدام كلاس img-fluid الذي يعطي للصورة خاصيتي max-width:100% و height:auto.

Responsive Image

جعل الصورة متجاوبة في bootstrap.

HTML
<img src="https://bizmo.al/wp-content/uploads/2022/03/Web-Dev-Blog.png" class="img-fluid" alt="">

جميع فقرات هذا الدرس (الصور في BootStrap)