السلام عليكم و رحمة الله و بركاته .
سنتطرق في هذا الدرس إن شاء الله إلى مجموعة جديدة من خصائص البوتستراب 3 و التي تستعمل في التعامل مع الصور .
تحتوي البوتستراب 3 على مجموعة من الأصناف ( css classes ) و التي تستخدم في تنسيق الصور , حيث يمكن تقسيمها على مجموعتين :
- أشكال الصور ( Bootstrap Images Shapes ) .
-
الصور المتجاوبة ( Bootstrap Responsive Images ) .
1 – أشكال الصور Bootstrap Image Shapes :
و هي عبارة عن ثلاث أصناف ( css classes ) تستعمل للتحكم في شكل الصور .
أ – صنف الـ img-rounded. :
يعمل صنف الـ img-rounded. عند إضافته لوسم الـ <img> على إظهار الصورة بزوايا مقوسة دائرية .
سطر الكود هذا يوضح كيفية إضافة الـ img-rounded. إلى وسم الـ <img> .
<img src="/path/to/image/" class="img-rounded " >
- مثال على إستخدام صنف الـ img-rounded. :
ب – صنف الـ img-circle. :
يعمل صنف الـ img-circle. عند إضافته لوسم الـ <img> على إظهار الصورة على شكل دائرة .
الكود هذا يوضح كيفية إظهار الصورة على شكل دائرة في البوتستراب 3 .
<img src="/path/to/image/" class="img-circle " >
- مثال على إستخدام صنف الـ img-circle. :
ج – صنف الـ img-thumbnail. :
يعمل صنف الـ img-thumbnail. عند إضافته لوسم الـ <img> على وضع الصورة داخل إطار بلون رمادي فاتح .
نقوم بإضافة صنف الـ img-thumbnail. داخل وسم الـ <img> بهذا الشكل .
<img src="/path/to/image/" class="img-thumbnail " >
- مثال على إستخدام صنف الـ img-thumbnail. :
2 – الصور المتجاوبة Bootstrap Responsive Images :
لجعل الصور متجاوبة مع عرض الشاشات تستخدم البوتستراب صنف الـ img-responsive. الذي يعمل على تغيير أبعاد الصورة حسب عرض الشاشات .
نستعمل نفس طريقة الأمثلة السابقة عند إستخدام صنف الـ img-responsive. :
<img src="/path/to/image/" class="img-responsive " >
- مثال على إستخدام صنف الـ img-reponsive. :
ملاحظة
يمكن إضافة أحد أصناف الـ image shapes إلى صنف الـ img-reponsive. لتكون الصورة متجاوبة بالشكل الذي تريده .
3 – إنشاء معرض صور بسيط بإستخدام البوتستراب 3 :
في هذا المثال سنقوم بإنشاء معرض صور بسيط بإستخدام الـ Bootstrap Grid System حيث نستخدم صنف الـ col-sm-4. لإظهار 3 صور في كل صف في الشاشات الأكبر أو تساوي 768px أما في الشاشات الأقل من 768px ستظهر الصور تحت بعضها البعض و نستخدم صنف الـ img-responsive. ليتغير حجم الصورة حسب عرض الشاشة .
الكود التالي يوضح طريقة إنشاء معرض الصور .
<div class="row"> <div class="col-sm-4"> <img src="/path/to/image/" class="img-responsive " > </div> <div class="col-sm-4"> <img src="/path/to/image/" class="img-responsive " > </div> <div class="col-sm-4"> <img src="/path/to/image/" class="img-responsive " > </div> <div class="col-sm-4"> <img src="/path/to/image/" class="img-responsive " > </div> <div class="col-sm-4"> <img src="/path/to/image/" class="img-responsive " > </div> <div class="col-sm-4"> <img src="/path/to/image/" class="img-responsive " > </div> </div>
- معرض صور بالبوتستراب 3 :
هذا كل ما يتعلق بتنسيق الصور في البوتستراب 3 .
نرجوا من الله أن تكونوا قد إستفدتم من هذا الدرس و شكرا على المتابعة .
المصـادر : المصدر 1 , المصدر 2 , المصدر 3 .
أحدث التعليقات