جمعية البرمجيات الحرة وغنو لينكس
  • الرئيسية
  • تصنيفات
    • اخبار
    • العاب
    • برامج
    • مراجعات
    • مقابلات
    • مقالات
    • دروس
      • بوتستراب
    • عتاد
  • النوادي
    • النادي الحر
    • نادي التوطين و التوثيق
    • نادي الانترنت و الحماية
    • نادي الغرافيكس و الالعاب
    • نادي الملتيميديا
    • نادي البرمجة
  • نشاطات الجمعية
  • ليبر بلانت الجزائر
اختر صفحة
لـ aleua mehani | 30/03/2018 | بوتستراب، دروس | 0 تعليقات

دورة بوتستراب 3 – الدرس الثاني Bootstrap Grid System

دورة بوتستراب 3  – الدرس الثاني Bootstrap Grid System

السلام عليكم و رحمة الله و بركاته .

بعدما تعرفنا في المقالة السابقة على 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 .

 

 

 

 

دورة بوتستـراب 3 - الدرس الأول
دورة بوتستراب 3 - الدرس الثالث bootstrap typography

مقالات ذات صلة

  • دورة بوتستراب 3 – الدرس السابع bootstrap alerts

    دورة بوتستراب 3 – الدرس السابع bootstrap alerts

    السلام عليكم و رحمة الله و بركاته . مرحبا بكم في الدرس السابع من دورتنا حول البوتستراب و الذي سيكون حول رسائل... دورة بوتستراب 3 – الدرس السابع bootstrap alerts اقرأ المزيد
  • دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells

    دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells

      السلام عليكم و رحمة الله وبركاته . سنتعرف في هذا الدرس على ثلاث عناصر جديدة في البوتستراب 3 وهي : jumbotron ,... دورة البوتستراب 3 – الدرس السادس bootstrap3 jumbotron , page-header and wells اقرأ المزيد
  • دورة البوتستراب 3 – الدرس الخامس  Bootstrap 3 Images

    دورة البوتستراب 3 – الدرس الخامس Bootstrap 3 Images

      السلام عليكم و رحمة الله و بركاته . سنتطرق في هذا الدرس إن شاء الله إلى مجموعة جديدة من خصائص البوتستراب 3 و التي... دورة البوتستراب 3 – الدرس الخامس Bootstrap 3 Images اقرأ المزيد

أرسل إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

بتقنية مهارتي | ووردبريس