إعداد الـ Grid System في Bootstrap

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

مفهوم الـ Grid System في Bootstrap

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

إعداد التخطيطات باستخدام الـ Grid System

1. الهيكلية الأساسية:

يتطلب إعداد التخطيطات باستخدام نظام الشبكات ثلاث خطوات رئيسية:

1. إنشاء عنصر .container أو .container-fluid:
   • .container: يحدد عرضًا ثابتًا بناءً على حجم الشاشة.
   • .container-fluid: يحدد عرضًا مرنًا يمتد ليملأ كامل الشاشة.
   <div class="container"> <!-- محتوى الشبكة هنا --> </div>
2. إضافة صفوف باستخدام .row:
   • تُستخدم الصفوف لاحتواء الأعمدة وضمان تنظيمها بشكل صحيح.
   <div class="row"> <!-- الأعمدة هنا --> </div>
3. إضافة أعمدة باستخدام .col:
   • يتم تقسيم كل صف إلى 12 عمودًا، ويمكنك تخصيص عدد الأعمدة لكل عنصر وفقًا لاحتياجاتك.
   <div class="col"> <!-- محتوى العمود هنا --> </div>

2. تخصيص الأعمدة:

يمكنك تخصيص الأعمدة لتناسب محتوياتك. على سبيل المثال، يمكن تخصيص عمودين لعنصر و10 أعمدة لعنصر آخر في نفس الصف:

<div class="container">
   <div class="row">
       <div class="col-2">عمود 1</div>
       <div class="col-10">عمود 2</div>
   </div>
</div>

تقسيم الأعمدة باستخدام Breakpoints

يوفر Bootstrap فئات متخصصة لتخصيص الأعمدة بناءً على حجم الشاشة باستخدام نقاط الانقطاع:

• col-xs-*: للشاشات الصغيرة جدًا (أقل من 576px).
• col-sm-*: للشاشات الصغيرة (576px وما فوق).
• col-md-*: للشاشات المتوسطة (768px وما فوق).
• col-lg-*: للشاشات الكبيرة (992px وما فوق).
• col-xl-*: للشاشات الكبيرة جدًا (1200px وما فوق).

مثال عملي:

<div class="container">
   <div class="row">
       <div class="col-sm-6 col-md-4 col-lg-3">عمود 1</div>
       <div class="col-sm-6 col-md-8 col-lg-9">عمود 2</div>
   </div>
</div>

• col-sm-6: يشغل العمود 6 أعمدة من الشبكة على الشاشات الصغيرة.
• col-md-4: يشغل العمود 4 أعمدة على الشاشات المتوسطة.
• col-lg-3: يشغل العمود 3 أعمدة على الشاشات الكبيرة.

تنظيم الأعمدة لتكون متجاوبة على جميع الشاشات

1. الأعمدة المتداخلة:

يمكنك وضع صفوف وأعمدة داخل أعمدة أخرى لتصميم تخطيطات معقدة.

<div class="container">
   <div class="row">
       <div class="col-6">
           <div class="row">
               <div class="col-6">عمود داخلي 1</div>
               <div class="col-6">عمود داخلي 2</div>
           </div>
       </div>
       <div class="col-6">عمود خارجي</div>
   </div>
</div>

2. إعادة ترتيب الأعمدة:

يمكنك استخدام order-* لإعادة ترتيب الأعمدة بناءً على نقاط الانقطاع.

<div class="container">
   <div class="row">
       <div class="col order-2">العمود الأول</div>
       <div class="col order-1">العمود الثاني</div>
   </div>
</div>

3. إخفاء الأعمدة:

يمكنك إخفاء الأعمدة على شاشات معينة باستخدام d-none مع نقاط الانقطاع:

<div class="container">
   <div class="row">
       <div class="col d-none d-md-block">مرئي فقط على الشاشات المتوسطة فما فوق</div>
       <div class="col">مرئي دائمًا</div>
   </div>
</div>

نصائح لتصميم صفحات متجاوبة

1. ابدأ بتصميم بسيط: قم بتقسيم الصفحات إلى أقسام واضحة باستخدام الصفوف والأعمدة.
2. اختبر التخطيط: تحقق من توافق التخطيطات مع الشاشات المختلفة باستخدام أدوات المطور.
3. استخدم نقاط الانقطاع بحكمة: اجعل التصميم مريحًا للمستخدمين على مختلف الأجهزة.

خلاصة

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