شرح صفوف ومحتوى الفقرة
اعتمد على مصفوفة أبعاد الحاويات الرسمية في Bootstrap 5.3 أدناه للمفاضلة الدقيقة بين الحاوية المتدرجة والحاويات المرحلية والحاوية المرنة عبر الشاشات الست:
| كلاس الحاوية | xs (<576px) | sm (>=576px) | md (>=768px) | lg (>=992px) | xl (>=1200px) | xxl (>=1400px) |
|---|---|---|---|---|---|---|
.container | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس منظومة الحاويات في Bootstrap 5.3: الحاوية المتدرجة .container بأبعادها من 540px حتى 1320px، والحاوية المرنة .container-fluid، والحاويات المرحلية .container-{bp}، وآلية الحشو الأفقي المدمج 0.75rem. الخطوة التالية: انتقل الآن إلى الدرس السابع «نظام الشبكة Grid System في بوتستراب 5» لبناء التخطيطات متعددة الأعمدة داخل الحاويات!