Bootstrap Images
الصور في BootStrap
ستتعلم في هذا الدرس كيفية التحكم في خصائص الصور مثل الاطارات والتجاوب مع الشاشات المختلفة عن طريق اطار عمل bootstrap.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Bootstrap Images
الصور في bootstrap
</>
BootStrap Image Thumbnail
الصورة المصغرة في bootstrap
من التنسيقات التي يوفرها bootstrap هو كلاس mg-thumbnail الذي يستخدم لاضافة rounded border اطار بحواف مستديرة حول الصورة.
BootStrap Image Thumbnail
استخدام كلاس img-thumbnail لاعطاء 1px border للصورة.
<!--Image with img-thumbnail class--> <img src="https://www.megaleechers.com/storage/Bootstrap-Icon.png" class="img-thumbnail" alt=""> <!--Image without img-thumbnail class--> <img src="https://www.megaleechers.com/storage/Bootstrap-Icon.png" alt="" style="width:300px">
</>
BootStrap Responsive Images
الصور المتجاوبة في bootstrap
حجم شاشات الاجهزة التي يمكنها تصفح اي موقع تعتبر مختلفة وكثيرة, لذلك من المهم ان تكون الصورة متجاوبة اي يمكنها تغيير حجمها بشكل تلقائي لكي تناسب حجم الشاشة المعروضة عليها.
تستطيع الصورة ان تتجاوب مع حجم اي شاشة باستخدام كلاس img-fluid الذي يعطي للصورة خاصيتي max-width:100% و height:auto.
Responsive Image
جعل الصورة متجاوبة في bootstrap.
<img src="https://bizmo.al/wp-content/uploads/2022/03/Web-Dev-Blog.png" class="img-fluid" alt="">
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
