هيكلية Bootstrap الأساسية

بواسطة /

الدرس الثاني: هيكلية Bootstrap الأساسية

مقدمة عن هيكلية Bootstrap

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

بفضل Grid System، يمكنك إنشاء تخطيطات متجاوبة (Responsive Layouts) تتكيف تلقائيًا مع الهواتف المحمولة، الأجهزة اللوحية، وشاشات الكمبيوتر. تعتمد هذه الهيكلية على نظام من 12 عمودًا يمكن توزيعها بمرونة.

تعريف الـ Grid System (نظام الشبكات في Bootstrap)

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

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

  1. .container:
    • تُستخدم لتحديد منطقة مركزية تحتوي على جميع العناصر.
    • تُوفر حواف تلقائية لتوسيط المحتوى داخل الصفحة.
    • نوعان رئيسيان:
      • .container: بحجم ثابت بناءً على عرض الشاشة.
      • .container-fluid: يمتد على كامل عرض الشاشة.
  2. .row:
    • تُستخدم لإنشاء صف يحتوي على أعمدة.
    • يتم ترتيب الأعمدة داخل الصف بشكل أفقي.
  3. .col:
    • تُستخدم لإنشاء أعمدة داخل الصف.
    • الأعمدة تعتمد على نظام الـ 12 عمودًا.
    • يمكن تخصيص عرض كل عمود باستخدام أسماء الفئات المخصصة.

كيفية إنشاء صفوف وأعمدة باستخدام .container و .row و .col

الخطوة 1: إنشاء حاوية (Container)

ابدأ بإضافة عنصر الحاوية لتوسيط المحتوى والتحكم في عرضه:

<div class="container">
    <h1>مرحبًا بك في نظام الشبكات</h1>
</div>

الخطوة 2: إنشاء صفوف (Rows)

أضف صفًا باستخدام الفئة .row لتحديد مساحة العمل:

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

الخطوة 3: تقسيم الصف إلى أعمدة (Columns)

استخدم الفئة .col لتحديد عدد الأعمدة داخل الصف. يمكن تخصيص عرض كل عمود وفقًا لاحتياجاتك. على سبيل المثال:

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

الشرح:

  • .col-md-4: العمود الأول يشغل 4 أعمدة من أصل 12.
  • .col-md-8: العمود الثاني يشغل 8 أعمدة من أصل 12.

فهم أهمية الـ Breakpoints لتصميم صفحات متجاوبة

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

نقاط الانهيار الأساسية:

  1. Extra small (xs): للشاشات الصغيرة جدًا (أقل من 576px).
  2. Small (sm): للشاشات الصغيرة (≥ 576px).
  3. Medium (md): للشاشات المتوسطة (≥ 768px).
  4. Large (lg): للشاشات الكبيرة (≥ 992px).
  5. Extra large (xl): للشاشات الكبيرة جدًا (≥ 1200px).
  6. XXL (xxl): للشاشات فائقة الحجم (≥ 1400px).

مثال عملي باستخدام نقاط الانهيار:

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

الشرح:

  • col-12: يشغل العمود العرض الكامل للشاشة على الأجهزة الصغيرة جدًا.
  • col-md-6: يشغل العمود نصف العرض على الأجهزة المتوسطة (مثل الأجهزة اللوحية).
  • col-lg-4: يشغل العمود ثلث العرض على الأجهزة الكبيرة.

توضيح عملي لتصميم صفحة باستخدام نظام الشبكات

مثال كامل:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>نظام الشبكات في Bootstrap</title>
</head>
<body>
    <header class="bg-dark text-white text-center py-3">
        <h1>مرحبًا بكم في Bootstrap</h1>
    </header>
    <div class="container my-5">
        <div class="row">
            <div class="col-md-4">
                <div class="p-3 bg-light border">عمود 1</div>
            </div>
            <div class="col-md-4">
                <div class="p-3 bg-light border">عمود 2</div>
            </div>
            <div class="col-md-4">
                <div class="p-3 bg-light border">عمود 3</div>
            </div>
        </div>
    </div>
</body>
</html>

أهم النصائح لاستخدام نظام الشبكات:

  1. ابدأ دائمًا بالحاوية .container أو .container-fluid.
  2. استخدم .row لتنظيم الأعمدة أفقيًا.
  3. تأكد من أن مجموع الأعمدة داخل كل صف لا يتجاوز 12.
  4. استفد من نقاط الانهيار لتخصيص الأعمدة للشاشات المختلفة.

ختام الدرس

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

اكتشاف المزيد من كود التطور

اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.

Related Posts

اترك رد

Scroll to Top