ما هو نظام الشبكة في Bootstrap؟ وكيف تستخدمه بسهولة

إذا كنت في بداية رحلتك لتعلم تصميم صفحات الويب، فبلا شك قد سمعت عن إطار العمل الشهير Bootstrap. من أهم ما يميز هذا الإطار هو نظام الشبكة (Grid System) الذي يجعل تنسيق المحتوى وتنظيمه في الصفحة سهلًا وسريعًا على مختلف أحجام الشاشات، سواء كانت شاشة كمبيوتر أو هاتف. في هذا المقال سنتعرف سويًا على هذا النظام خطوة بخطوة، وبأسلوب بسيط بعيد عن التعقيد أو كثرة الأكواد.

ما هو نظام الشبكة في Bootstrap؟

عندما نبدأ في تصميم صفحات الويب، غالبًا ما نحتاج إلى تنظيم المحتوى بطريقة مرتبة وواضحة، مثلًا، قد نرغب في تقسيم الصفحة إلى أعمدة وصفوف، ليكون فيها جزء للنص وجزء للصور وجزء آخر لأزرار أو قوائم، لكن كتابة هذه الترتيبات وتنسيقها يدويًا قد يكون أمرًا معقدًا، خصوصًا مع اختلاف أحجام الشاشات بين أجهزة الكمبيوتر المكتبية والهواتف المحمولة.

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

ونظام الشبكة يعتمد على تقسيم كل صف داخل الصفحة إلى 12 عمودًا أفقيًا، وهذا يعني أنه يمكنك تحديد عرض أي عنصر من عناصر الصفحة على أساس عدد الأعمدة التي تريد أن يشغلها. على سبيل المثال، يمكن أن يأخذ النص 8 أعمدة في حين تأخذ الصورة 4 أعمدة، أو يمكن تقسيم الصفحة إلى أعمدة متساوية حسب التصميم الذي تريده.

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

لماذا نظام الشبكة مهم؟

ما يميز نظام الشبكة في Bootstrap هو أنه يوفر لك ترتيبًا مرنًا ومنظمًا للمحتوى، ويجعله سهل التعديل حسب حجم الشاشة. بدلًا من كتابة أكواد معقدة، يمكنك توزيع العناصر وتعديل عرضها بما يناسب تصميمك، مع الحفاظ على مظهر متجاوب يناسب الهواتف والأجهزة المكتبية.

التوافق مع Flexbox

يعتمد نظام الشبكة على تقنية Flexbox في CSS، وهي طريقة حديثة ومرنة لترتيب العناصر داخل الصفحة، لكن مع نظام الشبكة لا تحتاج لأن تتعلم Flexbox بنفسك؛ فـBootstrap يتولى ذلك من خلف الكواليس ويمنحك أدوات تستخدمها بسهولة.

كيف يتكون هذا النظام؟

يتكون نظام الشبكة في البوتستراب Bootstrap من ثلاثة مكونات رئيسة وهي:

1. الحاوية (Container): هي العنصر الذي يُستخدم لتجميع المحتوى داخل الصفحة وتحديد عرضه، وكأنها الإطار الخارجي الذي يضيف بعض الهوامش والمساحات. ويوافر Bootstrap نوعين: حاوية ثابتة بعرض محدد، وأخرى مرنة تمتد على كامل الشاشة.

2. الصف (Row): داخل الحاوية يمكنك إنشاء صفوفًا لتجميع الأعمدة بجانب بعضها بشكل أفقي ومنظم.

3. العمود (Column): داخل كل صف تُقسَّم المساحة إلى أعمدة، وهي وحدات البناء الأساسية في النظام. كل عمود يمكن أن يشغل عددًا معينًا من أصل 12 عمودًا في الصف، بحسب تصميمك – سواء أردت عمودًا واحدًا أو أكثر بأحجام متساوية أو مختلفة.

ما معنى أنه متجاوب؟

كلمة (متجاوب) تعني أن تصميم الصفحة يتكيف تلقائيًّا مع حجم شاشة المستخدم، سواء كانت كبيرة أو صغيرة. ونظام الشبكة في Bootstrap يوفّر هذه الميزة تلقائيًا، فيضبط توزيع الأعمدة بطريقة تجعل الصفحة سهلة التصفح على جميع الأجهزة.

وإذا كنت ترغب في تعلم مزيد عن Bootstrap وكيفية استخدام نظام الشبكة وغيره من الأدوات، أنصحك بالالتحاق بـ دورة Bootstrap التي يقدمها إسماعيل مسعد على منصة تعلَّم، لتتعلم بطريقة عملية وسلسة كيفية بناء مواقع حديثة ومتجاوبة.