في هذا الدرس 6تصفّح المواضيع
تُمثّل الحاويات حجر الأساس الأول للتخطيط الهندسي في Bootstrap 5؛ فقبل إنشاء أي صفوف أو أعمدة شبكية نضع المحتوى داخل حاوية لتحقيق ثلاث وظائف جوهرية لا غنى عنها:
- ضبط طول السطر المريح للقراءة: تقييد أقصى عرض للمحتوى على الشاشات المكتبية الكبيرة حتى لا تمتد الأسطر النصية بعرض مرهق للعين.
- التوسيط الأفقي التلقائي: تطبيق الهوامش الجانبية التلقائية
margin-inline: autoلتستقر كتلة المحتوى في منتصف الشاشة بتوازن تام. - حماية المحتوى من الالتصاق بالحواف: توفير حشو أفقي مدمج يمنع التصاق الحروف بحافة شاشة الهاتف الزجاجية.
يُنشئ الكلاس الافتراضي .container حاوية متدرجة ذات عرض أقصى ثابت يتغير عند كل نقطة توقف؛ فهي تمتد بعرض 100% على شاشات الهاتف الصغيرة الأقل من 576px، ثم تقفز قيمة max-width بانتظام مع اتساع الشاشة:
- عند
sm (>= 576px)يصبح أقصى عرض540px. - عند
md (>= 768px)يصبح أقصى عرض720px. - عند
lg (>= 992px)يصبح أقصى عرض960px. - عند
xl (>= 1200px)يصبح أقصى عرض1140px. - عند
xxl (>= 1400px)يصبح أقصى عرض1320px.
<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>عند تصميم أشرطة التنقل العلوية العريضة أو لوحات الإدارة الكثيفة أو واجهات الخرائط التي تحتاج لاستغلال كامل عرض النافذة على جميع الأجهزة دون هوامش جانبية فارغة، استخدم الحاوية المرنة الكاملة .container-fluid؛ فهي تحافظ على width: 100% باستمرار من xs وحتى xxl.
<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>ماذا لو أردت أن تظل الحاوية ممتدة بعرض كامل 100% ليس على الهواتف فحسب، بل على الأجهزة اللوحية md أيضاً، ولا تبدأ بالتوسيط وتقييد العرض إلا بدءاً من شاشات المحمول lg عند 992px فأكثر؟ هنا تتألق الحاويات المتجاوبة المرحلية (.container-md و .container-lg و .container-xl و .container-xxl) دون كتابة سطر استعلام وسائط واحد!
القاعدة الذهبية للحفظ: الكلاس .container-{bp} يعمل بعرض 100% تحت نقطة التوقف المذكورة في اسمه، ويتحول إلى حاوية مقيدة العرض ومتمركزة بدءاً من تلك النقطة فصاعداً.
<div class="container-md c-box">
.container-md: 100% below 768px, 720px+ from md up
</div>
<div class="container-lg c-box">
.container-lg: 100% below 992px, 960px+ from lg up
</div>
<div class="container-xl c-box">
.container-xl: 100% below 1200px, 1140px+ from xl up
</div>كيف يحمي بوتستراب النصوص من الالتصاق بحواف شاشة الهاتف عندما يكون عرض الحاوية 100%؟ تُعرّف كل حاوية متغير التنسيق المحلي --bs-gutter-x: 1.5rem أي ما يعادل 24px إجمالاً، ثم تقسمه بالتساوي على الجانبين:
- حشو أيمن بمقدار النصف
0.75remأي12px. - حشو أيسر بمقدار النصف
0.75remأي12px.
وبفضل قاعدة box-sizing: border-box التي أسستها طبقة Reboot، يُحتسب هذا الحشو الجانبي البالغ مجموعه 24px ضمن عرض 100% بأمان تام دون أي طفح أفقي!
اعتمد على مصفوفة أبعاد الحاويات الرسمية في 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» لبناء التخطيطات متعددة الأعمدة داخل الحاويات!
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Stepped Container (.container) الحاوية المتدرجة .container
- حاوية التخطيط القياسية المتمركزة التي يقفز أقصى عرض لها بانتظام عند عبور كل نقطة توقف من sm وحتى xxl.
- للمراجعة
- 02 Fluid Container (.container-fluid) الحاوية المرنة الكاملة .container-fluid
- حاوية تخطيط تحافظ على العرض الكامل 100% عبر جميع أحجام الشاشات دون فرض سقف max-width.
- للمراجعة
- 03 Responsive Tier Container الحاوية المتجاوبة المرحلية
- حاوية تظل بعرض 100% تحت عتبة التوقف المحددة في اسمها وتتحول إلى عرض أقصى مقيد بدءاً من تلك العتبة فصاعداً.
- للمراجعة
- 04 Container Gutter Variable (--bs-gutter-x) متغير الحشو الأفقي للحاوية
- متغير CSS محلي قيمته الافتراضية 1.5rem ويُقسم مناصفةً إلى 0.75rem (12px) حشواً داخلياً على يمين ويسار الحاوية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 MAX-W MAX-W
- CSS max-width Property
- خاصية CSS التي تعتمد عليها الحاويات لتقييد اتساع المحتوى على الشاشات الكبيرة مع السماح بانكماشه بسلاسة على الصغير.
- للمراجعة
- 02 CALC CALC
- CSS calc() Mathematical Function
- تُستخدم داخل قواعد الحاوية لحساب نصف قيمة متغير الفاصل الأفقي بدقة لكل جانب.
- للمراجعة
- 03 REM REM
- Root Em Length Unit
- الوحدة المعتمدة لضبط الحشو الجانبي للحاوية بمقدار 0.75rem بما يعادل 12px قياسياً.
- للمراجعة
- 04 DOM DOM
- Document Object Model
- يبقى أنظف وأخف عند وضع كلاس الحاوية مباشرةً على الوسوم الدلالية بدلاً من مضاعفة عناصر التغليف.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
تنقل بين تبويب اللوحي 800px وتبويب المحمول 1050px في المختبر التفاعلي وراقب لحظة تحول .container-lg من 100% إلى 960px.
-
افتح مثال فحص عرض .container في محرر التجريب وغيّر عرض النافذة لمشاهدة القفزات القياسية (540px ثم 720px ثم 960px).
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
كم يبلغ أقصى عرض (max-width) للحاوية القياسية .container عند شاشات xxl (1400px فأكثر) في Bootstrap 5؟
عند الوصول إلى فئة xxl بعرض 1400px فأكثر يبلغ أقصى عرض للحاوية 1320px.
أي كلاس حاوية يحافظ على العرض الكامل 100% عبر جميع نقاط التوقف من xs وحتى xxl؟
تمتد الحاوية المرنة .container-fluid بعرض 100% دائماً على جميع الشاشات.
على شاشة جهاز لوحي بعرض 800px (ضمن فئة md)، كم يكون عرض العنصر الذي يحمل الكلاس .container-lg؟
تبقى الحاوية .container-lg بعرض 100% على جميع الشاشات الأضيق من 992px ولا يبدأ تقييد عرضها إلا عند بلوغ عتبة lg (992px).
في Bootstrap 5.3 يتطابق عرض .container مع عرض .container-sm تماماً عبر جميع نقاط التوقف الست.
صواب؛ فكلاهما يمتد بنسبة 100% تحت 576px ثم يتدرج بنفس القيم من 540px عند sm وحتى 1320px عند xxl.
كم يبلغ الحشو الأفقي الافتراضي الذي تضيفه حاويات Bootstrap 5 على كل جانب (يمين ويسار)؟
تضبط الحاوية المتغير --bs-gutter-x بقيمة 1.5rem وتمنح كل طرف نصف القيمة أي 0.75rem (يعادل 12px).
يوصي Bootstrap بوضع حاوية .container مباشرةً داخل حاوية .container أخرى لضمان التوسيط الصحيح.
خطأ؛ لا ينبغي تداخل الحاويات بلا داعي لأن كل حاوية تضيف حشواً جانبياً إضافياً يقلص عرض المحتوى.
كيف يوسّط Bootstrap الحاوية المقيدة .container أفقياً داخل شاشة مكتبية عريضة؟
يعتمد على الهوامش الجانبية التلقائية margin-right: auto وmargin-left: auto مع خاصية max-width.
وفق مصفوفة أبعاد Bootstrap 5.3، ما قيمة max-width للحاوية .container عند فئتي md ثم lg على التوالي؟
تبلغ القيمة 720px عند فئة اللوحي md (768px+) ثم ترتفع إلى 960px عند فئة المحمول lg (992px+).