9- 🧠 فهم شبكة الأعمدة في Bootstrap

Описание: شرح نظام الشبكة (Grid System) في Bootstrap
نظام الشبكة في Bootstrap يتيح لنا توزيع المحتوى داخل الصفحة بشكل مرن ومنظم، وذلك من خلال تقسيم الصفحة إلى أعمدة مختلفة تناسب أحجام الشاشات.

أولاً: فئات أحجام الشاشات (Breakpoints)
Bootstrap يقدم لنا 6 نقاط توقف رئيسية (Breakpoints)، كل واحدة منها لها بادئة (prefix) خاصة:

صغير جداً (Extra small): بدون بادئة (col-)

صغير (Small): بادئة col-sm-

متوسط (Medium): بادئة col-md-

كبير (Large): بادئة col-lg-

كبير جداً (Extra Large): بادئة col-xl-

كبير جداً جداً (Extra Extra Large): بادئة col-xxl-

كيف نستخدم هذه النقاط؟
نفترض أننا نريد إنشاء أربعة أعمدة باستخدام Bootstrap:

أولاً، ننشئ container كحاوية للمحتوى.

داخل الحاوية، نضيف row (صف).

داخل الصف، نضيف أربعة col (أعمدة).

كل عمود نضيف له كلاس مثل col-md-3 ليأخذ 3 من أصل 12 جزءًا، مما يعني 4 أعمدة في الصف الواحد (12 ÷ 3 = 4).


ملاحظة:
Bootstrap يعمل بشكل تلقائي ليجعل المحتوى مناسبًا لشاشات الجوال، لذلك عند تقليل حجم المتصفح، ستجد أن الأعمدة تصبح تحت بعضها (عمود واحد في كل صف)، وهذا بسبب أن Bootstrap يستخدم مبدأ "Mobile First".

تخصيص العرض حسب نقطة التوقف
إذا أردنا مثلًا أن تظهر الأعمدة الأربعة فقط على الشاشات المتوسطة (768 بكسل فأكثر)، لكن تصبح عمودًا واحدًا على الشاشات الأصغر، نستخدم col-md-3 فقط، بدون col-sm- أو col-.

تقسيم الأعمدة لثلاثة فقط عند نقطة توقف معينة
لو أردنا أن يظهر المحتوى في 3 أعمدة فقط عند العرض المتوسط، نستخدم col-md-4 بدلًا من col-md-3 (لأن 12 ÷ 4 = 3).

تحسين التنسيق
نضيف بعض التنسيقات لتحسين المظهر مثل:

bg-primary: خلفية زرقاء

text-white: لون النص أبيض

text-center: توسيط النص

p-3: مسافة padding داخل العنصر

mb-3: مسافة بينية (margin bottom) بين الأعمدة عند التكدس

اختبار الاستجابة (Responsive)
يمكنك اختبار ما إذا كانت الأعمدة تتغير حسب حجم الشاشة من خلال:

الضغط بزر الماوس الأيمن على الصفحة.

اختيار "فحص العنصر".

الضغط على رمز الهاتف/الجهاز اللوحي.

تغيير عرض الشاشة لملاحظة كيف تتغير الأعمدة حسب نقاط التوقف.

خلاصة
في هذه المحاضرة تعلمنا:

ما هي نقاط التوقف في Bootstrap.

كيفية استخدام col-sm-, col-md-, وغيرها للتحكم في عدد الأعمدة.

كيف تجعل الأعمدة تتكيف تلقائيًا مع أحجام الشاشات.

أهمية اختبار التصميم في الوضع "Responsive".

أنصحك بالتجربة على جميع النقاط حتى لو لم تستخدمها حاليًا، فقد تحتاجها في المستقبل.