تغيير خلفية العنصر بناء ع الوضع الليل ي

نعم ✅ وبطريقة احترافية جدًا مع Bootstrap 5.3 👌🔥لأننا نستخدم: data-bs-theme=”light”data-bs-theme=”dark” يمكنك تغيير خلفية أي عنصر بناءً على الوضع بسهولة عبر CSS. 🎯 الطريقة الصحيحة (المعتمدة رسميًا) Bootstrap يغير الثيم عبر: <html data-bs-theme=”dark”> إذن يمكننا استهدافه هكذا 👇 🟢 الطريقة…

Custom Colors in Bootstrap

الآن دخلنا مرحلة تخصيص نظام الألوان بالكامل في Bootstrap 5.3بمستوى احترافي وليس مجرد تعديل عشوائي 👏 أنت تريد: سنقسم الشرح إلى 3 مستويات: 🎯 المستوى 1: فهم كيف يعمل Bootstrap 5.3 داخليًا Bootstrap 5.3 يعتمد على: مثال: كل مكونات Bootstrap…

Dark Mode

الآن سنبني نظام Dark / Light Mode احترافي 100% باستخدام⚡ Bootstrap 5.3 الرسمي (وليس CSS عشوائي). Bootstrap 5.3 يقدم دعم رسمي عبر: ونحن سنبني نظام احترافي فيه: 🎯 الفكرة المعمارية الصحيحة نحتاج: ⚠️ لا نستخدم Redux لهذا الغرض. 🏗 الخطوة…

QuickViewModal

🎯 الحل الاحترافي الحقيقي 🔥 إنشاء QuickViewModal واحد على مستوى التطبيق كله بدل وضع المودال داخل كل صفحة، نضعه في مكان أعلى: 🧠 كيف نجعل أي كتاب في أي صفحة يفتح نفس المودال؟ لدينا خيارين احترافيين: 🟢 الخيار 1 (أنظف…

Pagination

1- Slice Code 2- Book Page 3- أزرار التنقل سنرجع الآن ونشرح ربط رقم الصفحة بالـ URL بالتفصيل العميق خطوة خطوة حتى تفهمه معماريًا بالكامل. 🎯 الهدف النهائي نريد أن يصبح الرابط هكذا: وعند: 🔥 هذا هو السلوك الاحترافي. 🧠…

Search Books

الطريقة الثانية: أولًا: تنفيذ Live Search بدون Debounce (للفهم) التنفيذ الصحيح باستخدام setTimeout

ArchivePage

 const latestBooks = data?.slice(0, 5); 🧠 أولاً: السطر الكامل 🎯 ماذا نريد أن نفعل؟ نريد: اختيار الكتب التي تنتمي للتصنيف الحالي فقط. 🧩 لنفهم شكل البيانات أولاً شكل الكتب داخل data 🧩 قيمة id من الرابط لو الرابط: فإن: 🧠…

Relared Books

الكتب المتعلقة من خلال هذا الكود: 🧠 أولاً: الرابط الكامل هذا يسمى: ⭐ Strapi REST Query Filters وهو نظام فلترة جاهز داخل Strapi. 🎯 الهدف من هذا الرابط نريد: 👉 كتب لها نفس التصنيف👉 بدون الكتاب الحالي👉 مع جلب الصور…

عناصر – inline + Block

✅ عناصر Block (تبدأ بسطر جديد وتملأ العرض غالبًا) العنصر الوصف <div> حاوية عامة <p> فقرة <h1> إلى <h6> العناوين <header> رأس الصفحة/القسم <footer> تذييل <main> المحتوى الرئيسي <section> قسم <article> مقال <aside> محتوى جانبي <nav> شريط التنقل <form> نموذج…