مؤسسة صور
توفر المؤسسة الصور الاستجابة، يمكنك إنشاء صورة مصغرة بالنوافذ الشراب:
محاولة »الصور المصغرة
في <img> عناصر خارج أضف <a> صورة العنصر باعتباره صلة الربط.
في <a> إضافة علامات .th الطبقة الصورة على هيئة مصغرات. تحريك الماوس إلى الأعلى ليظهر إطار أزرق فاتح:
أمثلة
على <img SRC = "paris.jpg" بديل = "باريس">
</ A>
محاولة »
 | صورة تستجيب مؤسسة صورة ردا على النمط الافتراضي. يمكننا إعادة ضبط المتصفح الخاص بك لعرض حجم الصفحة في التأثير سبيل المثال تكبير الصورة. |
|---|
فيليه صور
يمكننا .th الطبقة يضيف .radius لتعيين صورة مصغرة الطبقة فيليه:
أمثلة
على <img SRC = "paris.jpg" بديل = "باريس">
</ A>
محاولة »
البوب موجزة
مؤسسة يمكن أن يتحقق بسهولة صورة البوب.
لإنشاء إطار قذيفة في <ul> لإضافة عنصر .clearing-thumbs الصف و data-clearing خصائص. في <ul> في قائمة إضافة الصور.
ملاحظة: بالنوافذ صورة تحتاج إلى تفعيل جافا. لذلك يجب أن يتم تهيئتها قبل استخدام مؤسسة شبيبة.
أمثلة
<لي> <a أ href = "الطبقة rock600x400.jpg" = "th"> <IMG SRC =" rock200x100.jpg "> </ أ> </ لى>
<لي> <a أ href = "الطبقة skies600x400.jpg" = "th"> <IMG SRC =" skies200x100.jpg "> </ أ> </ لى>
<لي> <a أ href = "الطبقة lights600x400.jpg" = "th"> <IMG SRC =" lights200x100.jpg "> </ أ> </ لى>
</ UL>
<! - تهيئة مؤسسة شبيبة ->
<script>
$ (الوثيقة) .ready (وظيفة () {
$ (الوثيقة) .foundation ()؛
})
</ script>
محاولة »
وصف النص صورة
يمكنك إضافة data-caption السمة إلى كل صورة لوضع وصف للصورة:
أمثلة
<لي> <a أ href = "الطبقة rock600x400.jpg" = "th"> <img وشرح البيانات =" منبر روك "SRC =" rock200x100.jpg "> </ أ> </ لى>
<لي> <a أ href = "الطبقة skies600x400.jpg" = "th"> على <img البيانات التوضيحية =" الشروق سماء "SRC =" skies200x100.jpg "> </ أ> </ لى>
<لي> <a أ href = "الطبقة lights600x400.jpg" = "th"> <img وشرح البيانات =" الأنوار الشمالية "SRC =" lights200x100.jpg "> </ أ> </ لى>
</ UL>
محاولة »
| نصيحة: يمكنك إضافة سمة شرح البيانات في عناصر HTML، مثل شرح البيانات = "<H2> المنبر روك </ H2> <p> ويقع في النرويج </ P>" |
|---|
تظهر فقط صورة مصغرة
عندما تحتاج إلى تحقيق، يتم عرض صورة مصغرة فقط عندما يمكنك <ul> استخدام .clearing-feature الطبقات و <li> استخدام .clearing-featured-img الطبقة.
أمثلة
<لي> <a أ href = "الطبقة rock600x400.jpg" = "th"> <img وشرح البيانات =" منبر روك "SRC =" rock200x100.jpg "> </ أ> </ لى>
<لي> <a أ href = "الطبقة skies600x400.jpg" = "th"> على <img البيانات التوضيحية =" الشروق سماء "SRC =" skies200x100.jpg "> </ أ> </ لى>
<الطبقة = "المواصفات المقاصة لي -img"> <a أ href = "lights600x400.jpg" الطبقة = "th"> على <img البيانات التوضيحية = "الأنوار الشمالية" SRC = "lights200x100.jpg"> </ أ> < / لى>
</ UL>
محاولة »