Bootstrap

Bootstrap Images
الصور في BootStrap

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

التاريخ

02 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1203

المواضيع

6
الشروحات chevron_left Bootstrap Images chevron_left 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="">
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.