في هذا الدرس 2تصفّح المواضيع
من التنسيقات التي يوفرها bootstrap هو كلاس mg-thumbnail الذي يستخدم لاضافة rounded border اطار بحواف مستديرة حول الصورة.
BootStrap Image Thumbnail
استخدام كلاس img-thumbnail لاعطاء 1px border للصورة.
HTML
<!--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">حجم شاشات الاجهزة التي يمكنها تصفح اي موقع تعتبر مختلفة وكثيرة, لذلك من المهم ان تكون الصورة متجاوبة اي يمكنها تغيير حجمها بشكل تلقائي لكي تناسب حجم الشاشة المعروضة عليها.
تستطيع الصورة ان تتجاوب مع حجم اي شاشة باستخدام كلاس 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="">رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.