English 中文 العربية 日本語 Português

Bootstrap: حاويات التخطيط

آخر تحديث: 2026-08-26

1. مقدمة

(1) المتطلبات المسبقة

(2) 🎯 أهداف التعلم

(3) المشكلة

أنهى بوب للتو تعلم HTML الأساسي. يلاحظ أن نفس الصفحة لها هوامش يمنى ويسرى غير متسقة عند عروض شاشات مختلفة — أحيانًا تكون ملتصقة بالحافة، وأحيانًا تكون المساحة البيضاء كبيرة جدًا.

(4) الحل

صُممت حاويات Bootstrap لحل هذه المشكلة. الحاويات هي أساس نظام شبكة Bootstrap. يجب وضع جميع المحتويات داخل حاوية، لأن الحاويات توفر المحاذاة والحشو المناسبين.

لفهم الفكرة: الحاوية تشبه برواز الصورة — فهي تحدد عرض وهوامش منطقة المحتوى، مما يجعل المحتوى يبدو مرتبًا وأنيقًا على "جدران" بأحجام مختلفة.

(5) الفوائد

بعد استخدام الحاويات، لم يعد بوب بحاجة للقلق بشأن مشاكل الهوامش عبر الشاشات المختلفة — حاويات Bootstrap توفر تلقائيًا المحاذاة والحشو المناسبين، مما يبقي المحتوى متمركزًا بشكل أنيق عند أي حجم شاشة.

2. ما هي الحاويات

الوظائف الأساسية للحاوية هي التوسيط وتحديد العرض. لدى Bootstrap ثلاثة أنواع من الحاويات:

الحاوية السلوك حالة الاستخدام النموذجية
.container عرض ثابت عند كل نقطة توقف، يتنقل بين نقاط التوقف منطقة محتوى قياسية
.container-fluid دائمًا width: 100% أقسام بعرض كامل (شريط تنقل، لافتة)
.container-{breakpoint} 100% قبل نقطة التوقف المحددة، ثابت بعدها تحكم متجاوب دقيق

(1) مقارنة الحاويات الثلاث

HTML 
<div class="container">.container - responsive fixed width</div>
<div class="container-fluid">.container-fluid - always 100% width</div>
<div class="container-md">.container-md - 100% below md, fixed above</div>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

3. ‎.container

.container هو نوع الحاوية الأكثر استخدامًا. له عروض قصوى محددة مسبقًا عند كل نقطة توقف:

نقطة التوقف لاحقة الصنف عرض الشاشة >= عرض .container
xs (هاتف عمودي) لا يوجد 0 100% (لا قيمة ثابتة)
sm (هاتف أفقي) -sm 576px 540px
md (جهاز لوحي) -md 768px 720px
lg (سطح مكتب) -lg 992px 960px
xl (شاشة كبيرة) -xl 1200px 1140px
xxl (شاشة ضخمة) -xxl 1400px 1320px

▶ مثال: عرض .container

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-box { background: #f8f9fa; border: 2px solid #0d6efd; padding: 1rem; text-align: center; }
  </style>
</head>
<body>
  <div class="container demo-box">
    This is a .container<br>
    Resize the browser to see its width change at each breakpoint.
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

4. ‎.container-fluid

يحافظ .container-fluid دائمًا على عرض 100%، مع الاحتفاظ بالحشو الأيمن والأيسر فقط (افتراضيًا padding: 0 12px):

HTML 
<div class="container-fluid bg-dark text-white py-3">
  Full-width banner - stretches edge to edge
</div>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا. ملاحظة: container-fluid ليس ملتصقًا بحواف إطار العرض — لا يزال به حوالي 24px من padding (12px لكل جانب). إذا كنت تحتاج عرض كامل حقيقي من حافة إلى حافة، ادمجه مع .p-0 أو أنماط مخصصة.

5. ‎.container-{breakpoint}

.container-{breakpoint} هي قدرة أُضيفت في Bootstrap 5: تتصرف كعرض 100% عند وتحت نقطة التوقف المحددة، وتتحول إلى عرض ثابت فوق نقطة التوقف.

▶ مثال: مقارنة حاويات نقاط التوقف المتجاوبة

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Breakpoint Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-box { border: 2px solid #198754; padding: 1rem; margin-top: 1rem; text-align: center; }
  </style>
</head>
<body>
  <div class="container-md demo-box">
    .container-md - full width on mobile, fixed on tablet and up
  </div>
  <div class="container-lg demo-box" style="border-color: #dc3545;">
    .container-lg - full width on tablet, fixed on desktop and up
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا. الاستخدام النموذجي:

6. تداخل الحاويات

يمكن تداخل الحاويات، لكن لاحظ أن الحاويات المتداخلة ترث padding من الحاوية الأم، مما يجعل منطقة المحتوى أضيق:

HTML 
<div class="container" style="border: 2px solid #0d6efd; padding: 1rem;">
  <p>Outer container (blue)</p>
  <div class="container" style="border: 2px solid #198754; padding: 1rem;">
    <p>Nested container (green) - narrower by about 24px each side</p>
  </div>
</div>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا. توصية: تداخل الحاويات غير ضروري في معظم السيناريوهات. إذا كنت بحاجة لإنشاء أعمدة داخل حاوية، استخدم .row + .col-* (يُغطى في الدرس التالي) بدلاً من تداخل حاوية أخرى.

7. آلية حشو الحاويات

للحاويات افتراضيًا padding-left: 12px و padding-right: 12px. هذه المساحة متسقة مع عرض مزراب نظام الشبكة، مما يضمن محاذاة المحتوى داخل الأعمدة داخل الحاوية:

100% 
graph LR
    A[Browser Edge] -->|12px padding| B[Container Content]
    B -->|12px padding| C[Browser Edge]
    style A fill:#eee,stroke:#999
    style C fill:#eee,stroke:#999
    style B fill:#0d6efd,color:#fff

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

خاصية الحاوية القيمة الوصف
padding-left 12px الحشو الأيسر
padding-right 12px الحشو الأيمن
margin-left auto توسيط أفقي
margin-right auto توسيط أفقي

(1) مقارنة الحشو والهامش

الخاصية مثال الصنف التأثير سيناريو التطبيق
الحشو px-3 يدفع محتوى الحاوية نحو المركز يمنع المحتوى من ملامسة الحواف
الهامش mx-auto يوسّط الحاوية داخل الحاوية الأم توسيط حاوية أفقيًا
مجموعة px-3 mx-auto الحاوية متمركزة والمحتوى ليس ملتصقًا بالحواف منطقة محتوى قياسية

8. أمثلة على تجميع الحاويات

▶ مثال: شريط تنقل بعرض كامل + منطقة محتوى متمركزة

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Layout</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container-fluid bg-dark text-white py-3">
    <div class="container">
      <span class="fs-4">Brand</span>
    </div>
  </div>
  <div class="container my-4">
    <div class="row">
      <div class="col-8 bg-light p-3 border">Main Content</div>
      <div class="col-4 bg-secondary text-white p-3">Sidebar</div>
    </div>
  </div>
  <div class="container-fluid bg-dark text-white py-3 mt-4">
    <div class="container text-center">&copy; 2026 Footer</div>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

▶ مثال: تخطيط متجاوب بحاويات متداخلة

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Containers</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .outer { background: #e9ecef; padding: 1rem; }
    .inner { background: #0d6efd; color: #fff; padding: 1rem; }
  </style>
</head>
<body>
  <div class="container outer">
    <h6>Outer .container (blue border area)</h6>
    <div class="container-md inner">
      .container-md — inside .container<br>
      Full width on mobile, fixed on md+
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

▶ مثال: تقنيات تصحيح عرض الحاويات

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Debug Containers</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .dbg { outline: 2px dashed #dc3545; padding: 0.5rem; margin: 1rem 0; }
  </style>
</head>
<body>
  <div class="container dbg">.container</div>
  <div class="container-sm dbg">.container-sm</div>
  <div class="container-md dbg">.container-md</div>
  <div class="container-lg dbg">.container-lg</div>
  <div class="container-xl dbg">.container-xl</div>
  <div class="container-xxl dbg">.container-xxl</div>
  <div class="container-fluid dbg">.container-fluid</div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثيرات مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

❓ أسئلة شائعة

س هل عروض الحاويات الثابتة مبرمجة بشكل ثابت؟ هل يمكن تغييرها؟
ج نعم، يمكنك تعديل قيم العرض الأقصى لكل نقطة توقف باستخدام متغير Sass $container-max-widths. يُغطى تخصيص Sass بالتفصيل في المرحلة 5.
س هل يمكن استخدام .container و .container-fluid معًا؟
ج نعم. نهج شائع هو استخدام container-fluid لأشرطة التنقل/اللافتات بعرض كامل و container لمنطقة المحتوى المتمركزة. لا تتعارض.
س لماذا لا تحتوي الحاويات على حشو عمودي؟
ج تتحكم الحاويات فقط في التوسيط الأفقي وتقييد العرض. يُتحكم في المساحة العمودية عبر الأصناف المساعدة (مثل py-3 و my-5) أو هوامش العناصر الفرعية، والتي ستُغطى في درس لاحق.
س هل container-md بنفس عرض container على سطح المكتب؟
ج عند نقطة توقف md فأكبر، container-md له نفس عرض container بالضبط. الفرق تحت md: container لا يزال له قيم عرض ثابتة (لكن محدودة بإطار العرض)، بينما container-md يصبح عرضه 100%. ينطبق الشيء نفسه على lg و xl و xxl.
س هل يمكنني تداخل حاويات داخل حاويات؟ ما الذي يجب الانتباه إليه؟
ج نعم، التداخل ممكن، لكن كل طبقة حاوية تضيف 24px من الحشو الأيمن/الأيسر، مما يجعل منطقة المحتوى الفعلية للحاوية الداخلية أضيق. لتجنب الحشو التراكمي، يمكنك إضافة px-0 للحاوية الداخلية لإزالة الحشو.

📖 ملخص

📝 تمارين

  1. ⭐ أنشئ صفحة تعرض حاويات container و container-fluid و container-md جنبًا إلى جنب، مميزة بحدود ملوّنة.
  2. ⭐⭐ افتح أدوات مطور المتصفح، غيّر إطار العرض إلى 540px و 720px و 960px و 1140px على التوالي، ولاحظ ما إذا كانت تغيرات عرض .container تطابق القيم المحددة مسبقًا.
  3. ⭐⭐⭐ اكتب صفحة تحتوي على: شريط تنقل داكن .container-fluid في الأعلى، منطقة محتوى .container في المنتصف، وتذييل .container-fluid في الأسفل.

الدرس السابق: مقدمة وتثبيت Bootstrap · الدرس التالي: الخطوط

Web-Tutorial.com

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

100%