انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: الحاويات في بوتستراب 5

Full Width Fluid Container الحاوية المرنة الكاملة

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

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

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

عند تصميم أشرطة التنقل العلوية العريضة أو لوحات الإدارة الكثيفة أو واجهات الخرائط التي تحتاج لاستغلال كامل عرض النافذة على جميع الأجهزة دون هوامش جانبية فارغة، استخدم الحاوية المرنة الكاملة .container-fluid؛ فهي تحافظ على width: 100% باستمرار من xs وحتى xxl.

الصف 2 كود برمجي
HTML 
<div class="container c-box">
  Bounded .container (max-width capped)
</div>
<div class="container-fluid c-fluid-box">
  Full-span .container-fluid (always 100% width)
</div>
جرّب بنفسك

جميع فقرات هذا الدرس (الحاويات في بوتستراب 5)