RWD Responsive Web Design

أ عمرو علي

 

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

ماهى اهم انواع ال الفريم ورك اللى ممكن استخدمها علشان التصميم يبقى متجاوب ؟ من اهم الفريم ورك اللى موجوده على النت وبيستخدمها اغلب المصممين والمطورين البوت ستراب وده واحد من اهم الفريم وركس اللى ممكن تحول التصميمم بتاعك الى تصميم متجاوب وده من انتاج شركه تويتر وليس الموقع وده الموقع الرسمى الخاص بة http://getbootstrap.com/

والصدار الحالى منه هو الصدار Currently v3.1.1

هل احتاج لكى اتعامل مع البوت ستراب ان اكون متقن لل HTML5 CSS3 ?

 

الاجابة لا فقط يكون لديك الاساسيات فى الHTML & CSS وتسطيع  ان تحول تصميمك الى تصميم متجاوب مع البوت ستراب وهذه ستكون بداية جيده على التمرس مع اكواد الHTML5 & CSS3 ويتميز البوت ستراب بالشرح الوافر والرائع من الموقع الرسمى

كيف تكون البداية ؟ البداية دائما تكون مع الموقع الرسمى اعتمد علية بشكل كبير لانه سيمدك بكل المعلومات الخاصه والتحديثات اجعلة كصديق لك وممكن تعتمد على كتب او شرحات فديو ولكن للاسف  ممكن تكون قديمه ولا تواكب الاصدار الحالى وبذلك تكون متاخر فى التعليم ولذلك عليك دائما باستخدام الموقع الرسمى فى اى برنامج او تقنية جديده
اريد مثال ؟

الموضوع فى غاية السهولة ليس كما يتصور البعض فهيا بنا نبدا اذا

Getting started

 An overview of Bootstrap, how to download and use, basic templates and examples, and more.

اولا :

نقوم بالتحميل

Download

Bootstrap

Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.

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

وبدون امثلة وبدون اى ملفات تانية

ويوجد ايضا السورس كود 

Source code

Source Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup.

 وده بيحتوى على كل الملفات والامثلة عكس الاول الذى لا يحتوى على امثلة او ملفات اخرى

Sass

Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.

SASS & LESS دى تقنية جديده بتعمل كمبيلشن للكود ودى حنتكلم بيها بستفاضه ادام باذن الله اخر حاجه حنتكلم عنها هى ال Bootstrap CDN ودى عبارة عن تحميل الملفات الخاصه بالبوت ستراب من على السيرفر الخاص بالموقع وده علشان اقلل حجم الملفات والضغط على السرفر

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet"href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->

<link rel="stylesheet"href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

 

وباذن الله نكمل المرة القادمه

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

تحياتى ا عمرو على