logo, ali, hamdi

بسم الله الرحمن الرحيم

استكمال الجزء التانى من موضوع

ا/ عمرو على 

RWD Responsive Web Design

 responsive_web_design

 

توقفنا المرة السابقة عند الجزء الخاص بالتحميل


تصميم متجاوب

فى الصورة السابقة نقوم بتحميل ال Bootstrap
الجزء الاول :الخاص بملفات البوتسراب فقط
الجزء التانى : الخاص بالملفات كاملة مع وجود امئلة وتطبيقات
الجزء التالت : الخاص بال SASS وهى عبارة عن COMPILE لملفات ال CSS


 

 content delivery network

CDN

 content delivery network  دى عبارة عن سيرفر كبير باخد منه ملفات اللى محتاج لها علشان اخف الضغط من على السرفر الخاص بى ممكن استخد الملفات بشكل عادى خالص وممكن اعمل لها اضافه عن طريق السيرفر الخاص بالموقع واشهر المواقع اللى بتقدم الخدمه دى هى جوجل Google CDN GOOGLE

وده مثال ازاى اعمل تضمين لملفات ال JQUERY مثلا من خلال الجوجل

?ماذا يتضمن الل Bootstrap min

يوجد بالبوت ستراب نوعين من الملفات النوع الاول :

bootstrap.css

وده انا ممكن اعدل علية يعنى ممكن اغير فى الخاص عادى بدون اى مشكلة ويحتوى ايضا على تعليقات للمبرمج لتوضيح المعلومات وسهولة البرمجه

النوع التانى :

bootstrap.min.css

والنوع ده انا صعب اعدل عليه لانه مخصص لعدم التعديل يعنى اللى عاوز يشتغل على طول وميعدلش اى حاجه فى البوتستراب يستخدم النوع التانى

ونفس الكلام لل

bootstrap.js
bootstrap.min.js

ماذا يحتوى ملف ال

Bootstrap source code ؟

 

dis

ملفات ال LESS

ملفات ال JavaScript

ملفات ال Dist اختصار لل distribution اى التوزيعه

القالب الرئيسى ؟

temp

1- شكل العرض ليصبح التصميم متجاوب

2- تضمين ملفات ال

css/bootstrap.min.css

3-استيراد ملفات الجيكويرى من جوجل ويجب ان يتم تضمين ملفات الجيكويرى قبل ملفات ال البوتستراب

4- تضمين الملفات الخاصه بالبوتستراب ونلاحظ استخدام الجزء الخاص Min ومعنى ذلك اننا لا نسطيع التديل على الملف كما سبق الشرح

الامثلة ؟

exp

امثلة على النافبار nav

امثلة على المتصفحات التى تدعم ولا تدعم البوتستراب

bro

بعض المشاكل مع

Internet Explorer 8 and 9

res    

لحل هذه المشاكل نقوم بتضمين ملفات  Respond.js

وبكده يبقى خلصنا الجزء التانى من

RWD Responsive Web Design

وانتظرونا فى الجزء التالت باذن الله  

This post has 4145 Views

8 responses to “RWD Responsive Web Design (Part 2)”

  1. ali7amdi says:

    ما شاء الله بالتوفيق يا أستاذ عمرو 🙂

  2. Abdelrahman says:

    مجهود رائع ما شاء الله وحرص على تبسيط المعلومة مع ترسيخها بالصور
    جزاك الله كل خير استمر 🙂

  3. mona says:

    طيب دلوقتى انا عاملة سايت هو عبارة عن صور و فورمز وعملة ريفرنس زي محضرتك قايل كده جوه الكود بتاعى اظبط الصور ازاي بقى !!

  4. Ahmed Breeka says:

    شرح جميل جدا
    جزاك الله كل خير يا أستاذ عمرو

    ملاحظة : يرجى اضافة رابط المواضيع السابقة المتعلقة بالدرس تحت الشرح, حتى يتسنى من يرى الموضوع لاول مرة مراجعة المواضيع السابقة

    بنتمنى لكم مزيداً من التقدم والنجاح

  5. ineista says:

    شكرا على الجهد المبذول

  6. sameh says:

    جميل جدا ماشاء الله فى انتظار البقية

  7. جيد الله يبارك فيكم

Leave a Reply

Your email address will not be published. Required fields are marked *