جمعية البرمجيات الحرة وغنو لينكس
  • الرئيسية
  • تصنيفات
    • اخبار
    • العاب
    • برامج
    • مراجعات
    • مقابلات
    • مقالات
    • دروس
      • بوتستراب
    • عتاد
  • النوادي
    • النادي الحر
    • نادي التوطين و التوثيق
    • نادي الانترنت و الحماية
    • نادي الغرافيكس و الالعاب
    • نادي الملتيميديا
    • نادي البرمجة
  • نشاطات الجمعية
  • ليبر بلانت الجزائر
اختر صفحة
لـ aleua mehani | 26/04/2018 | بوتستراب، دروس | 0 تعليقات

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

دورة البوتستراب 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. :

 

ملاحظة

يمكن إضافة أحد أصناف الـ 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 .

 

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

مقالات ذات صلة

  • دورة بوتستراب 3 – الدرس السابع bootstrap alerts

    دورة بوتستراب 3 – الدرس السابع bootstrap alerts

    السلام عليكم و رحمة الله و بركاته . مرحبا بكم في الدرس السابع من دورتنا حول البوتستراب و الذي سيكون حول رسائل... دورة بوتستراب 3 – الدرس السابع bootstrap alerts اقرأ المزيد
  • دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells

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

      السلام عليكم و رحمة الله وبركاته . سنتعرف في هذا الدرس على ثلاث عناصر جديدة في البوتستراب 3 وهي : jumbotron ,... دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells اقرأ المزيد
  • دورة بوتستراب 3 – الدرس الرابع  bootstrap 3 tables

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

      السلام عليكم و رحمة الله و بركاته. مرحبا بكم في درس جديد في دورتنا حول البوتستراب 3 و سيكون عن الجداول في البوتستراب... دورة بوتستراب 3 – الدرس الرابع bootstrap 3 tables اقرأ المزيد

أرسل إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

أحدث المقالات

  • مع shellinabox وداعا لبرامج الـ shh
  • اطلاق اوبنتو 19.10 (Eoan Ermin)
  • دورة بوتستراب 3 – الدرس السابع bootstrap alerts
  • دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells
  • دورة البوتستراب 3 – الدرس الخامس Bootstrap 3 Images

أحدث التعليقات

  • hasan mohamed على مع shellinabox وداعا لبرامج الـ shh
  • khammaci hachemi على فيديو: د.رتشارد ستالمان : ماهي البرمجيات الحرة
  • aleua mehani على دورة بوتستـراب 3 – الدرس الأول
  • حياة على دورة بوتستـراب 3 – الدرس الأول
  • Alili Mohamed على البرمجيات المفتوحة المصدر ، مصدر مفتوح لتعدد اللغة كيفما تشاء ..
بتقنية مهارتي | ووردبريس