تصميم وتطوير المواقع: إطار العمل Bootstrap — الإعلام الآلي — الثالثة ثانوي

تصميم المواقع: إطار العمل Bootstrap

Bootstrap إطار عمل CSS مجاني. يبني مواقع متجاوبة (Responsive) بسرعة.

1. ما هو Bootstrap

مكتبة CSS و JavaScript من Twitter. يوفر شبكة (Grid)، مكونات جاهزة (أزرار، قوائم، نماذج)، تأثيرات. نسخة 5: خفيفة، تدعم RTL (العربية).

2. نظام الشبكة (Grid System)

12 عمودا. حاويات (container). صفوف (row). أعمدة (col). أحجام: col-sm, col-md, col-lg, col-xl. مثال: <div class="row"><div class="col-md-6">نصف الشاشة</div></div>.

3. مكونات Bootstrap

الأزرار: btn btn-primary, btn-danger. القوائم: navbar, nav. النماذج: form-control. البطاقات: card. الجداول: table table-striped.

4. التجاوب (Responsive Design)

الموقع يتكيف مع حجم الشاشة (هاتف، جهاز لوحي، حاسوب). كلاسات: d-none (إخفاء), d-md-block (إظهار من حجم md).

مثال

<button class="btn btn-success">موافق</button>

تمارين

1. أنشئ صفحة تحتوي على 3 أعمدة متساوية باستخدام Bootstrap.