1 – مقدمة عن Bootstrap – المستوى الأول: الأساسيات

المستوى الأول: الأساسيات

📌 مقدمة عن Bootstrap

1️⃣ ما هو Bootstrap؟

Bootstrap هو إطار عمل (Framework) للـ Front-End تم تطويره في الأصل بواسطة مطوري تويتر.
هو عبارة عن مكتبة جاهزة تحتوي على:

• CSS جاهز لتنسيق الأزرار، النماذج، الجداول، القوائم … إلخ.

• نظام شبكة (Grid System) لبناء صفحات متجاوبة مع جميع الأجهزة (كمبيوتر – تابلت – موبايل).

• JavaScript Components مثل الـ Modal، Carousel، Dropdowns وغيرها.

ببساطة: هو أداة بتخليك تبني مواقع ويب بشكل أسرع وأسهل من إنك تكتب كل شيء من الصفر.

2️⃣ الفرق بين تصميم المواقع العادي و استخدام Bootstrap

• تصميم عادي (من الصفر)

  • لازم تكتب كل أكواد الـ CSS يدوي.

  • محتاج خبرة كبيرة علشان تعمل موقع متجاوب.

  • بتاخد وقت أطول في التصميم.

  • المكونات مثل الـ Buttons, Forms, Navbar هتحتاج تبنيها بنفسك.

• تصميم باستخدام Bootstrap

  • عندك مكتبة ضخمة من الأكواد الجاهزة.

  • الموقع بيبقى Responsive بشكل افتراضي.

  • تقدر تبني صفحات احترافية بسرعة.

  • سهولة التعديل والتخصيص على المكونات الجاهزة.

3️⃣ مميزات Bootstrap

• ✅ مجاني ومفتوح المصدر.

• ✅ متجاوب (Responsive) مع كل الأجهزة.

• ✅ سهولة الاستخدام حتى للمبتدئين.

• ✅ يوفر مكونات جاهزة (Navbar, Buttons, Cards…).

• ✅ مجتمع ضخم ودروس كثيرة متاحة على الإنترنت.

• ✅ يدعم التخصيص باستخدام SASS أو CSS عادي.

4️⃣ عيوب Bootstrap

• ❌ التصميمات أحيانًا متشابهة بين المواقع لو اعتمدت فقط على الـ Classes الجاهزة.

• ❌ إضافة ملفات Bootstrap بتزود حجم الصفحة مقارنة بكتابة CSS مخصص.

• ❌ أحيانًا بيكون في قيود على التخصيص لو مش فاهم النظام كويس.

5️⃣ تنصيب Bootstrap (CDN vs Local)

🔹 الطريقة الأولى – CDN (الأسرع والأبسط)

• تربط ملفات Bootstrap من الإنترنت مباشرة عن طريق روابط جاهزة (من موقع Bootstrap أو CDN).

• مميزات: سريع – سهل – لا يحتاج تحميل ملفات.

• عيوب: لازم اتصال بالإنترنت.

مثال:

• بتنزل ملفات Bootstrap على جهازك وتربطها في المشروع.

• مميزات: يشتغل حتى بدون إنترنت – تقدر تعدل في الملفات.

• عيوب: محتاج تحميل وتخزين الملفات في كل مشروع.

مثال: