في هذا الدرس 8تصفّح المواضيع
يرتكز تخطيط الصفحات في Bootstrap 5 على نظام شبكة مرن مبني بالكامل بتقنية Flexbox ومقسَّم منطقياً إلى 12 عموداً متساوياً عبر عرض الحاوية. لم يُختر الرقم 12 مصادفة؛ فهو يقبل القسمة بدون باقٍ على 1 و2 و3 و4 و6 و12، ما يتيح لك تقسيم أي صف فوراً إلى عمودين متساويين (6 + 6)، أو ثلاثة أعمدة (4 + 4 + 4)، أو أربعة أعمدة (3 + 3 + 3 + 3)، أو تخطيط غير متماثل مثل محتوى رئيسي وشريط جانبي (8 + 4).
يعتمد النظام فلسفة الهاتف أولاً عبر ست طبقات قياسية تبدأ من الشاشات الصغيرة جداً بلا لاحقة ثم sm وmd وlg وxl وصولاً إلى xxl، بحيث يسري كلاس العرض الأصغر صعوداً على الشاشات الأكبر ما لم يُستبدل بكلاس أعلى.
يعمل نظام الشبكة وفق عقد هيكلي صارم من ثلاثة مستويات متتالية لا يجوز كسرها: تبدأ بوضع حاوية خارجية مثل .container أو .container-fluid لضبط المحاذاة والحشو الأفقي، ثم تضع بداخلها عنصر صف .row يعمل كغلاف مرن للأعمدة، وأخيراً تضع الأعمدة .col-* كأبناء مباشرين للصف فقط.
القاعدة الذهبية في Bootstrap 5 هي أن المحتوى الفعلي يوضع حصراً داخل الأعمدة، ولا يجوز وضع نصوص أو مكونات مباشرة داخل .row دون عمود يحتضنها حتى لا تختل حسابات الحشو والهوامش الجانبية.
عندما تحتاج إلى تقسيم الصف بالتساوي دون الانشغال بحساب الأرقام، استخدم الكلاس المجرد .col على كل عمود. يمنح بوتستراب كل عنصر يحمل .col قاعدة flex: 1 0 0%، فيتقاسم الأبناء عرض الصف بنسبة متطابقة تماماً: عمودان يأخذ كل منهما 50%، وثلاثة أعمدة يأخذ كل منها 33.33%، وحتى خمسة أعمدة تتوزع بنسبة 20% لكل عمود (وهو أمر لم يكن ممكناً بالقسمة الرقمية على 12 بمفردها!).
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">2 of 3</div>
<div class="col">3 of 3</div>
</div>لتخصيص نسب عرض دقيقة ومحددة مسبقاً من أصل 12 وحدة، استخدم الكلاسات الرقمية .col-1 حتى .col-12، حيث يساوي كل رقم واحداً من اثني عشر جزءاً من عرض الصف (نحو 8.333% للوحدة الواحدة). كما يمكنك دمج عمود رقمي محدد مثل .col-6 في المنتصف مع عمودين مرنين بكلاس .col على الجانبين ليتقاسما المساحة المتبقية تلقائياً.
<div class="row">
<div class="col-8">Main (col-8)</div>
<div class="col-4">Sidebar (col-4)</div>
</div>
<div class="row">
<div class="col">Auto</div>
<div class="col-6">Fixed Center (col-6)</div>
<div class="col">Auto</div>
</div>في كثير من مكونات الواجهة مثل شارات الحالة أو أزرار الإجراءات أو التواريخ القصيرة، لا نريد للعمود أن يحجز نسبة مئوية ثابتة من الشاشة بل أن ينكمش أو يتمدد على قدر محتواه النصي بالضبط. يحقق الكلاس .col-auto (ونظائره المتجاوبة مثل .col-md-auto) هذا السلوك المثالي ليمنح العمود عرض محتواه الطبيعي تاركاً بقية عرض الصف للأعمدة المجاورة.
تظهر القوة الحقيقية لشبكة Bootstrap 5 عند دمج عدة كلاسات متجاوبة على العمود الواحد لبناء واجهات تتشكل بذكاء عبر الأجهزة. فعند كتابة class="col-12 col-sm-6 col-lg-4" على بطاقة منتج، ستمتد البطاقة بعرض الشاشة الكامل (12 عموداً) على الهواتف، وتتحول إلى عمودين في السطر (6 أعمدة لكل بطاقة) بدءاً من نقطة التوقف sm، ثم تستقر على ثلاث بطاقات في السطر (4 أعمدة لكل بطاقة) على الشاشات الكبيرة lg فما فوق.
اختبر أنماط الشبكة الأربعة عملياً في المختبر الحي التالي:
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">Item 1</div>
<div class="col-12 col-sm-6 col-lg-4">Item 2</div>
<div class="col-12 col-sm-12 col-lg-4">Item 3</div>
</div>
</div>بدلاً من تكرار الكلاسات الطويلة على عشرات البطاقات المتماثلة، يوفر Bootstrap 5 اختصاراً معمارياً رشيقاً عبر كلاسات .row-cols-1 حتى .row-cols-6 (إضافة إلى .row-cols-auto والطبقات المتجاوبة مثل .row-cols-md-3) وتوضع مباشرة على عنصر الصف .row الأب لتحديد عدد الأعمدة المرغوب ظهورها في كل سطر، بينما تكتفي العناصر الأبناء بكلاس .col البسيط.
عندما يتطلب التصميم تقسيم أحد الأعمدة الرئيسية إلى أعمدة فرعية أصغر بداخله، يمكنك تداخل الشبكات ببساطة عبر إدراج عنصر .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.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 12-Column Grid نظام الشبكة ذو 12 عموداً
- نظام تخطيط مرن في بوتستراب يقسّم كل صف .row إلى اثنتي عشرة وحدة أفقية متناسبة عبر ست نقاط توقف متجاوبة.
- للمراجعة
- 02 Auto-Layout Column العمود المتساوي التلقائي
- عمود يحمل كلاس .col بدون رقم ويستخدم flex: 1 0 0% ليتقاسم المساحة المتبقية في الصف بالتساوي.
- للمراجعة
- 03 Intrinsic Content Column عمود المحتوى المتكيف
- عمود يحمل كلاس .col-auto ينكمش أو يتمدد على قدر عرض محتواه الفعلي فقط دون التمدد العشوائي.
- للمراجعة
- 04 Row Columns Shortcut اختصار أعمدة الصف
- كلاسات .row-cols-* توضع على عنصر الصف الأب لتحديد عدد الأعمدة في كل سطر دون تكرار الكلاسات على الأبناء.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- أوراق الأنماط المتتالية — تشغّل قواعد الصندوق المرن والنسب المئوية واستعلامات الوسائط الخاصة بشبكة بوتستراب.
- للمراجعة
- 02 UI UI
- User Interface
- واجهة المستخدم — تُنظَّم عناصرها بمرونة عالية عبر الجوال والتابلت وسطح المكتب بفضل نسب الشبكة الاثنتي عشرة.
- للمراجعة
- 03 DOM DOM
- Document Object Model
- نموذج كائن المستند — يتطلب التزام تسلسل الأب والابن بين الحاوية والصف والعمود لضمان انضباط الهوامش والمحاذاة.
- للمراجعة
- 04 RWD RWD
- Responsive Web Design
- تصميم الويب المتجاوب — يُطبَّق بمنهج الهاتف أولاً عبر تكديس الأعمدة على الشاشات الصغيرة وتوزيعها أفقياً عند نقاط التوقف الأكبر.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
داخل .container و.row، أنشئ ثلاثة أعمدة تأخذ العرض الكامل .col-12 على الهاتف، وعمودين في السطر .col-sm-6 على الأجهزة الصغيرة، وثلاثة أعمدة .col-lg-4 على الشاشات الكبيرة.
-
أنشئ صفاً .row يضم في وسطه عمود .col-auto محاطاً بعمودين مرنين بكلاس .col، ثم أضف صفاً ثانياً يستخدم .row-cols-2 و.row-cols-md-4 مع أربعة عناصر .col.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.