إطار Bootstrap 5

مقدمة في نظام الشبكة Bootstrap

12 دقيقة الدرس 3 من 40

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

فهم شبكة 12 عمود

يستخدم Bootstrap نظام شبكة سائل متجاوب يعطي الأولوية للهاتف المحمول ويتوسع إلى 12 عمودًا مع زيادة حجم الجهاز أو منفذ العرض. يوفر نظام 12 عمود هذا مرونة هائلة في إنشاء التخطيطات.

لماذا 12 عمود؟ الرقم 12 قابل للقسمة بشكل كبير (1، 2، 3، 4، 6، 12)، مما يجعله مثاليًا لإنشاء تركيبات أعمدة مختلفة. يمكنك بسهولة إنشاء تخطيطات بـ 2 أو 3 أو 4 أو 6 أعمدة متساوية، أو أي تركيبة تصل إلى 12.

أمثلة على تقسيم 12 عمود:

عمود = عمود واحد (العرض الكامل)
+ 6      = عمودان (نصف العرض لكل منهما)
+ 4 + 4  = 3 أعمدة (ثلث العرض لكل منها)
+ 3 + 3 + 3 = 4 أعمدة (ربع العرض لكل منها)
+ 2 + 2 + 2 + 2 + 2 = 6 أعمدة (سدس العرض لكل منها)
+ 4      = عمودان (ثلثان + ثلث)
+ 3      = عمودان (ثلاثة أرباع + ربع)

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

نظام الشبكة Bootstrap لديه ثلاثة مكونات رئيسية تعمل معًا:

1. الحاوية (Container)

الحاوية هي الغلاف الخارجي الذي يحتوي على صفوفك وأعمدتك. يوفر الحشو المناسب ويمركز المحتوى الخاص بك.

<div class="container">
    <!-- الصفوف والأعمدة تذهب هنا -->
</div>

أو

<div class="container-fluid">
    <!-- صفوف وأعمدة كاملة العرض -->
</div>

2. الصف (Row)

تنشئ الصفوف مجموعات أفقية من الأعمدة. تستخدم flexbox والهوامش السلبية لمحاذاة الأعمدة بشكل صحيح.

<div class="row">
    <!-- الأعمدة تذهب هنا -->
</div>

مهم: يجب أن تكون الأعمدة أبناء مباشرين للصفوف. لا تضع الأعمدة مباشرة داخل الحاويات بدون غلاف صف، وإلا سينكسر التخطيط الخاص بك.

3. العمود (Column)

تحتوي الأعمدة على المحتوى الفعلي الخاص بك. يجب وضعها داخل الصفوف.

<div class="col">
    المحتوى هنا
</div>

أو بعرض محدد:

<div class="col-6">
    عرض 50% (6 من 12 عمود)
</div>

الهيكل الكامل للشبكة

إليك كيف تعمل هذه المكونات معًا:

<div class="container">         <!-- الغلاف -->
    <div class="row">            <!-- الصف -->
        <div class="col">        <!-- العمود 1 -->
            المحتوى 1
        </div>
        <div class="col">        <!-- العمود 2 -->
            المحتوى 2
        </div>
        <div class="col">        <!-- العمود 3 -->
            المحتوى 3
        </div>
    </div>
</div>

أنواع الحاويات بالتفصيل

يوفر Bootstrap 5 أنواعًا متعددة من الحاويات لتناسب احتياجات التخطيط المختلفة:

1. .container (عرض ثابت، متجاوب)
<div class="container"></div>

الحد الأقصى للعرض حسب نقطة التوقف:
• <576px:    100%
• ≥576px:    540px
• ≥768px:    720px
• ≥992px:    960px
• ≥1200px:   1140px
• ≥1400px:   1320px

2. .container-fluid (عرض 100% دائمًا)
<div class="container-fluid"></div>

يمتد دائمًا 100% من عرض منفذ العرض

3. .container-{breakpoint} (حاويات متجاوبة)
<div class="container-sm"></div>  <!-- 100% حتى sm -->
<div class="container-md"></div>  <!-- 100% حتى md -->
<div class="container-lg"></div>  <!-- 100% حتى lg -->
<div class="container-xl"></div>  <!-- 100% حتى xl -->
<div class="container-xxl"></div> <!-- 100% حتى xxl -->

اختيار الحاويات:
• استخدم .container لتخطيطات قياسية متمركزة
• استخدم .container-fluid لتصميمات كاملة العرض
• استخدم .container-{breakpoint} لتخطيطات هجينة (سائلة على الهاتف المحمول، ثابتة على الشاشات الأكبر)

نقاط توقف الشبكة

يوفر Bootstrap 5 ست نقاط توقف متجاوبة تحدد متى يتغير التخطيط الخاص بك:

نقاط توقف Bootstrap 5:

نقطة التوقف    بادئة الفئة    الأبعاد          الأجهزة
------------------------------------------------------------
صغير جدًا       (بدون)          <576px             الهواتف (عمودي)
صغير           sm              ≥576px             الهواتف (أفقي)
متوسط          md              ≥768px             الأجهزة اللوحية
كبير           lg              ≥992px             أجهزة اللابتوب
كبير جدًا      xl              ≥1200px            أجهزة سطح المكتب
XXL            xxl             ≥1400px            أجهزة سطح مكتب كبيرة

الأولوية للهاتف المحمول: Bootstrap يعطي الأولوية للهاتف المحمول، مما يعني أن الأنماط تنطبق على جميع أحجام الشاشة ما لم يتم تجاوزها بفئات نقاط توقف أكبر. ابدأ التصميم للهاتف المحمول، ثم أضف فئات للشاشات الأكبر.

فئات الأعمدة الأساسية

يوفر Bootstrap عدة طرق لتحديد عرض الأعمدة:

1. أعمدة العرض التلقائي

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

النتيجة: ثلاثة أعمدة متساوية العرض تقسم الصف تلقائيًا

2. أعمدة العرض الثابت

<div class="container">
    <div class="row">
        <div class="col-6">عرض 50% (6/12)</div>
        <div class="col-3">عرض 25% (3/12)</div>
        <div class="col-3">عرض 25% (3/12)</div>
    </div>
</div>

النتيجة: عروض أعمدة محددة يجب أن يصل مجموعها إلى 12

3. أعمدة مختلطة

<div class="container">
    <div class="row">
        <div class="col-8">8 أعمدة ثابتة</div>
        <div class="col">عرض تلقائي (4 المتبقية)</div>
    </div>
</div>

النتيجة: عمود ثابت + عمود عرض تلقائي يملأ المساحة المتبقية

أمثلة عملية على الشبكة

مثال 1: عمودان متساويان

<div class="container">
    <div class="row">
        <div class="col-6">
            <h3>العمود الأيسر</h3>
            <p>هذا يشغل 6 أعمدة (عرض 50%)</p>
        </div>
        <div class="col-6">
            <h3>العمود الأيمن</h3>
            <p>هذا أيضًا يشغل 6 أعمدة (عرض 50%)</p>
        </div>
    </div>
</div>

مثال 2: ثلاثة أعمدة متساوية

<div class="container">
    <div class="row">
        <div class="col-4">
            <h4>الميزة 1</h4>
            <p>عرض 33.33%</p>
        </div>
        <div class="col-4">
            <h4>الميزة 2</h4>
            <p>عرض 33.33%</p>
        </div>
        <div class="col-4">
            <h4>الميزة 3</h4>
            <p>عرض 33.33%</p>
        </div>
    </div>
</div>

مثال 3: تخطيط الشريط الجانبي (انقسام 8-4)

<div class="container">
    <div class="row">
        <div class="col-8">
            <h2>منطقة المحتوى الرئيسية</h2>
            <p>هذه هي منطقة المحتوى الأساسية التي تشغل عرض 66.67%</p>
        </div>
        <div class="col-4">
            <h3>الشريط الجانبي</h3>
            <p>هذا الشريط الجانبي يشغل عرض 33.33%</p>
        </div>
    </div>
</div>

مثال 4: أربعة أعمدة متساوية

<div class="container">
    <div class="row">
        <div class="col-3">العمود 1 (25%)</div>
        <div class="col-3">العمود 2 (25%)</div>
        <div class="col-3">العمود 3 (25%)</div>
        <div class="col-3">العمود 4 (25%)</div>
    </div>
</div>

نصيحة محترف: عند استخدام أعمدة العرض التلقائي (.col بدون رقم)، يوزع Bootstrap تلقائيًا المساحة المتاحة بالتساوي بين جميع الأعمدة في الصف.

محتوى العمود

يمكن أن تحتوي الأعمدة على أي محتوى HTML بما في ذلك النص والصور والأزرار والنماذج أو حتى الشبكات المتداخلة:

<div class="container">
    <div class="row">
        <div class="col-6">
            <img src="image.jpg" alt="عينة" class="img-fluid">
        </div>
        <div class="col-6">
            <h2>حول هذه الصورة</h2>
            <p>وصف الصورة يذهب هنا.</p>
            <button class="btn btn-primary">اعرف المزيد</button>
        </div>
    </div>
</div>

مزاريب الشبكة (التباعد)

يضيف Bootstrap تلقائيًا حشوًا أفقيًا (مزاريب) بين الأعمدة. عرض المزراب الافتراضي هو 1.5rem (24 بكسل) على كل جانب من العمود.

المزاريب الافتراضية:
<div class="row">
    <div class="col">عمود مع مزاريب افتراضية</div>
    <div class="col">عمود مع مزاريب افتراضية</div>
</div>

بدون مزاريب:
<div class="row g-0">
    <div class="col">عمود بدون مزاريب</div>
    <div class="col">عمود بدون مزاريب</div>
</div>

أحجام مزاريب مخصصة:
<div class="row g-2">مزاريب صغيرة</div>
<div class="row g-3">مزاريب متوسطة</div>
<div class="row g-5">مزاريب كبيرة</div>

مثال شبكة بصري

إليك مثال كامل يوضح كيف تعمل تركيبات الأعمدة المختلفة:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عرض توضيحي لشبكة Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <style>
        .demo-col {
            background-color: #e3f2fd;
            border: 2px solid #2196f3;
            padding: 15px;
            margin-bottom: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container my-5">
        <h2>أمثلة على شبكة 12 عمود</h2>

        <!-- عمود واحد (عرض كامل) -->
        <div class="row">
            <div class="col-12 demo-col">col-12</div>
        </div>

        <!-- عمودان -->
        <div class="row">
            <div class="col-6 demo-col">col-6</div>
            <div class="col-6 demo-col">col-6</div>
        </div>

        <!-- ثلاثة أعمدة -->
        <div class="row">
            <div class="col-4 demo-col">col-4</div>
            <div class="col-4 demo-col">col-4</div>
            <div class="col-4 demo-col">col-4</div>
        </div>

        <!-- أربعة أعمدة -->
        <div class="row">
            <div class="col-3 demo-col">col-3</div>
            <div class="col-3 demo-col">col-3</div>
            <div class="col-3 demo-col">col-3</div>
            <div class="col-3 demo-col">col-3</div>
        </div>

        <!-- أعمدة مختلطة -->
        <div class="row">
            <div class="col-8 demo-col">col-8</div>
            <div class="col-4 demo-col">col-4</div>
        </div>
    </div>
</body>
</html>

تمرين تطبيقي:

أنشئ ملف HTML جديد باسم grid-basics.html
قم بتضمين Bootstrap 5 CSS من CDN
أنشئ حاوية مع التخطيطات التالية:
- صف واحد بعرض كامل
- عمودان متساويان (50/50)
- ثلاثة أعمدة متساوية (33.33/33.33/33.33)
- تخطيط شريط جانبي مع 75% محتوى رئيسي و25% شريط جانبي
أضف خلفيات ملونة لتصور الأعمدة
أضف بعض المحتوى النموذجي (عناوين، فقرات، صور) إلى كل عمود

تحدي: أنشئ عرضًا لمنتج بـ 4 أعمدة متساوية العرض، يحتوي كل منها على صورة منتج وعنوان ووصف وزر "اشتر الآن"!

أخطاء الشبكة الشائعة التي يجب تجنبها

1. أعمدة تتجاوز 12
إذا كان مجموع أرقام الأعمدة أكثر من 12، فإن الأعمدة الإضافية ستلتف إلى سطر جديد.

<div class="col-8"></div><div class="col-8"></div>
النتيجة: العمود الثاني يلتف أسفل (المجموع = 16، يتجاوز 12)

2. نسيان الصف
قم دائمًا بلف الأعمدة في div .row. بدونه، لن تتماشى الأعمدة بشكل صحيح.

3. التداخل بدون هيكل مناسب
عند تداخل الشبكات، تذكر: صف ← عمود ← صف ← عمود

الملخص

في هذا الدرس، تعلمت:

يستخدم Bootstrap نظام شبكة 12 عمود لتخطيطات مرنة
الشبكة لها ثلاثة مكونات: حاوية ← صف ← عمود
يوفر Bootstrap 5 ست نقاط توقف متجاوبة (xs، sm، md، lg، xl، xxl)
يمكن أن تكون الحاويات ذات عرض ثابت (.container)، سائلة (.container-fluid)، أو متجاوبة (.container-{breakpoint})
يمكن أن تكون الأعمدة عرض تلقائي (.col)، عرض ثابت (.col-6)، أو مختلطة
يجب أن يصل مجموع أرقام الأعمدة إلى 12 أو أقل لكل صف
توفر المزاريب التباعد بين الأعمدة (قابلة للتخصيص مع فئات .g-*)

في الدرس التالي، سنستكشف تخطيطات الشبكة المتجاوبة ونتعلم كيفية إنشاء تخطيطات تتكيف بشكل جميل مع أحجام الشاشات المختلفة!