فى هذا الدرس نتعرف علي ما هو Foundation Grid System و كيفية استخدامه لعمل صفحة تتفاعل مع حجم المتصفح لدي المستخدم, و كيف يمكننا تغيير شكل الصفحة فى متصفحات الهواتف و اعطائها شكل مختلف عن شكلها فى المتصفحات الكبيرة.
لاحظ انه لكي تستطيع استخدام خصائص Grid system يجب عليك ان تقوم بإنشاء div و تعطيه
class="row"
و هذا يعني انك تقوم بإنشاء صف بداخل الصفحة بعرض الصفحة كلها سواء كان هذا فى المتصفحات الكبيرة او الصغيرة ثم (كما ستري فى الفيديو) انك تقوم بتقسيم هذا الصف الى اقسام و كل قسم يتكون من عدد من العواميد المحددة.
لاحظ انه لا يجب ان يزيد عدد العواميد فى كل صف عن 12 عمود فى جميع احجام المتصفحات و اذا حصل هذا سيقوم المتصفح بنقل العنصر الخاص بك الى اسفل عناصر الصف.
يمكنك التحكم فى عدد العواميد الخاصة بكل عنصر عن طريق class كهذا:
class="large-4 medium-4 small-4 columns"
هذا يعني ان هذا div سيأخذ عرض 4 عواميد (ربع عرض الصفحة) فى الاحجام المختلفة للمتصفحات ( كبير و متوسط و صغير).
هذا الفيديو هو الجزء الاول فى درس Grid System و يوجد جزء اخر يعرض خيارات متقدمة للتحكم فى عناصر الصفحة عند الاحجام المختلفة للمتصفحات.
يمكنك مشاهدة الفيديو من هنا :
يمكنك تحميل ملفات الدرس النهائية من هنا
يمكنك سؤالي عن اي شئ فى الفيديو من خلال المدونة او أسفل الفيديو و سأقوم بالرد عليك فى اقرب وقت بإذن الله.
الخميس, أغسطس 28, 2014
Foundation Framework
ليست هناك تعليقات
شاركنا برأيك