2 – الهيكل الأساسي لملف HTML مع Bootstrap – المستوى الأول: الأساسيات
📌 الهيكل الأساسي لملف HTML مع Bootstrap
لما تبدأ أي مشروع بـ Bootstrap لازم يكون عندك ملف HTML منظم فيه:
-
وسم التعريف (DOCTYPE).
-
اللغة والـ Meta tags الخاصة بالتوافق مع المتصفحات.
-
ربط ملفات CSS (Bootstrap + ملفك الشخصي).
-
ربط ملفات JavaScript (Bootstrap + أي مكتبات إضافية).
✨ الشكل العام لملف HTML مع Bootstrap
🟢 شرح الأجزاء المهمة:
1️⃣ <!DOCTYPE html>
ده بيوضح للمتصفح إن الملف مكتوب بـ HTML5.
2️⃣ <meta charset=”UTF-8″>
بيخلي الصفحة تدعم اللغة العربية وكل لغات العالم.
3️⃣ <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
مهم جدًا علشان التصميم يبقى متجاوب مع الموبايل والتابلت.
4️⃣ ربط ملفات CSS الخاصة بـ Bootstrap
ده بيخلي الصفحة تستفيد من كل كلاس جاهز في Bootstrap.
5️⃣ ملفات JavaScript الخاصة بـ Bootstrap
ده الملف اللي فيه أكواد الجافاسكربت الخاصة بـ Bootstrap (زي الـ Modal, Carousel, Dropdown…).
ملاحظة: ملف bootstrap.bundle.min.js يحتوي تلقائيًا على Popper.js اللي بيحتاجه بعض المكونات (زي القوائم المنسدلة – Dropdown).
6️⃣ ملفاتك الخاصة (CSS & JS)
لو عندك أكواد مخصصة لازم تضيف ملفاتك بعد Bootstrap.
-
CSS: بعد ملف Bootstrap علشان تقدر تعدل أو تستبدل تنسيقات Bootstrap.
-
JS: بعد ملفات Bootstrap علشان مايحصلش تضارب.
Call now
Contact WhatsApp
