إطار Bootstrap 5

التداخل والشبكات المعقدة

13 دقيقة الدرس 6 من 40

التداخل والشبكات المعقدة

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

1. تداخل الشبكة الأساسي

لتداخل المحتوى الخاص بك، أضف .row جديدًا ومجموعة من أعمدة .col-* داخل عمود .col-* موجود:

<!-- شبكة متداخلة أساسية -->
<div class="container">
    <div class="row">
        <div class="col-12">
            <h3>الصف الأبوي</h3>
            <!-- الصف المتداخل يبدأ شبكة جديدة من 12 عمودًا -->
            <div class="row">
                <div class="col-6">
                    العمود المتداخل 1 (50% من الأب)
                </div>
                <div class="col-6">
                    العمود المتداخل 2 (50% من الأب)
                </div>
            </div>
        </div>
    </div>
</div>

<!-- تداخل متعدد المستويات -->
<div class="row">
    <div class="col-md-8">
        <h4>المحتوى الرئيسي</h4>
        <div class="row">
            <div class="col-md-6">
                المقالة 1
                <div class="row">
                    <div class="col-6">بيانات وصفية 1</div>
                    <div class="col-6">بيانات وصفية 2</div>
                </div>
            </div>
            <div class="col-md-6">المقالة 2</div>
        </div>
    </div>
    <div class="col-md-4">
        <h4>الشريط الجانبي</h4>
    </div>
</div>
        

مفهوم أساسي: كل .row متداخل ينشئ شبكة جديدة من 12 عمودًا بالنسبة لعموده الأبوي. col-6 داخل عمود col-6 الأبوي يأخذ 50% من ذلك الأب (وهو 25% من الحاوية الأصلية).

2. التداخل مع نقاط توقف مختلفة

ادمج التداخل مع نقاط التوقف المتجاوبة لأقصى قدر من المرونة:

<div class="container">
    <div class="row">
        <!-- الشريط الجانبي: عرض كامل على الهاتف، 1/3 على سطح المكتب -->
        <div class="col-12 col-lg-4">
            <h3>الشريط الجانبي</h3>
            <!-- شبكة متداخلة لأدوات الشريط الجانبي -->
            <div class="row g-3">
                <div class="col-6 col-lg-12">
                    <!-- عمودان على الهاتف، عمود واحد على الشاشات الكبيرة -->
                    <div class="card">
                        <div class="card-body">الأداة 1</div>
                    </div>
                </div>
                <div class="col-6 col-lg-12">
                    <div class="card">
                        <div class="card-body">الأداة 2</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- المحتوى الرئيسي: عرض كامل على الهاتف، 2/3 على سطح المكتب -->
        <div class="col-12 col-lg-8">
            <h3>المحتوى الرئيسي</h3>
            <!-- شبكة متداخلة لتخطيط المقالة -->
            <div class="row g-4">
                <div class="col-12">
                    <h4>المقالة المميزة</h4>
                    <div class="row">
                        <div class="col-md-4">
                            <img src="featured.jpg" class="img-fluid" alt="مميزة">
                        </div>
                        <div class="col-md-8">
                            <p>مقتطف من المقالة...</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <h5>المقالة 2</h5>
                </div>
                <div class="col-md-6">
                    <h5>المقالة 3</h5>
                </div>
            </div>
        </div>
    </div>
</div>
        

نصيحة: عند التداخل، ضع في اعتبارك كيف يتم تكديس التخطيط على الهاتف. في كثير من الأحيان، يجب أن تكون الأعمدة المتداخلة بعرض كامل (col-12) على الهاتف ومقسمة على الشاشات الأكبر.

3. تخطيط لوحة تحكم معقدة

أنشئ لوحة تحكم احترافية مع شبكات متداخلة ونقاط توقف مختلطة:

<div class="container-fluid">
    <!-- الرأس -->
    <div class="row bg-dark text-white py-3 mb-4">
        <div class="col">
            <h1>لوحة التحكم</h1>
        </div>
    </div>

    <div class="row">
        <!-- الشريط الجانبي الأيسر -->
        <div class="col-md-3 col-lg-2">
            <nav class="nav flex-column">
                <a class="nav-link" href="#">نظرة عامة</a>
                <a class="nav-link" href="#">التحليلات</a>
                <a class="nav-link" href="#">التقارير</a>
            </nav>
        </div>

        <!-- منطقة المحتوى الرئيسية -->
        <div class="col-md-9 col-lg-10">
            <!-- بطاقات الإحصائيات -->
            <div class="row g-3 mb-4">
                <div class="col-sm-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-subtitle text-muted">إجمالي المستخدمين</h6>
                            <h2 class="card-title">12,543</h2>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-subtitle text-muted">الإيرادات</h6>
                            <h2 class="card-title">$45,890</h2>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-subtitle text-muted">الطلبات</h6>
                            <h2 class="card-title">892</h2>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-subtitle text-muted">النمو</h6>
                            <h2 class="card-title">+23%</h2>
                        </div>
                    </div>
                </div>
            </div>

            <!-- الرسوم البيانية والجداول -->
            <div class="row g-4">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">نظرة عامة على المبيعات</h5>
                            <!-- الرسم البياني سيكون هنا -->
                            <div style="height: 300px; background: #f0f0f0;">رسم بياني</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">النشاط الأخير</h5>
                            <!-- تخطيط قائمة متداخلة -->
                            <div class="row g-2">
                                <div class="col-12">
                                    <div class="d-flex">
                                        <div class="flex-shrink-0">
                                            <span class="badge bg-success">+</span>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <small>مستخدم جديد مسجل</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="d-flex">
                                        <div class="flex-shrink-0">
                                            <span class="badge bg-primary">$</span>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <small>تم استلام الدفع</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
        

4. شبكة منتجات التجارة الإلكترونية

أنشئ قائمة منتجات معقدة مع مرشحات متداخلة وبطاقات منتجات:

<div class="container">
    <div class="row">
        <!-- الشريط الجانبي للمرشحات -->
        <div class="col-lg-3">
            <h4>المرشحات</h4>
            <!-- مجموعات مرشحات متداخلة -->
            <div class="row g-3">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h6>الفئة</h6>
                            <!-- خيارات الفئة -->
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h6>نطاق السعر</h6>
                            <!-- مرشح السعر -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- شبكة المنتجات -->
        <div class="col-lg-9">
            <div class="row g-4">
                <!-- كل بطاقة منتج -->
                <div class="col-sm-6 col-md-4">
                    <div class="card h-100">
                        <img src="product1.jpg" class="card-img-top" alt="منتج">
                        <div class="card-body">
                            <h5 class="card-title">اسم المنتج</h5>
                            <!-- صف متداخل لمعلومات المنتج -->
                            <div class="row align-items-center">
                                <div class="col-6">
                                    <span class="h5 mb-0">$29.99</span>
                                </div>
                                <div class="col-6 text-end">
                                    <div class="text-warning">★★★★☆</div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <!-- صف متداخل للأزرار -->
                            <div class="row g-2">
                                <div class="col-6">
                                    <button class="btn btn-primary w-100">شراء</button>
                                </div>
                                <div class="col-6">
                                    <button class="btn btn-outline-secondary w-100">السلة</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- كرر للمزيد من المنتجات -->
            </div>
        </div>
    </div>
</div>
        

5. تخطيط منشور المدونة

أنشئ تخطيط منشور مدونة متطور مع مناطق محتوى متداخلة:

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <article>
                <!-- رأس المقالة -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h1>عنوان المقالة</h1>
                        <!-- معلومات وصفية متداخلة -->
                        <div class="row align-items-center text-muted">
                            <div class="col-sm-auto">
                                <img src="avatar.jpg" class="rounded-circle" width="40" alt="المؤلف">
                            </div>
                            <div class="col-sm">
                                <div>بواسطة أحمد محمد</div>
                                <small>نُشر في 15 يناير 2024</small>
                            </div>
                            <div class="col-sm-auto">
                                <span>5 دقائق قراءة</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- الصورة المميزة -->
                <div class="row mb-4">
                    <div class="col-12">
                        <img src="featured.jpg" class="img-fluid rounded" alt="مميزة">
                    </div>
                </div>

                <!-- محتوى المقالة -->
                <div class="row">
                    <div class="col-lg-8">
                        <p>محتوى المقالة هنا...</p>

                        <!-- اقتباس متداخل -->
                        <div class="row my-4">
                            <div class="col-md-10 offset-md-1">
                                <blockquote class="blockquote">
                                    <p>"هذا اقتباس مهم من المقالة."</p>
                                </blockquote>
                            </div>
                        </div>

                        <!-- معرض صور متداخل -->
                        <div class="row g-3 my-4">
                            <div class="col-6">
                                <img src="gallery1.jpg" class="img-fluid rounded" alt="معرض">
                            </div>
                            <div class="col-6">
                                <img src="gallery2.jpg" class="img-fluid rounded" alt="معرض">
                            </div>
                        </div>

                        <p>المزيد من محتوى المقالة...</p>
                    </div>

                    <!-- الشريط الجانبي -->
                    <div class="col-lg-4">
                        <div class="sticky-top" style="top: 20px;">
                            <!-- جدول المحتويات -->
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h6>جدول المحتويات</h6>
                                    <nav class="nav flex-column">
                                        <a class="nav-link" href="#section1">مقدمة</a>
                                        <a class="nav-link" href="#section2">المحتوى الرئيسي</a>
                                        <a class="nav-link" href="#section3">الخاتمة</a>
                                    </nav>
                                </div>
                            </div>

                            <!-- المقالات ذات الصلة -->
                            <div class="card">
                                <div class="card-body">
                                    <h6>مقالات ذات صلة</h6>
                                    <!-- قائمة مقالات متداخلة -->
                                    <div class="row g-2">
                                        <div class="col-12">
                                            <div class="row g-2">
                                                <div class="col-4">
                                                    <img src="thumb1.jpg" class="img-fluid rounded" alt="مصغرة">
                                                </div>
                                                <div class="col-8">
                                                    <small><a href="#">مقالة ذات صلة 1</a></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </div>
</div>
        

6. أنماط التخطيط الشائعة

إليك أنماط مجربة لتداخل الشبكات بشكل فعال:

<!-- النمط 1: تخطيط Holy Grail -->
<div class="container-fluid">
    <header class="row"><div class="col">الرأس</div></header>
    <div class="row flex-grow-1">
        <nav class="col-md-2">الشريط الجانبي الأيسر</nav>
        <main class="col-md-8">
            <div class="row">
                <!-- شبكة محتوى متداخلة -->
            </div>
        </main>
        <aside class="col-md-2">الشريط الجانبي الأيمن</aside>
    </div>
    <footer class="row"><div class="col">التذييل</div></footer>
</div>

<!-- النمط 2: تخطيط المجلة -->
<div class="container">
    <div class="row">
        <div class="col-12 col-lg-8">
            <!-- القصة المميزة (كبيرة) -->
            <div class="row mb-4">
                <div class="col-12">مميز</div>
            </div>
            <!-- شبكة من القصص الأصغر -->
            <div class="row g-3">
                <div class="col-6">قصة</div>
                <div class="col-6">قصة</div>
            </div>
        </div>
        <div class="col-12 col-lg-4">
            <!-- الشريط الجانبي مع الأدوات -->
            <div class="row g-3">
                <div class="col-12">أداة</div>
            </div>
        </div>
    </div>
</div>

<!-- النمط 3: تراص البطاقات -->
<div class="row g-4">
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <div class="row g-2">
                    <!-- شبكة متداخلة داخل البطاقة -->
                    <div class="col-12">العنوان</div>
                    <div class="col-6">معلومات 1</div>
                    <div class="col-6">معلومات 2</div>
                </div>
            </div>
        </div>
    </div>
</div>
        

تجنب أخطاء التداخل الشائعة:

لا تدخل الصفوف مباشرة داخل الصفوف - ضع دائمًا عمودًا بينها
لا تنس إضافة .row عند التداخل - بدونها، لن تتماشى الأعمدة بشكل صحيح
تجنب التداخل المفرط (أكثر من 3-4 مستويات) - يصبح من الصعب صيانته
تذكر أن الفراغات تعيد الضبط مع كل صف جديد - اضبط إذا لزم الأمر

تمرين عملي

أنشئ صفحة هبوط كاملة بهذه الأقسام المتداخلة:

قسم البطل: عرض كامل مع محتوى متوسط يحتوي على:
- عنوان
- عنوان فرعي
- زران جنبًا إلى جنب
قسم الميزات: ثلاث بطاقات ميزات، كل منها يحتوي على:
- أيقونة (استخدم عنصر نائب)
- عنوان ووصف
- شبكة متداخلة تعرض ميزتين فرعيتين لكل بطاقة
قسم التسعير: ثلاث مستويات تسعير، كل منها مع:
- السعر واسم الخطة
- قائمة متداخلة من الميزات (تخطيط من عمودين)
- زر دعوة لاتخاذ إجراء
الشهادات: شبكة من عمودين على سطح المكتب، عمود واحد على الهاتف، كل شهادة تعرض:
- نص الاقتباس
- صف متداخل مع الصورة الرمزية ومعلومات المؤلف جنبًا إلى جنب

اجعله متجاوبًا بالكامل: عمود واحد على الهاتف، عمودان على الجهاز اللوحي، 3 أعمدة على سطح المكتب لأقسام الميزات والتسعير.

أفضل الممارسات للشبكات المعقدة:

ابدأ ببنية التخطيط الإجمالية، ثم أضف التفاصيل المتداخلة
استخدم فئات g-* على الصفوف المتداخلة للتحكم في التباعد بشكل مستقل
اختبر كل مستوى تداخل على الهاتف قبل إضافة المستوى التالي
استخدم أدوات المطور في المتصفح لفحص وتصحيح بنى الشبكة
ضع في اعتبارك استخدام CSS Grid للتخطيطات المعقدة جدًا (Bootstrap 5 يدعم كليهما)
وثق البنى المتداخلة المعقدة بالتعليقات في الكود الخاص بك