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

Default Fixed Container الحاوية المتدرجة container

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

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

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

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

  • عند sm (>= 576px) يصبح أقصى عرض 540px.
  • عند md (>= 768px) يصبح أقصى عرض 720px.
  • عند lg (>= 992px) يصبح أقصى عرض 960px.
  • عند xl (>= 1200px) يصبح أقصى عرض 1140px.
  • عند xxl (>= 1400px) يصبح أقصى عرض 1320px.
الصف 2 كود برمجي
HTML 
<div class="container c-box">
  <h2>Default .container</h2>
  <p id="cWidth">Measuring width...</p>
</div>
<script>
  const el = document.querySelector('.container');
  cWidth.textContent = 'Width: ' + el.offsetWidth + 'px';
</script>
جرّب بنفسك
الصف 3 ملاحظة هامة

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