تعرّف على Bootstrap 3 ونظامه الشبكي (Grid System)

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

مقدمة حول Bootstrap 3

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

أُطلق Bootstrap 3 في عام 2013، وجاء كإصدار مختلف تمامًا عن الإصدارات السابقة، حيث تم تصميمه من الصفر ليدعم التصميم المتجاوب “Responsive Design” بشكل كامل. تخلّى عن الوحدات الثابتة التي كانت تعتمد على البيكسل واتجه نحو استخدام نظام نسبي يعتمد على النسب المئوية، مما سمح بمرونة أكبر في تخطيط الواجهات.

أبرز مميزات Bootstrap 3

• تصميم متجاوب بالكامل: النظام أصبح Mobile-first، أي يبدأ التصميم انطلاقًا من الشاشات الصغيرة ثم يتوسع تلقائيًا للشاشات الأكبر.

• نظام شبكي مرن: تقسيم المحتوى في الصفحة إلى أعمدة وصفوف، ما يُسهّل ضبط التخطيط عبر الأجهزة.

• مكونات جاهزة (Components): مثل الأزرار، القوائم المنسدلة، النماذج، الأشرطة، علامات التبويب، مما يُقلل الوقت والجهد في البرمجة.

• سهولة التكامل مع JavaScript: توفير مكتبات مساعدة تقوم بوظائف مثل النوافذ المنبثقة، التبديل بين المحتوى، التلميحات، وغيرها.

• دعم المتصفحات: متوافق مع جميع المتصفحات الشائعة مثل Chrome، Firefox، Safari، Internet Explorer 9+.

النظام الشبكي في Bootstrap 3

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

مكونات النظام الشبكي

1. الحاوية (Container): هي العنصر الرئيسي الذي يحتوي جميع العناصر الأخرى. يمكن استخدام نوعين:

   • .container: ذات عرض ثابت ومحدود.

   • .container-fluid: تمتد لتغطي عرض الشاشة بالكامل.

2. الصف (Row): يُستخدم لتجميع الأعمدة، ويجب أن يكون داخل عنصر الحاوية.

   html
   CopyEdit
   <div class="row"> ... div>
   

3. العمود (Column): يحدد مساحة محتوى ضمن صف واحد. ويمكنك تخصيص عدد الأعمدة التي يحتلها عنصر معين باستخدام إحدى الصيغ التالية:

   • .col-xs-

   • .col-sm-

   • .col-md-

   • .col-lg-

حيث يشير كل بادئة إلى نوع الشاشة:

طريقة استخدام النظام الشبكي

لنفترض أنك تريد إنشاء صف يحتوي على ثلاث أعمدة، كل منها يشغل 4 أعمدة من أصل 12 (أي 4+4+4=12):

html
CopyEdit
<div class="container">
  <div class="row">
    <div class="col-md-4">العمود الأولdiv>
    <div class="col-md-4">العمود الثانيdiv>
    <div class="col-md-4">العمود الثالثdiv>
  div>
div>

التحكم في الترتيب والاختفاء

يوفر Bootstrap 3 أدوات تحكم إضافية مثل:

• إخفاء/إظهار الأعمدة حسب حجم الشاشة:

  html
  CopyEdit
  <div class="hidden-xs">يظهر على الشاشات المتوسطة فما فوقdiv>
  <div class="visible-sm">يظهر فقط على الشاشات الصغيرةdiv>
  

• تغيير ترتيب الأعمدة باستخدام Push و Pull:

  html
  CopyEdit
  <div class="col-md-6 col-md-push-6">يأتي بعدdiv>
  <div class="col-md-6 col-md-pull-6">يأتي قبلdiv>
  

نظام الشبكة المرن والاحترافي

يسمح النظام الشبكي في Bootstrap 3 ببناء تخطيطات معقدة بسهولة تامة دون الحاجة لكتابة شيفرات CSS معقدة. على سبيل المثال، يمكن إنشاء صفحة تحتوي على رأس (Header)، قائمة جانبية (Sidebar)، ومحتوى رئيسي (Main Content) بهذه الطريقة:

html
CopyEdit
<div class="container">
  <div class="row">
    <div class="col-md-12">رأس الصفحةdiv>
  div>
  <div class="row">
    <div class="col-md-4">القائمة الجانبيةdiv>
    <div class="col-md-8">المحتوى الرئيسيdiv>
  div>
div>

مقارنة بين الأنظمة الشبكية السابقة والحالية

يتميز Bootstrap 3 على الإصدارات السابقة بإلغاء دعم Internet Explorer 8، ما سمح له باستخدام تقنيات أكثر تطوراً مثل Media Queries بكفاءة. كما أن التوجه نحو التصميم المتجاوب جعل من الممكن توحيد التصميم على مختلف المنصات.

أفضل الممارسات عند استخدام النظام الشبكي

• ابدأ بـ .col-xs- وتدرّج نحو الشاشات الأكبر لتطبيق مبدأ التصميم المتجاوب بفعالية.

• لا تنسَ وضع الأعمدة داخل صفوف (Rows)، لأن ذلك يضمن التنسيق السليم للمحتوى.

• احرص على أن يكون مجموع الأعمدة في الصف الواحد لا يتجاوز 12 عموداً.

• استخدم الصفوف داخل الأعمدة عند الحاجة لتقسيمات داخلية، لتبقى البنية منظمة.

• استفد من خصائص الإظهار والإخفاء لتوفير تجربة استخدام مثالية على جميع الأجهزة.

تطبيقات عملية للنظام الشبكي

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

مثال عملي على نموذج تسجيل دخول:

html
CopyEdit
<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <form>
        <h2>تسجيل الدخولh2>
        <input type="text" class="form-control" placeholder="اسم المستخدم">
        <input type="password" class="form-control" placeholder="كلمة المرور">
        <button class="btn btn-primary btn-block">دخولbutton>
      form>
    div>
  div>
div>

في هذا النموذج، يتم توسيط النموذج باستخدام col-md-offset-4 مما يعكس مرونة التوزيع الشبكي دون الحاجة إلى كتابة أكواد CSS خاصة.

جدول المقارنة بين أحجام الشاشات والبوادئ

خاتمة تقنية

يمثل Bootstrap 3 نظاماً متقدماً في تطوير الواجهات الأمامية، لا سيما من خلال نظامه الشبكي المرن والمبني على مبدأ “Mobile-first”، والذي مكّن المطورين من تصميم صفحات ويب متجاوبة دون تعقيد. إنّ تبني هذا النظام يعزز من سهولة التطوير، وضمان الجودة، ويوفّر تجربة موحدة للمستخدم بغض النظر عن الجهاز المستخدم.

المصادر

• Bootstrap 3 Documentation – getbootstrap.com

• Snook, J. Responsive Web Design Techniques, 2014.