مكونات Bootstrap والمشروع الختامي

١مكتبة قطع جاهزة

كتبت بنفسك CSS للأزرار والبطاقات والشبكات. في المشاريع الكبيرة يستخدم المطوّرون غالبًا مكتبة جاهزة فيها هذه القطع، وأشهرها Bootstrap. تربطها بسطر واحد، ثم تكتب أسماء أصنافها في HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css"><div class="container py-3">  <h1 class="text-primary">مقهى بُنّ</h1>  <button class="btn btn-primary">اطلب الآن</button>  <button class="btn btn-outline-secondary">القائمة</button>  <div class="alert alert-success mt-3">تم حفظ طلبك ✓</div></div>

لم نكتب سطر CSS واحدًا! الأصناف btn و btn-primary و alert جاهزة في الملف الذي ربطناه. ولاحظ bootstrap.rtl.min.css: نسخة مخصصة للصفحات العربية.

٢الشبكة: 12 عمودًا مرة أخرى

تذكر شبكة الـ 12 عمودًا من الدرس 6؟ هي قلب Bootstrap:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css"><div class="container">  <div class="row g-2">    <div class="col-12 col-md-4"><div class="p-3 bg-primary-subtle">بايثون</div></div>    <div class="col-12 col-md-4"><div class="p-3 bg-success-subtle">الويب</div></div>    <div class="col-12 col-md-4"><div class="p-3 bg-warning-subtle">قواعد البيانات</div></div>  </div></div>

هذا التصميم المتجاوب من الدرس 21 كله، لكن بالأصناف بدل @media. جرّب «✏️ جرّب وعدّل» ثم زر 📱.

٣مكونات جاهزة

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css"><nav class="navbar navbar-dark bg-dark px-3">  <a class="navbar-brand" href="#">بُنّ</a>  <span class="badge bg-warning text-dark">جديد</span></nav> <div class="container mt-3">  <div class="card" style="max-width: 18rem">    <img src="images/coffee.svg" class="card-img-top" alt="قهوة">    <div class="card-body">      <h5 class="card-title">قهوة مختصة</h5>      <p class="card-text">تُحمَّص كل صباح.</p>      <a href="#" class="btn btn-primary">أضف للسلة</a>    </div>  </div></div>

المكونات التفاعلية مثل القائمة التي تُطوى في الجوال، والنافذة المنبثقة Modal، تحتاج ملف JavaScript من Bootstrap أيضًا، نضعه قبل نهاية body:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

انسخ الأمثلة من موقع getbootstrap.com (قسم Components)، ثم عدّل النصوص والألوان. القراءة من التوثيق مهارة أساسية لكل مطوّر.

٤متى أستخدم مكتبة؟

لهذا تعلمت CSS أولًا: المكتبة تسرّعك، لكن من يفهم CSS هو من يستطيع تعديلها وإصلاحها. وفي مقرر أطر الويب ستتعلم React لبناء واجهات أكبر.

٥المشروع الختامي

حسب خطة المقرر، تسلّم في آخر الفصل ثلاثة أعمال تجمع كل ما تعلمته:

قائمة التحقق قبل التسليم

• HTML بعناصر دلالية، وعنوان h1 واحد في كل صفحة، و alt لكل صورة.
• ملف CSS خارجي، وألوان وخطوط حسب دليل الهوية، وتباين مناسب.
• متجاوب: جرّبته على عرض الجوال دون تمرير أفقي.
• نموذج فيه تحقق برسائل واضحة، وتفاعل بـ JavaScript (قائمة، أو عدّاد، أو وضع ليلي…).
• الملفات منظمة: index.html و style.css و script.js ومجلد images.
• جرّبته في متصفحين على الأقل، ولا أخطاء في Console.