Bootstrap تنزيل و اول الكلاسات

Bootstrap تنزيل و اول الكلاسات

المقال الماضي حكينا بشكل عام عن bootstrap اليوم رح ننزل bootstrap ورح نشوف كيف بيتشغل ونتعلم اول كلاس … خلونا نبلش

المحتوى :
– التنزيل
– تعا نشوف الملفات
– اول كلاس

تنزيل bootstrap

من موقع getbootstrap.com منقي خيار تنزيل download
بصفحة التنزيل رح يكون عندك اربع خيارات تنزيل
– نسخة مضغوطة Compiled
– كود مصدري Source files
– نظام توزيع محتوى CDN
– برنامج ادارة رزم Package managers

– نسخة مضغوطة Compiled

رح يعطيك ملفين bootstrap.min.css و bootstrap.min.js يلي هنون نسخة مضغوطة Compiled من ملفات bootstrap مشان يقلل حجم الملف ويصير تحميل الصفحة اسرع

بس الملف المضغوط .min غير مفهوم بالنسبة للانسان يعني اذا جربت تفتح ملف ال css  باي محرر رح يطلعلك كود غير مفهوم نهائيا
لانو الضغط و مشان تقليل حجم الملف رح يشيل كل المسافات و يحط كل الحكي ع سطر واحد و يصغر اسم الكلاسات لحرف واحد
النتيحة ملف صغير بس صعبا التعامل معو و هاد الملف ما بيتسعمل خلال التطوير يعني اثناء بناء الموقع ( او لما عم تتعلم ) بعد الانتهاء من
الشغل ممكن تستعمل هل الملفات عالموقع النهائي يلي رح ترفعو ع السيرفر

– كود مصدري Source files

رح يعطيك bootstrap  كامل مع الكود المصدري يعني ملفات غير مضغوطة و ملفات sass
تذكر انو bootstrap مفتوح المصدر تحت ترخيص MIT والكود المصدري موجود بالكامل ع Github

شو يعني مفتوح المصدر و كود مصدري ؟

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

**github دورة**
**licenses تراخيص الاستخدام**

bootstrap النسخة الرابعة مكتوب ب sass pre-processer طيب شو يعني ؟
css pre-processer هي مذيج من لغة برمجة و css عادية بتستعمل بمشارع ال css الكبيرة ومن اشهرها sass و less و postcss
النسخة الرابعة من bootstrap انتقلت من less لاستعمال ال sass
**sass تعلم **

نرجع للتنزيل هاد الخيار رح يعطيك مجلد مضغوط وفي كومة ملفات و مجلدات
حاليا مهتمين بمجلدين المجلد الاول يلي ما رح نستعملو هو مجلد source وفيه ملفات sass الكود المصدري لل bootstrap ويوما ما اذا تعلمت
sass فيك ترجع شتوف كيف bootstrap معمول و ممكن تساهم بتطويره

المجلد التاني و يلي رح نستعملو هو dist وفي مجلد css و js  يلي هو ملفات ال bootstrap  الغير مضغوط

نظام توزيع محتوى cdn

باي مكتبة او اداة برمجية رح تلاقي خيار cdn ويلي بكون بالعادة مجرد رابط ؟
تذكر كيف بتربط ملف css عندك بصفحة html عن طريق link هون نفس الشي بس هنون رح يعطوك الرابط فورا ل css و js

طيب شو يعني cdn ؟
بدل ما تحط الملفات عندك ع السيرفر رح تنحط ع سيرفرات موزعة حول العالم و بتنعطى رابط الملف و للموضوع اكتر من فائدة
بس حاليا نحن بدنا الملفات عنا مشان نشوفون و نتعلم نشتغل عليون
**cdn شو يعني وليش لازم استعملو**

– برنامج ادارة رزم Package managers

بكل الشركات و المشاريع الكبيرة  بيتسعملو برنامج ادارة رزم و هي برامج مساعدة العرب ما بحبو يستعملوها لسبب ما
لكل لغة في برنامج مساعد مثلا composer  ل php و npm ل node ومشاريع .net بتستعمل nuget

**package manger تعلم**

حاليا و بما انو حابين نشوف الملفات و نتعلم عليهون رح نقي الخيار التاني

ملفات bootstrap

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

جرب دور ع الكلاس يلي تعرفنا عليه قبل .btn و شوف كيف معمول

فكرة تجي تشوف الكود شغلة مهمة من باب الفضول و التعلم و لما شي شغلة ما عم تزبط معك وبدك تعرف ليش

شغل

خلونا نبلش شغل متل ما صرت بتعرف bootstrap هو مجرد css , js لهيك اضافتو لاي موقع امر كتير بسيط
من مجلد dist > css بدنا ملف bootstrap.css و ملف bootstrap.js من مجلد js
ضيف هدول الملفين لموقعك و استدعيون بصفحة html
css باستخدام link  و js باستخدام script

تنويه bootstrap بيعتمد بشغلة ع مكتبتين js لازم كمان تضيفون ليشتغل
هنون jquery و popper

بالاخير الكود رح يكون ع الشكل
===========================


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- website CSS -->
    <link rel="stylesheet" href="css/website.css">   
.
.
.
.
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, Bootstrap JS  then your js-->
    <script src="js/jquery.js"></script>
    <script src="js/popper.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/website.js"></script>

===========================

اول كلاس

في مثات الكلاسات و مو هدف الدورة نهائيا تعلمك ياهون واحد واحد بس نعلمك الطريقة الاساسية و الكلاسات الاهم
انت مطلوب منك تفوت تشوف الوثائق documents و تتعرف ع كل الكلاسات الموجودة
لهيك كوظيفة قبل المقال التاني مطلوب منك تفوت ع صفحة الزرار وتشوف شو في كلاسات و تجربا وتشوف الفرق

المقال التاني

المقال الجاي رح نتعلم ع الكلاسات الاساسية متل النصوص الصور القوائم …