دورة البوتستراب 3 – الدرس الخامس Bootstrap 3 Images

السلام عليكم و رحمة الله و بركاته .

سنتطرق في هذا الدرس إن شاء الله إلى مجموعة جديدة من خصائص البوتستراب 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. :

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 .

دورة بوتستراب 3 - الدرس الرابع bootstrap 3 tables

دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells