bootstrap شو يعني وليش لازم اتعلمو ؟

bootstrap – شو يعني وليش لازم اتعلمو ؟

bootstrap اداة ضرورية و الزامية لاي شخص بيشتغل بمجال web development سواء كان مصمم ويب او مطور مواقع
الحلو بالموضوع انو bootstrap سهل و باقل من اسبوع بتكون جاهز تبلش شغل و تصميم
خلونا نبلش

المحتوى :
– شو يعني bootstrap ؟
– شو الشغلات يلي لازم اعرفا قبل ما بلش ؟
– شو يعني css framework ؟
– شو بفيدني bootstrap ؟!

شو لازم اعرف قبل ما بلش ب bootstrap

الدورة موجهة للعالم يلي حابة تتعلم مجال تطوير الويب و المواقع الالكترونية و بتتطلب معرفة ب html , css و اطلاع و لو بسيط ب js
يعني اساسيات ما تخاف

شو المشكلة و ليش Bootstrap ؟

كل اداة او مكتبة انعملت لتحل مشكلة او تقدم حل جديد و احسن … طيب وين المشكلة ؟

اذا طلبت منك تفتح محرر نصوص عندك و تعملي زر بصفحة html رح تقلي الموضوع بسيط كتير ورح يطلع معك كود قريب من هاد
********************
<button> click me ! </button>
********************
وبالفعل اذا فتحت صفحة html يلي عملتا باي متصفح رح يطلع معك زر مكتوب عليه click me !
يعني الوضع تماما
انو مو كتير تمام خلينا نقول … الزر يلي طلع مو احلى زر شفتو بحياتي و اكيد ما خرج تستعملو ب موقع انترنت

رح تقلي اي مو مشكلة منستعمل css ورح تعمل class للزر و تجرب تعدل مثلا margin مشان تبعدو عن العناصر المحيطة و اكيد تحط background-color وتغير لون color و حجم الخط  font-size و تزيد padding و ممكن تغير ب border و تضيف تاثير للمؤشر ….
المهم بعد شغل رح يطلع معك كود قريب من هاد
********************
//css
.button {

}
// html
<button class=”button”> click me ! </button>
********************
و بالفعل اذا شفنا النتيجة صار عنا زر حلو
بس لسا المشكلة ما خلصت لانو باي موقع لسا عندك كومة عناصر بدا شغل عندك قوائم صور خطوط عناصر ادخال …
يعني القصة لسا بدا وقت و جهد كتير
مو بس هيك الشغل في تكرار كتير يعني فرضا خلصنا الموقع و رح نشتغل ع موقع تاني اكيد رح يكون عنا زرار و قوائم كمان شو منعمل مو معقول منبلش من الصفر مرة تانية !
المشكلة التالتة هي لما بدك تعمل تصميم باسرع وقت ممكن مثلا انت مبرمج و بدك نعمل موقع تجرب عليه الكود و مو كتير مهم تفاصيل التصميم بدك بس واجهة
او حتى انت مصمم و بدك تصميم اولي بسرعة prototype لتفرجيه للزبون مشان تاخد رايه بشكل عام قبل ما تبلش شغل

لحل هل المشاكل العالم صارت تعمل snippets و هي ملفات css منحط فيا الشغلات يلي عملناها قبل مشان نرجع نستعملا ب مشاريع جديدة
مثلا الزر يلي عملناه اول شي منحطو بملف ممكن نسميه button.css مع الزرار التانية و بس لزمنا زر بدل ما نبلش من الصفر فينا نرجع نستعمل الكود يلي عنا

وهي ببساطة فكرة bootstrap

bootstrap

متل ما قلنا صارت العالم تعتمد ع ملفات snippets بشغلا يلي هي ملفات html , css معمولة سابقا
وصارت كمان تتبادل الملفات بين بعض (مو كتير قديم هل الحكي من كم سنة) يعين عطيني ملف الزرار يلي عندك بعطيك ملف القوائم يلي عاملو

لحتى اجا @mod @fat ب 2010 و هدول جماعة اكابر كانو يشتغلو ب تويتر twitter و قالو خيو نحن عنا ملفات snippets مسنعملا بشغلنا شو رايكون نعطيكون ياها ببلاش مشان الكل يستعملا و الكل يساهم بتطويرا
وهيك بلش اهم مشروع ب تصميم الويب Twitter Blueprint يلي بعدين تطور و وصل للنسخة الرابعة حاليا و صار اسمو bootstrap

نرجع نحكي حكي تقني
bootstrap هو css framework متاح ك opensource تحت ترخيص استخدام MIT

css framework هي ملفات css وشوية js جاهزة لتستعملا فورا بدون ما ترجع تخترع الذرة
open source مفتوح المصدر يعني الكود المصدري متاح للكل و فيك تشوفو و تساهم بتطويره
ترخيص استخدام وثيقة بتحدد شو فيك تعمل و شو قيود استخدام هل المنتج البرمجي
MIT هي اكتر وثيقة استخدام سهلة يعني فيك تعمل ب bootstrap يلي بدك ياه ببلاش
فيك تستعملو بمشاريعك الشخصية و التجارية فيك تعدل ع كود bootstrap او حتى تستعملو بمشروع خاص فيك دون قيود

** تعلم github **
**وثائق الاستخدام **

طيب كتير منيح فيك تعطينا مثال ؟
اي اذا منرجع ع الزر تبعنا كيف بدنا نعمل هيك شي ب bootstrap
******************
<button class="btn"> click me !</button>
******************
هل السطر يلي فوق يرح يعطيك نفس نتيجة الزر يلي عملناه بدون ما نكتب اي سطر css !

bootstrap فكرتو بسيطة هو مجموعة كلاسات css متكوبة مسبقا مشان انت ترجع تستعملا
و من هي الكلاسات كلاس اسمو btn. يلي هو كلاس الزر
يعني بس تنزل ع مشروعك bootstrap بكفي انك تضيف اسم الكلاس للعنصر سواء زر او صورة او قائمة وبس
… css مكتوبة مسبقا

مراجعة

خلينا نركز شوية افكار
صراحة الدورة كمعلومات خلصت هاد هو bootstrap ملفات css و انت بتسدعي الكلاس
الباقي عليك تروح ع موقع bootstrap و تشوف الكلاسات الموجودة

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

طيب سؤال هيك انا ما تقيدت بتصميم معين ؟
لا برجع بذكر bootstrap هو مجرد css يعني فيك تغيرو متل ما بدك ببساطة بس بدل ما تبلش من الصفر بصير بدك شوية تعديلات بسيية متل الالوان او الخطوط

شو نتعلم المقال الجاي

المقال الجاي رح ننزل bootstrap و نجرب كم كلاس اساسي