شرح صفوف ومحتوى الفقرة
عندما يتطلب التصميم تقسيم أحد الأعمدة الرئيسية إلى أعمدة فرعية أصغر بداخله، يمكنك تداخل الشبكات ببساطة عبر إدراج عنصر .row جديد مباشرة داخل أي عمود .col-* ثم وضع أعمدة فرعية يبلغ مجموعها 12 وحدة جديدة منسوبة لعرض العمود الأب وليس لعرض الشاشة الكلية، ودون إضافة .container داخلي مرة أخرى.
<div class="row">
<div class="col-sm-8">
Level 1: .col-sm-8
<div class="row">
<div class="col-6">Nested .col-6</div>
<div class="col-6">Nested .col-6</div>
</div>
</div>
<div class="col-sm-4">Level 1: .col-sm-4</div>
</div>يلخص الجدول المرجعي التالي البنية الكاملة لكلاسات نظام الشبكة الأساسي في Bootstrap 5.3:
| الكلاس الشبكي | المستوى في الهرمية | السلوك الهندسي في التخطيط |
|---|---|---|
.row | ابن داخل الحاوية | حاوية Flexbox تلتف تلقائياً وتلغي حشو الحاوية بهوامش أفقية سالبة |
.col | ابن مباشر للصف | عمود مرن يتقاسم المساحة المتاحة بالتساوي مع أقرانه في نفس الصف |
.col-1 إلى .col-12 | ابن مباشر للصف | حجز نسبة مئوية ثابتة تعادل من 1/12 إلى 12/12 من عرض الصف |
.col-auto | ابن مباشر للصف | تحجيم عرض العمود تلقائياً ليتطابق مع العرض الطبيعي لمحتواه الداخلي |
.col-{bp}-* | ابن مباشر للصف | تفعيل عرض العمود ابتداءً من نقطة التوقف المحددة (sm حتى xxl) |
.row-cols-{1..6} | يُضاف إلى .row | ضبط عدد الأعمدة المتساوية في السطر الواحد مباشرة من الصف الأب |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرفت في هذا الدرس على نظام الشبكة ذي 12 عموداً في بوتستراب 5، وتسلسل الحاوية والصف والعمود، والفرق بين .col المتساوي والأعمدة الرقمية و.col-auto المتكيف، وبناء الشبكات المتجاوبة متعددة الطبقات و.row-cols والشبكات المتداخلة. الخطوة التالية: انتقل الآن إلى درس «أعمدة الشبكة والمحاذاة والترتيب» لإتقان المحاذاة الرأسية والأفقية وإعادة ترتيب الأعمدة وإزاحتها بكلاس offset.