شرح صفوف ومحتوى الفقرة
يُختتم محور التخطيط المعماري في توثيق Bootstrap 5 الرسمي بفهم سلم طبقات التراكب z-index؛ إذ يعتمد الإطار مقياساً رقمياً محجوزاً يبدأ من 1000 حتى 1090 لضمان عدم اختفاء التلميحات خلف النوافذ المنبثقة أو تغطية القوائم المنسدلة للشريط العلوي الثابت:
- القوائم المنسدلة Dropdown: الطبقة
1000، والعناصر اللاصقة Sticky:1020، والثابتة Fixed:1030. - اللوحة الجانبية Offcanvas وخلفيتها:
1040و1045، والنافذة المنبثقة Modal وخلفيتها:1050و1055. - البطاقات التوضيحية Popover:
1070، والتلميحات Tooltip:1080، وإشعارات Toast في القمة:1090.
أما داخل المكوّن الواحد (مثل إبراز حقل نشط أو زر محدد)، فيستخدم بوتستراب قيماً منخفضة جداً (1 إلى 3) لئلا تتداخل أبداً مع طبقات التخطيط العليا.
<div class="grid"
style="--bs-columns: 4; --bs-gap: 0.75rem;">
<div class="g-col-1">1000 Dropdown</div>
<div class="g-col-1">1030 Fixed</div>
<div class="g-col-1">1055 Modal</div>
<div class="g-col-1">1090 Toast</div>
</div>يلخص الجدول المرجعي التالي كافة أدوات نظام CSS Grid وسلم طبقات التخطيط في Bootstrap 5.3:
| الأداة أو المتغير | النطاق والقيمة الافتراضية | الوظيفة المعمارية في التخطيط |
|---|---|---|
.grid | يتطلب $enable-cssgrid: true | إنشاء حاوية CSS Grid من 12 مساراً بفجوة حقيقية بدون هوامش سالبة |
.g-col-{bp}-{1..12} | الافتراضي بدون كلاس = 12 | تحديد عدد المسارات التي يمتد عبرها العنصر عند نقطة التوقف المحددة |
.g-start-{bp}-{1..11} | ترقيم يبدأ من 1 | تثبيت بداية العنصر عند خط مسار عمودي صريح داخل الشبكة |
--bs-columns | الافتراضي: 12 | تخصيص إجمالي عدد أعمدة الشبكة محلياً لأي حاوية .grid |
--bs-gap | الافتراضي: 1.5rem | تعديل المسافة الفاصلة الأفقية والرأسية معاً عبر خاصية gap |
سلم z-index | من 1000 إلى 1090 | تنظيم تراكب القوائم والأشرطة الثابتة والنوافذ المنبثقة والتلميحات والإشعارات |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس ختام وحدة التخطيط في بوتستراب 5 بالتعرف على نظام CSS Grid الاختياري وكلاسات .grid و.g-col-* و.g-start-* ومتغيرات --bs-columns و--bs-gap وسلم طبقات z-index القياسي من 1000 إلى 1090. الخطوة التالية: انتقل الآن إلى الوحدة الثالثة مع درس «تنسيق النصوص والعناوين Typography» لإتقان العناوين القياسية والبارزة والفقرات الاستهلالية والاقتباسات.