Responsive Picture Elementعنصر picture لتعدد الصور
تعلّم كيفية بناء الصور المتجاوبة في بوتستراب 5 عبر كلاس img-fluid، وتنسيق الإطارات المصغرة، ومحاذاة وتوسيط الصور في الواجهات العربية والإنجليزية، وإنشاء الأشكال التوضيحية الدلالية.
2 صفوف تعليمية
بوتستراب 5
2 مشاهدة
شرح صفوف ومحتوى الفقرة
الصف 1
شرح توضيحي
عندما تختلف نسبة أبعاد الصورة المثالية بين الهاتف والحاسوب — كلقطة أفقية بانورامية على سطح المكتب مقابل لقطة مركزة على الهاتف — يتيح لك وسم <picture> القياسي تعريف مصادر متعددة عبر <source> ليحمل المتصفح الملف الأنسب فقط.
القاعدة الذهبية في بوتستراب 5 عند استخدام <picture> هي وضع كلاسات التنسيق مثل .img-fluid و.img-thumbnail على وسم <img> الداخلي حصراً، وليس على وسم <picture> الأب.
الصف 2
ملاحظة هامة
جميع فقرات هذا الدرس (الصور والأشكال التوضيحية في بوتستراب 5)
