السلام عليكم و رحمة الله و بركاته .
بعدما تعرفنا في المقالة السابقة على container و container-fluid سنشرح اليوم عنصر جديد في البوتستراب و هو الـ Bootstrap Grid System و يعتبر أهم عنصر في البوتستراب framework . و يستعمل في تنسيق و تنظيم محتوى الصفحات الإلكترونية .
1- النظام الشبكي في البوتستراب ( Grid System ) :
هو نظام / بنية تركيبية في البوتستراب تحتوي على مجموعة من أصناف ( Bootstrap Css Classes ) صمم لتنظيم و تنسيق محتوى صفحة الويب على شكل من الصفوف و الأعمدة متقاطعة عموديا و أفقيا كما هو موضح في الصورة التالية :
- الـ Grid System : مصمم على بنية الهاتف أولا مما يجعله متجاوب ( Responsive ) مع جميع شاشات الأجهزة كما هو موضح في الصورة التالية :
2 – قواعد إستخدام الـ Grid System في البوتستراب :
- لضمان عمل Grid System بشكل جيد يجب وضعه داخل Container أو Container-fluid .
- توضع الأعمدة داخل الصف حيث كل صف يحتوي على 12 عمود كحد أقصى .
- يوضع المحتوى داخل الأعمدة .
- إذا زاد عدد الأعمدة في الصف على 12 عمود يظهر العمود الجديد في صف جديد .
3– الـ Grid System Classes في البوتستراب :
دكرنا سابقا أن Grid System متجاوب مع جميع الشاشات و هذا بفضل أصناف الـ Css في البوتستراب و التي تقسم إلى أربع مجموعات :
- xs : إختصارا لـ xtra small device أي الشاشات التي عرضها أقل من 768px .
- sm : إختصارا لـ small device أي الشاشات التي عرضها أكبر من 768px .
- md : إختصارا لـ medium device أي الشاشات التي عرضها أكبر من 922px .
- xs : إختصارا لـ large device أي الشاشات التي عرضها أكبر من 1200px .
كما يمكن المزج بين هده الـ classes لإنشاء تصميم متجاوب بالشكل الذي تريده.
4 – الكود الأساسي للبوتستراب Grid System :
<div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> ... </div>
حيث يمثل صنف الـ row الصف الذي يوضع بداخله الأعمدة و لا يفوق عدد الأعمدة في كل صف 12 عمود , أما الـ col فهو العمود و تمثل ( * ) الأولى الصنف ( css class ) الموافق لعرض الشاشة الدي تريده xs أو sm أو md أو lg أما ( * ) الثانية فيوضع فيها رقم العمود ما بين 1 و 12 .
و في ما يلي مجموعة أمثلة عن البوتستراب Grid System
ملاحظة
الأمثلة مرفوعة على JSFIDDLE يمكنك تصفحها تحميلها و تعديلها , أو يمكنك الضغط على html أو css لرؤية المحتوى
5 – صفحة مشكلة من 3 أعمدة متساوية العرض :
الصفحة الآتية مشكلة من 3 أعمدة متساوية العرض بإستعمال صنف الـ col-sm-4 أي أنها ستظهر على شكل 3 أعمدة متساوية العرض على الشاشات التي عرضها أكبر من 768px , أما الشاشات الأصغر من 768px فستظهر الأعمدة تحت بعضها البعض .
6 – صفحة مشكلة من عمودين مختلفين في العرض :
الصفحة الآتية مشكلة من عمودين مختلفين في العرض .
العمود الأول يظهر باستخدام col-sm-4 class و العمود الثاني يظهر باستخدام col-sm-8 class .
اذا كان عرض الشاشة أقل من 768px ستظهر الأعمدة تحت بعضها البعض .
7 – صفحة مشكلة من ثلاث أعمدة مختلفة في العرض :
الصفحة الآتية مشكلة من 3 أعمدة مختلفة في العرض .
العمود الأول و الثالث باستخدام col-sm-4 class و العمود الثاني يظهر باستخدام col-sm-8 class .
ادا كان عرض الشاشة أقل من 768px ستظهر الأعمدة تحت بعضها البعض .
8 – صفحة مشكلة من عمودين يتغير عرضهم حسب نوع الشاشة ( حاسوب , لوحة , هاتف ) :
الصفحة الآتية مشكلة من عمودين بحيث : يظهر العمودان بعرض متساوي عندما يكون عرض الشاشة أقل من 768px و بعرض مختلف عندما يكون أكبر, وذلك لأن استخدمنا الـ col-sm و col-xs و col-md مع بعض مما يسمح بإنشاء تصميم متجاوب ومتغير حسب عرض الشاشة .
9 – إستخدام صنف الـ .clearfix لترك فراغ مساوي لحجم المحتوى بين الأعمدة :
في هذا المثال يوجد داخل الصف 4 أعمدة و التي تظهر بشكل أفقي عندما يكون عرض الشاشة أكبر من 768px لإستخدامنا الـ col-sm-3 اما اذا كان العرض أقل من 768px فيظهر العمود الثالث و الرابع تحت العمود الأول و الثاني لإستخدامنا الـ col-xs-6.
اذا قمت بتقليص عرض المتصفح سترى أن الفراغتحت العمود الثاني و الرابع يساوي طول المحتوى الموجود تحت العمود الأول و ذلك بفض صنف الـ clearfix الذي يسمح بالتنسيق بين الأعمدة كما إستعملنا الـ visible-xs لكي يعمل الـ clearfix في الشاشات الصغيرة فقط .
10 – إزاحة الأعمدة نحو اليمن بإستخدام الـ offset :
تعمل الـ offset على ازاحة عمود بمقدار معين وذلك بعمل محاذاة من اليسار مما يقوم بازاحة العمود نحو اليمين .
بعد نقوم بتحديد عرض و نوع العمود مثلا col-md-4 نضع بعده الازاحة بهذا شكل col-md-offset-2 .
بحيث الـ col تمثل العمود و بعدها نوع عرض الشاشة ثم الـ offset أما الرقم فيمثل مقدار الإزاحة من 1 إلى 12 .
المثال الآتي يقوم بشرح كيفية الإزاحة :
سنقوم بترك العمود الأول في مكانه و نزيح العمود الثاني الى اليمين بـ 4 درجات و العمود الثالث نزيحه بـ 8 درجات نحو اليمين .
11 – سحب ودفع الأعمدة نحو اليمين و اليسار بإستعمال الـ push و pull :
تعمل الـ push و الـ pull بنفس عمل الـ offset بحيث :
- push : تقوم بدفع العمود نحو اليمن و ذلك بترك محاذاة من اليسار .
- pull : تقوم بسحب العمود نحو اليسار و ذلك بترك محاذاة من اليمن .
في المثال القادم نضع في الصف الأول عمودان بدون باستخدام الـ push و الـ pull أما في الصف الثاني فنقوم بدفع العمود الأول نحو اليمين بمقدار 8 درجات باستعمال الـ push و سحب العمود الثاني نحو اليسار بمقدار 4 باستعمال الـ pull .
هذا كل ما يتعلق بـالـ bootstrap3 Grid System نرجو من الله أن تكونوا قد إستفدتم منه .
شكرا جزيلا على المتابعة .
المصـادر : المصدر 1 , المصدر 2 , المصدر 3 .
