انتقل إلى محتوى الدرس

Role of Layout Containers وظيفة الحاويات بالتخطيط

أتقن حاويات التخطيط في Bootstrap 5.3: الحاوية المتدرجة .container والحاوية المرنة .container-fluid والحاويات المرحلية .container-{bp} وآلية الحشو الأفقي والتوسيط التلقائي.
3 صفوف تعليمية
بوتستراب 5
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تُمثّل الحاويات حجر الأساس الأول للتخطيط الهندسي في Bootstrap 5؛ فقبل إنشاء أي صفوف أو أعمدة شبكية نضع المحتوى داخل حاوية لتحقيق ثلاث وظائف جوهرية لا غنى عنها:

  • ضبط طول السطر المريح للقراءة: تقييد أقصى عرض للمحتوى على الشاشات المكتبية الكبيرة حتى لا تمتد الأسطر النصية بعرض مرهق للعين.
  • التوسيط الأفقي التلقائي: تطبيق الهوامش الجانبية التلقائية margin-inline: auto لتستقر كتلة المحتوى في منتصف الشاشة بتوازن تام.
  • حماية المحتوى من الالتصاق بالحواف: توفير حشو أفقي مدمج يمنع التصاق الحروف بحافة شاشة الهاتف الزجاجية.
الصف 2 صورة توضيحية
مقارنة هندسية بين أنواع الحاويات الثلاثة في Bootstrap 5.3: المتدرجة .container والمرحلية .container-{bp} والمرنة الكاملة .container-fluid
الصف 3 ملاحظة هامة