Twitter Bootstrap tutorial – Let's Start

الـ Bootstrap هو عباره عن toolkit مقدمة من تويتر بحيث ممكن للـ developer انه يستخدمها في تطوير المواقع او الـ Apps بشكل اسرع وفي نفس الوقت بشكل جميل ومتناسق.

يعني مثلا بدل ما تكتب كود css او حتى js لكل حاجه في الموقع اللي بتعمله ، مجرد انك بتـ Include ملفات الـ bootstrap جوا ملفات الموقع بتاعك تقدر تستخدمها بكل بساطة بعد ما تربطهم ببعض وهنعرف كل ده بالتفصيل فيما يلي بإذن الله.

تقدر تستخدم فيه الـ Grids, Layouts, Typography, Tables, Forms, Navigation, Alerts, Popovers etc وفي الاخر تقدر انت برضه تدّي للـ elements دي الـ style اللي انت عايزه والخاص بالموقع بتاعك.

طيب ، مين أين أبدأ ؟
اولا : هنحمل ملفاته من http://twitter.github.com/bootstrap
وبعد ما يتم التحميل ابدأ اعمل extract للملفات من الملف المضغوط ، وبكده انت معاك نسخه الـ bootstrap اللي معمولها compile وجاهزة تماما للاستخدام السريع السهل اللي بنتكلم عليه.

طب ايه فايده نسخة الـ source code دي ؟ دي جواها الملفات الاصلية بتاعته مع الـ local copy من ال docs بحيث لو حابب انك تدرسها بقى وتفهمها مثلا واللي تقدر تحمله من هنا >
http://twitter.github.com/bootstrap/getting-started.html

في حاجه تانيه بيوفرها ، وهي امكانية انك تنزل الـ bootstrap اصلا من اول بالشكل اللي انت عايزه ، من اول العناصر اللي انت محتاجها بس ، للالوان والخط والمقاسات وبعد كده بتبدأ عملية التحميل.
http://twitter.github.com/bootstrap/customize.html

طيب لو جيت بصيت بقى على الملفات هتلاقيهم 3 : css جواه ملفات الـ style sheets وهنعرف دلوقتي الفرق ما بينهم ، و ملف js وملف الـ img اللي بيحتوي على صور لل icons اللي ممكن تستخدمها بلونيها الابيض والاسود.

ايه الفرق بقى بين ملفات ال bootstrap.* و bootstrap.mini.* في الاولى بيكون معمول للـ source code عملية compiling بس اما التانيه فبيكون معمولها كمان حاجه اسمها Minification العملية دي بتهدف الى انها تشيل اي حاجه في السورس كود ملهاش لازمه بس في نفس الوقت متكنش بتاثر على الـ functionality بما فيها مثلا المسافات الزايده ، سطر جديد. والعملية دي مهم جدا تتعمل وخصوصا لملفات اللغات الـ Interpreted زي الجافا سكربت مثلا ، لان ده بيقلل حجم الداتا اللي بتتنقل.

اما عن bootstrap-responsive فده بيوفرلك امكانيه ان الـ Style اللي بتربطه بالموقع بتاعك يكون مرن لكل انواع الشاشات مثلا لاجهزة التابليتس ، الموبايل وهكذا ، ودي تعتبر من اهم مميزات الـ bootstrap.

نيجي لثانيا بقى وهي عملية ربط ملفاته للبروجكت بتاعي ، هتفتح ملف ال html وتكتب فيه الكود اللي بيربط ملفات ال css عادي خالص وكتابه المسار الصحيح ليها وكذلك الحال بالنسبة لملفات ال js مع مراعاة انه يتطلب اننا نربط الـ jQuery كمان بالملف علشان اقدر استخدم ال functions اللي في ملف ال js ، فمثلا انا بدأت فعلا اعمل بروجكت جديد وعملت ملف الـ Index.html وكتبت فيه الكود الاساسي عادي خالص.

وفي نفس ملف البروجكت حطيت ملفات الـ bootstrap الثلاثة.

هنيجي في tag الـ <head> وهكتب بيه الكود اللي بربط بيه ملفات الـ css

وفي اخر جزئيه في <body> هحط الكود اللي بيربط مع jQuery وملف ال js

بس وبكده انت قادر على استخدام اي class او function

في المقالات الجاية بإذن الله هنتعرف على العناصر اللي ممكن استخدمها وازاي استخدم الـ grid system بحيث تبقى عناصر الموقع مترتبه وحاجات اكتر عن كيفية استخدام الـ bootstrap عموما.

وللعلم ، الـ documentation المتوفرة على الموقع بتاعه رائعه جدا وسهله الفهم وموجود فيها امثلة مشروحة كمان ممكن تبدأ بيها علطول.
http://twitter.github.com/bootstrap/getting-started.html

والى ان نلتقي في المقال القادم ان شاء الله … سلام ٌ عليكم