في هذا الدرس، سنتعرف على كيفية استخدام نظام الشبكات (Grid System) في Bootstrap بشكل متقدم. يعتبر نظام الشبكات في Bootstrap من أكثر المكونات قوة ومرونة، حيث يسمح لك بإنشاء تخطيطات مرنة ومتجاوبة مع مختلف أحجام الشاشات. من خلال تخصيص الأعمدة (columns) بشكل مناسب، يمكنك بناء تخطيطات معقدة تتكيف مع حجم شاشة المستخدم، مما يجعل تصميم موقعك يتناسب مع مختلف الأجهزة من الهواتف المحمولة إلى الشاشات الكبيرة.
1. مقدمة عن نظام الشبكات في Bootstrap
نظام الشبكات في Bootstrap يعتمد على فكرة تقسيم الصفحة إلى 12 عمودًا (columns)، حيث يمكنك تخصيص عرض الأعمدة لتناسب احتياجات التصميم. يعمل هذا النظام باستخدام فئات CSS مرنة تتيح لك تخصيص الأعمدة والصفوف بسهولة.
هيكل الشبكة في Bootstrap:
- الصفوف (rows): تُستخدم لتجميع الأعمدة.
- الأعمدة (columns): تمثل المساحة القابلة للتخصيص داخل الصفوف. يمكن أن تحتوي الصفحة على 12 عمودًا في المجموع.
في Bootstrap 5، يتم التعامل مع الأعمدة بشكل مرن باستخدام فئات مثل col-, col-sm-, col-md-, col-lg-, و col-xl- لتحديد حجم العمود على أحجام الشاشات المختلفة.
2. بناء تخطيطات معقدة باستخدام grid في Bootstrap
لبناء تخطيطات معقدة، يمكننا تقسيم الصفحة إلى عدة صفوف وأعمدة لتشكيل هيكل مرن. سنرى كيف يمكن تقسيم الصفحة إلى عدة أقسام باستخدام نظام الشبكات، وتخصيص الأعمدة لكل حجم شاشة.
مثال على تخطيط بسيط مع 3 أعمدة:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="p-3 border">العمود الأول</div>
</div>
<div class="col-md-4">
<div class="p-3 border">العمود الثاني</div>
</div>
<div class="col-md-4">
<div class="p-3 border">العمود الثالث</div>
</div>
</div>
</div>
شرح الكود:
- نبدأ باستخدام container لتحديد الإطار الأساسي للتخطيط.
- داخل الـ container، نستخدم row لإنشاء صف يحتوي على الأعمدة.
- كل عمود يحتوي على فئة col-md-4، مما يعني أن العمود سيأخذ 4 وحدات من الـ 12 المتاحة، وبالتالي يكون لدينا 3 أعمدة مع كل عمود بحجم 4 وحدات (4 + 4 + 4 = 12).
- يمكن تخصيص الأعمدة حسب الحجم باستخدام الفئات المختلفة مثل col-sm-, col-lg-, col-xl-.
3. تخصيص الأعمدة لتناسب الشاشات المختلفة
نظام الشبكات في Bootstrap يتيح لك تخصيص الأعمدة لتتناسب مع أحجام الشاشات المختلفة (من الأجهزة الصغيرة مثل الهواتف المحمولة إلى الشاشات الكبيرة). باستخدام الفئات الخاصة بحجم الشاشة، يمكنك تحديد كيفية توزيع الأعمدة على الشاشات المختلفة.
مثال على تخصيص الأعمدة لأحجام مختلفة من الشاشات:
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="p-3 border">العمود الأول</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="p-3 border">العمود الثاني</div>
</div>
<div class="col-12 col-lg-4">
<div class="p-3 border">العمود الثالث</div>
</div>
</div>
</div>
شرح الكود:
- col-12: يعني أن العمود سيأخذ 12 وحدة (أي كامل العرض) على الشاشات الصغيرة جدًا مثل الهواتف المحمولة.
- col-md-6: يعني أن العمود سيأخذ 6 وحدات على الشاشات المتوسطة مثل الأجهزة اللوحية (أي 50% من العرض).
- col-lg-4: يعني أن العمود سيأخذ 4 وحدات على الشاشات الكبيرة مثل أجهزة الكمبيوتر المكتبية (أي 33.33% من العرض).
بناءً على هذا الهيكل، يتم تخصيص الأعمدة لتكون مرنة وتتكيف مع الحجم المناسب للشاشة، مما يضمن أن التصميم يظهر بشكل جيد على جميع الأجهزة.
4. تخصيص الأعمدة داخل الصفوف باستخدام التوزيع والموازنة
إضافة إلى تخصيص الأعمدة، يمكنك أيضًا توزيع الأعمدة داخل الصفوف باستخدام بعض الفئات مثل offset, order, و align-items لتخصيص كيفية ظهور الأعمدة داخل الصف.
مثال على توزيع الأعمدة باستخدام offset و order:
<div class="container">
<div class="row">
<div class="col-6 col-md-4 offset-md-4">
<div class="p-3 border">العمود الأول (محاذي للوسط)</div>
</div>
</div>
</div>
شرح الكود:
- offset-md-4: تعني أن العمود سيبدأ من 4 وحدات فارغة (من اليسار) على الشاشات المتوسطة.
- col-6: يعني أن العمود سيأخذ 6 وحدات من إجمالي 12 على الشاشات الصغيرة.
- col-md-4: يعني أن العمود سيأخذ 4 وحدات من إجمالي 12 على الشاشات المتوسطة وما فوق.
5. تخصيص الأعمدة باستخدام الفئات المتقدمة
إليك بعض الفئات المتقدمة التي يمكن استخدامها مع نظام الشبكات في Bootstrap:
- order-0, order-1, order-2: لتغيير ترتيب الأعمدة في صف.
- offset-: لتحريك الأعمدة عبر المسافات الفارغة.
- align-items-start, align-items-center, align-items-end: لمحاذاة العناصر داخل الصفوف.
مثال على تخصيص الأعمدة باستخدام التوزيع (alignment):
<div class="container">
<div class="row align-items-center" style="height: 200px;">
<div class="col-4">
<div class="p-3 border">العمود الأول</div>
</div>
<div class="col-4">
<div class="p-3 border">العمود الثاني</div>
</div>
<div class="col-4">
<div class="p-3 border">العمود الثالث</div>
</div>
</div>
</div>
شرح الكود:
- align-items-center: يعني أن جميع الأعمدة ستتم محاذاتها في المنتصف عموديًا داخل الصف.
- height: 200px: لضبط ارتفاع الصف حتى تظهر محاذاة العناصر بشكل واضح.
6. استخدام الشبكة المتجاوبة (Responsive Grid)
يتميز نظام الشبكات في Bootstrap بمرونته العالية، حيث يمكنك تعديل الأعمدة لتناسب أحجام الشاشات المختلفة باستخدام فئات col-sm-, col-md-, col-lg-, و col-xl-.
مثال على شبكة متجاوبة متعددة الأعمدة:
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="p-3 border">العمود الأول</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="p-3 border">العمود الثاني</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="p-3 border">العمود الثالث</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="p-3 border">العمود الرابع</div>
</div>
</div>
</div>
شرح الكود:
- col-12: العمود سيأخذ العرض الكامل على الشاشات الصغيرة.
- col-sm-6: العمود سيأخذ نصف العرض على الشاشات الصغيرة والمتوسطة.
- col-md-4: العمود سيأخذ 4 وحدات من 12 على الشاشات المتوسطة.
- col-lg-3: العمود سيأخذ 3 وحدات من 12 على الشاشات الكبيرة.
الخاتمة
باستخدام نظام الشبكات (Grid System) في Bootstrap، يمكنك بناء تخطيطات معقدة ومرنة تتكيف مع جميع أحجام الشاشات المختلفة. يتيح لك Bootstrap تخصيص الأعمدة والصفوف بسهولة باستخدام الفئات المختلفة، مما يتيح لك التحكم الكامل في كيفية عرض العناصر عبر الأجهزة المختلفة.
