مشروع مكتبة بتصميم Bootstrap متجاوب
تفاصيل العمل
*الفكرة العامة:*
تم تطوير هذا الموقع كـ *مشروع تدريبي* يهدف إلى تصميم واجهة متكاملة لمكتبة افتراضية، مع التركيز على الاستفادة من إطار عمل *Bootstrap* لإنشاء هيكل متجاوب وسريع، مع إضافة تنسيقات CSS مخصصة لتحسين التجربة البصرية.
---
*أبرز الميزات والتقنيات المستخدمة:*
1. *هيكلة الموقع باستخدام Bootstrap 4:*
- استخدام نظام الـ *Grid System* في Bootstrap لتقسيم الصفحة بشكل متجاوب (مثل عرض الكتب في صفوف وأعمدة تناسب جميع الشاشات).
- توظيف مكونات Bootstrap الجاهزة مثل:
- *Navbar* (شريط التنقل) مع قائمة dropdown للفئات.
- *Cards* لعرض الكتب مع صورها وعناوينها وتفاصيلها.
- *Forms* في صفحة الاتصال.
- *Buttons* وألوانها المدمجة.
2. *تنسيقات CSS مخصصة:*
- إضافة تأثيرات بسيطة مثل hover على بطاقات الكتب (تغيير الظل أو اللون).
- تخصيص الألوان الأساسية للموقع (مثل ألوان العناوين والخلفيات) لتتناسب مع هوية المكتبة.
- تحسين المسافات (padding/margin) بين العناصر لتعزيز التنظيم البصري.
3. *تصميم الصفحات الرئيسية:*
- *الصفحة الرئيسية:*
- قسم للكتب الأكثر مبيعًا.
- قسم "كتب جديدة" مع صور مصغرة.
- بانر دعائي مع نص مركزي وأزرار Call-to-Action.
- *صفحة الفئات:*
- تصنيف الكتب حسب الموضوعات (أدب، علوم، تكنولوجيا).
- *صفحة الاتصال:*
- نموذج لإرسال الرسائل مع حقول الاسم والبريد والرسالة.
4. *التجاوب مع الأجهزة المختلفة:*
- التأكد من أن المظهر يتكيف مع الشاشات الصغيرة (الهواتف) والكبيرة (أجهزة الكمبيوتر) عبر *classes* مثل col-md-4 أو d-flex.
---
*الهدف من المشروع:*
- تطبيق مفاهيم Bootstrap الأساسية مثل *التخطيط المتجاوب* و*المكونات الجاهزة*.
- تعزيز مهارات CSS عبر التعديل على التصميمات المُعدة مسبقًا.
- إنشاء نموذج عملي لواجهة موقع مكتبة يمكن تطويره لاحقًا بإضافة وظائف مثل قاعدة بيانات أو نظام حجز.
---
*ملاحظات التطوير:*
- تم تجنب الإفراط في استخدام CSS للحفاظ على بساطة المشروع كخطوة أولى.
- يمكن إضافة مكتبات مثل *jQuery* لتأثيرات متقدمة في المستقبل.