Bootstrap: نظام الشبكة

Q: ماذا يحدث إذا كان إجمالي عدد الأعمدة في الصف أقل من 12؟

تظل المساحة على اليمين فارغة. على سبيل المثال، col-4 + col-4 يأخذ 8/12، تاركًا 4/12 فارغة. إذا كنت بحاجة إلى ملء المساحة المتبقية، استخدم col (تحجيم تلقائي).

Q: ما الفرق بين فجوة الشبكة وفئة أداة التباعد gap-* ؟

g-* (gutter) خاصة بالشبكة وتتحكم في الفجوة بين الأعمدة من خلال التطبيق على row . gap-* هي فئة أداة Flex/Grid عامة. في تخطيطات الشبكة، يُوصى باستخدام g-* .

Q: لماذا لا تكون أعمدة الشبكة الخاصة بي في نفس الصف؟

الأسباب الأكثر شيوعًا: (1) الأعمدة غير موجودة داخل row ؛ (2) row غير موجودة داخل حاوية ( container / container-fluid )؛ (3) إجمالي عرض الأعمدة يتجاوز 12، مما يسبب الالتفاف.

Q: هل col هو نفس col-12 ؟

بصريًا هما متطابقان (كلاهما عرض 100%)، لكن سلوكهما يختلف. col يستخدم flex: 1 0 0% وسيقسم المساحة المتاحة بالتساوي بين عناصر col الأخرى. col-12 له width: 100% ثابت.

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

1. مقدمة

(1) المتطلبات الأساسية

فهم نظام نقاط التوقف الستة (xs/sm/md/lg/xl/xxl)
الإلمام بفئات أدوات العرض المتجاوبة d-{breakpoint}-*

(2) 🎯 ما الذي ستتعلّمه

فهم البنية ثلاثية الطبقات لنظام الشبكة ذو الـ 12 عمودًا (Container > Row > Column)
إتقان استخدام الأعمدة المتجاوبة (col-12 col-md-6 col-lg-4)
تعلّم استخدام offset-* لإزاحة الأعمدة
إتقان تداخل الشبكة والتحكم في الفجوات
القدرة على بناء تخطيطات صفحات كاملة بشكل مستقل

(3) المشكلة

استخدمت Alice خاصية Flexbox لإنشاء شريط تنقل في الدرس السابق. الآن تريد إنشاء تخطيط الجسم الرئيسي لصفحتها الرئيسية — شريط جانبي يسار (3 أعمدة) + منطقة محتوى يمين (9 أعمدة). إنشاء هياكل متعددة الأعمدة متجاوبة معقدة باستخدام تخطيط CSS التقليدي أمر مرهق للغاية.

(4) الحل

باستخدام نظام الشبكة في Bootstrap، تحتاج فقط إلى <div class="row"><div class="col-3">Sidebar</div><div class="col-9">Content</div></div>. الشبكة هي أداة التخطيط الأساسية في Bootstrap، وتعتمد على شبكة Flexbox ذو 12 عمودًا. باستخدام row + col-* يمكنك بناء تخطيطات صفحات بأي درجة من التعقيد.

(5) الفائدة

بعد استخدام نظام الشبكة، أكملت Alice التخطيط الكلاسيكي للمدونة بهيكل يسار 3 أعمدة ويمين 9 أعمدة باستخدام بضعة أسطر فقط من الوسوم. وبدمج لواحق نقاط التوقف، حققت بسهولة التكيف المتجاوب.

2. البنية الأساسية

تتبع الشبكة دائمًا بنية تداخل Container -> Row -> Column:

HTML

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

▶ جرّب الكود

▶ مثال: تخطيط الشبكة الأساسي

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Basics</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-col { background: #0d6efd; color: #fff; padding: 1rem; border: 1px solid #fff; text-align: center; }
  </style>
</head>
<body>
  <div class="container py-4">
    <div class="row mb-3">
      <div class="col demo-col">col (4/12)</div>
      <div class="col demo-col">col (4/12)</div>
      <div class="col demo-col">col (4/12)</div>
    </div>
    <div class="row mb-3">
      <div class="col-4 demo-col" style="background: #198754;">col-4</div>
      <div class="col-8 demo-col" style="background: #dc3545;">col-8</div>
    </div>
    <div class="row">
      <div class="col-3 demo-col" style="background: #6f42c1;">col-3</div>
      <div class="col demo-col" style="background: #fd7e14;">col (auto)</div>
      <div class="col-3 demo-col" style="background: #20c997;">col-3</div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

(1) مقارنة سلوك الأعمدة

الفئة	السلوك	حالة الاستخدام
`col`	تقسيم المساحة المتبقية بالتساوي	أعمدة بعرض متساوٍ
`col-{n}`	عرض ثابت بمقدار n/12	تخطيط بنسبة ثابتة
`col-auto`	العرض يتكيّف مع المحتوى	مجموعات الأزرار، الشارات
`col-{breakpoint}`	عرض كامل أسفل نقطة التوقف، وتناسبي أعلاها	تخطيط متجاوب

3. الأعمدة المتجاوبة

HTML

<div class="row">
  <div class="col-12 col-md-6 col-lg-4 bg-primary p-3 text-white">Sidebar</div>
  <div class="col-12 col-md-6 col-lg-8 bg-info p-3 text-white">Content</div>
</div>

▶ جرّب الكود

الصيغة	< 768px	768-991px	>= 992px
`col-12 col-md-6 col-lg-4`	عرض كامل	1/2 عرض	1/3 عرض
`col-6 col-md-4 col-xl-3`	1/2 عرض	1/3 عرض	1/4 عرض
`col-md-8`	عرض كامل	2/3 عرض	2/3 عرض

4. الصفوف المتعددة والالتفاف

عندما يتجاوز إجمالي عدد الأعمدة في الصف 12، فإن الأعمدة الزائدة تنتقل تلقائيًا إلى السطر التالي:

HTML

<div class="row">
  <div class="col-4 bg-primary p-3 text-white">4</div>
  <div class="col-4 bg-success p-3 text-white">4</div>
  <div class="col-4 bg-danger p-3 text-white">4</div>
  <div class="col-4 bg-warning p-3">4 (wraps to next row)</div>
  <div class="col-4 bg-info p-3 text-white">4</div>
</div>

▶ جرّب الكود

5. الإزاحة

HTML

<div class="row">
  <div class="col-3 bg-primary p-3 text-white">Sidebar</div>
  <div class="col-6 offset-3 bg-info p-3 text-white">Offset 3 columns right</div>
</div>

<div class="row">
  <div class="col-6 offset-3 bg-success p-3 text-white text-center">
    Centered column (col-6 + offset-3)
  </div>
</div>

▶ جرّب الكود

الصيغة	التأثير
`col-6 offset-3`	6 أعمدة في المنتصف
`col-4 offset-4`	4 أعمدة في المنتصف
`col-8 offset-2`	8 أعمدة بإزاحة يسار

6. التداخل

إدراج مجموعة أخرى من row + col داخل عمود:

HTML

<div class="row">
  <div class="col-8 bg-light p-3">
    <h6>Main Section</h6>
    <div class="row">
      <div class="col-6 bg-primary text-white p-2">Nested 6</div>
      <div class="col-6 bg-success text-white p-2">Nested 6</div>
    </div>
  </div>
  <div class="col-4 bg-info p-3 text-white">Sidebar</div>
</div>

▶ جرّب الكود

7. الفجوات

HTML

<div class="row g-0">
  <div class="col-6"><div class="bg-primary text-white p-3">g-0: no gap</div></div>
  <div class="col-6"><div class="bg-success text-white p-3">g-0: no gap</div></div>
</div>

<div class="row g-4 mt-2">
  <div class="col-6"><div class="bg-primary text-white p-3">g-4: 24px gap</div></div>
  <div class="col-6"><div class="bg-success text-white p-3">g-4: 24px gap</div></div>
</div>

▶ جرّب الكود

الفئة	أفقي	عمودي
`g-0`	0	0
`g-3`	1rem	1rem
`g-5`	3rem	3rem
`gx-4`	1.5rem	0
`gy-4`	0	1.5rem

8. بنية الشبكة ومرجعها

(1) بنية نظام الشبكة

graph TB
    subgraph Container Layer
        A[.container / .container-fluid] --> B[Max-width + Horizontal Padding]
    end
    subgraph Row Layer
        B --> C[.row]
        C --> D[Negative margin to offset container padding]
        C --> E[Gutter spacing control]
    end
    subgraph Column Layer
        D --> F[.col-*]
        E --> F
        F --> G[12-column flex system]
        F --> H[Responsive breakpoints col-md-*]
        F --> I[Offset offset-*]
        F --> J[Order order-*]
    end
    subgraph Sub-content
        G --> K[Nested grid row > col]
        H --> K
        I --> K
    end

(2) مرجع مستويات الشبكة

المستوى	العنصر	الفئة	العرض	الوصف
الحاوية	`<div>`	`container`	عرض ثابت متجاوب	توسيط، ويحدد أقصى عرض
الحاوية	`<div>`	`container-fluid`	100%	عرض كامل
الحاوية	`<div>`	`container-{sm\|md\|lg\|xl\|xxl}`	نقطة توقف مطابقة	عرض كامل حتى نقطة التوقف المحددة
الصف	`<div>`	`row`	100% + هامش سالب	حاوية Flex
العمود	`<div>`	`col`	تقسيم تلقائي	تحجيم تلقائي
العمود	`<div>`	`col-{n}`	n/12	نسبة ثابتة
العمود	`<div>`	`col-{bp}-{n}`	متجاوب	تناسبي فوق نقطة التوقف

(3) مرجع أعمدة نقاط توقف الشبكة

اسم الفئة	<576px	>=576px	>=768px	>=992px	>=1200px	>=1400px
`col-12`	100%	100%	100%	100%	100%	100%
`col-sm-6`	100%	50%	50%	50%	50%	50%
`col-md-4`	100%	100%	33.3%	33.3%	33.3%	33.3%
`col-lg-3`	100%	100%	100%	25%	25%	25%
`col-xl-2`	100%	100%	100%	100%	16.67%	16.67%
`col-12 col-md-6 col-lg-4`	100%	100%	50%	33.3%	33.3%	33.3%
`col-6 col-md-4 col-xl-3`	50%	50%	33.3%	33.3%	25%	25%

▶ مثال: تخطيط صفحة المدونة

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog 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 py-4">
    <header class="mb-4">
      <h1>My Blog</h1>
      <p class="text-muted">Sharing technology and thoughts</p>
    </header>

    <div class="row g-4">
      <!-- Main content -->
      <article class="col-12 col-lg-8">
        <div class="card mb-3">
          <div class="card-body">
            <h2 class="card-title h4">Grid Layout in Action</h2>
            <p class="card-text text-muted small">January 20, 2026</p>
            <p>Using col-8 + col-4 to create a classic blog layout with article area on the left and sidebar on the right.</p>
            <button class="btn btn-sm btn-primary">Read More</button>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h2 class="card-title h4">Bootstrap 5 New Features</h2>
            <p class="card-text text-muted small">January 18, 2026</p>
            <p>Bootstrap 5 introduces CSS variables, improved grid system, and new utility classes.</p>
            <button class="btn btn-sm btn-primary">Read More</button>
          </div>
        </div>
      </article>

      <!-- Sidebar -->
      <aside class="col-12 col-lg-4">
        <div class="bg-light p-4 rounded">
          <h5>About the Author</h5>
          <p class="small mb-0">Full-stack developer passionate about front-end technology and UI design.</p>
        </div>
        <div class="bg-light p-4 rounded mt-3">
          <h5>Categories</h5>
          <ul class="list-unstyled small mb-0">
            <li>Front-end (12)</li>
            <li>Back-end (8)</li>
            <li>Design (5)</li>
          </ul>
        </div>
      </aside>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

▶ مثال: شبكة لوحة التحكم

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard Grid</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 py-4 bg-light" style="min-height: 100vh;">
    <h3 class="mb-4">Dashboard</h3>

    <!-- Stats row -->
    <div class="row g-3 mb-4">
      <div class="col-6 col-xl-3">
        <div class="bg-primary text-white p-3 rounded">
          <h6 class="mb-1">Users</h6>
          <h3 class="mb-0">1,284</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-success text-white p-3 rounded">
          <h6 class="mb-1">Orders</h6>
          <h3 class="mb-0">356</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-warning text-dark p-3 rounded">
          <h6 class="mb-1">Revenue</h6>
          <h3 class="mb-0">$12,450</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-info text-white p-3 rounded">
          <h6 class="mb-1">Activity</h6>
          <h3 class="mb-0">78%</h3>
        </div>
      </div>
    </div>

    <!-- Charts + Table -->
    <div class="row g-3">
      <div class="col-12 col-lg-8">
        <div class="bg-white p-4 rounded shadow-sm">
          <h5>Chart Area</h5>
          <div class="bg-light" style="height: 200px;"></div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="bg-white p-4 rounded shadow-sm">
          <h5>Recent Activity</h5>
          <ul class="list-unstyled small mb-0">
            <li class="mb-2">Zhang San registered a new account</li>
            <li class="mb-2">Li Si submitted an order</li>
            <li>Wang Wu updated their profile</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

▶ مثال: شبكة متداخلة

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .outer { background: #e9ecef; border: 2px dashed #0d6efd; padding: 1rem; }
    .inner { background: #0d6efd; color: #fff; padding: 0.75rem; border: 1px solid #fff; text-align: center; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-3">Nested Grid Demo</h3>

    <div class="row">
      <div class="col-8">
        <div class="outer">
          <h6>Main Column col-8</h6>
          <div class="row g-2">
            <div class="col-6"><div class="inner">Nested col-6</div></div>
            <div class="col-6"><div class="inner">Nested col-6</div></div>
            <div class="col-4"><div class="inner">Nested col-4</div></div>
            <div class="col-4"><div class="inner">Nested col-4</div></div>
            <div class="col-4"><div class="inner">Nested col-4</div></div>
          </div>
          <p class="small mt-2 mb-0">The 12 columns in a nested grid are calculated relative to the parent column</p>
        </div>
      </div>
      <div class="col-4">
        <div class="outer" style="height: 100%;">
          <h6>Sidebar col-4</h6>
          <p class="small mb-0">Sidebar height automatically aligns with main column content</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

▶ مثال: شبكة منتجات متجاوبة

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">Product List</h3>

    <div class="row g-3 g-lg-4">
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/0d6efd/fff?text=Product1" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">Product Name</h6>
            <p class="card-text text-danger fw-bold mb-0">$99.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/198754/fff?text=Product2" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">Product Name</h6>
            <p class="card-text text-danger fw-bold mb-0">$149.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/dc3545/fff?text=Product3" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">Product Name</h6>
            <p class="card-text text-danger fw-bold mb-0">$199.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/ffc107/000?text=Product4" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">Product Name</h6>
            <p class="card-text text-danger fw-bold mb-0">$59.00</p>
          </div>
        </div>
      </div>
    </div>

    <p class="text-muted small mt-3">
      Responsive: Mobile 2 columns (col-6) → Tablet 3 columns (col-md-4) → Desktop 4 columns (col-lg-3), spacing g-3 → g-lg-4
    </p>
  </div>
</body>
</html>

▶ جرّب الكود

❓ أسئلة شائعة

س ماذا يحدث إذا كان إجمالي عدد الأعمدة في الصف أقل من 12؟

ج تظل المساحة على اليمين فارغة. على سبيل المثال، col-4 + col-4 يأخذ 8/12، تاركًا 4/12 فارغة. إذا كنت بحاجة إلى ملء المساحة المتبقية، استخدم col (تحجيم تلقائي).

س ما الفرق بين فجوة الشبكة وفئة أداة التباعد gap-*؟

ج g-* (gutter) خاصة بالشبكة وتتحكم في الفجوة بين الأعمدة من خلال التطبيق على row. gap-* هي فئة أداة Flex/Grid عامة. في تخطيطات الشبكة، يُوصى باستخدام g-*.

س لماذا لا تكون أعمدة الشبكة الخاصة بي في نفس الصف؟

ج الأسباب الأكثر شيوعًا: (1) الأعمدة غير موجودة داخل row؛ (2) row غير موجودة داخل حاوية (container/container-fluid)؛ (3) إجمالي عرض الأعمدة يتجاوز 12، مما يسبب الالتفاف.

س هل col هو نفس col-12؟

ج بصريًا هما متطابقان (كلاهما عرض 100%)، لكن سلوكهما يختلف. col يستخدم flex: 1 0 0% وسيقسم المساحة المتاحة بالتساوي بين عناصر col الأخرى. col-12 له width: 100% ثابت.

س كيف أحقق المحاذاة العمودية في الشبكة؟

ج أعمدة الشبكة هي أيضًا عناصر فرعية في Flexbox، لذا يمكنك استخدام فئات أدوات align-items-* وalign-self-* مباشرةً. إضافة align-items-center إلى row تُوسط جميع الأعمدة في الصف عموديًا. إضافة align-self-end إلى عمود معين تُحاذيه إلى الأسفل.

📖 ملخص

بنية الشبكة ثلاثية الطبقات: container > .row > .col-*
نظام الـ 12 عمودًا: col-6 = 50%، col-4 = 33.3%، col-3 = 25%
التنفيذ المتجاوب بلواحق نقاط التوقف: col-12 col-md-6 col-lg-4
offset-* لإزاحة الأعمدة؛ مجموع أعمدة الشبكة المتداخلة يبقى 12
g-* للتحكم في تباعد الفجوات

📝 تمارين

⭐ أنشئ تخطيط مدونة قياسي: عرض كامل على الجوال، منطقة مقالات يسار col-8 + شريط جانبي يمين col-4 على سطح المكتب.
⭐⭐ استخدم الشبكة لتنفيذ شبكة بطاقات من أربعة أعمدة: عمود واحد على الجوال (col-12)، عمودان على الجهاز اللوحي (col-md-6)، أربعة أعمدة على سطح المكتب (col-lg-3)، مع تباعد g-4 بين البطاقات.
⭐⭐⭐ أنشئ تخطيطًا غير متماثل: شريط جانبي col-3 + منطقة محتوى col-6 + عنصر صغير يمين col-3.

الدرس السابق: Responsive Design · الدرس التالي: Navbar

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

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

من نحن