/Twitter Bootstrap tutorial – Let's Start

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

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