Bootstrap Grid Mastery: إتقان التخطيطات المتجاوبة المتقدمة

نقدم مجموعة شاملة من مقالات التعليمية الهامة في تطوير الويب لتحويل أفكارك إلى واقع رقمي

Bootstrap Grid Mastery: إتقان التخطيطات المتجاوبة المتقدمة

Bootstrap 2026-03-21 علاء عامر

إتقان التخطيطات المتجاوبة المتقدمة
اتقن نظام Grid في Bootstrap:

1) مفاهيم Grid الأساسية

Grid في Bootstrap يعتمد على:

12 عمود داخل كل صف
Flexbox لإدارة التخطيط
منهجية Mobile-First
نزول الأعمدة تلقائيًا لسطر جديد عند تجاوز 12

<div class="row">
  <div class="col">عمود تلقائي العرض</div>
  <div class="col">عمود تلقائي العرض</div>
  <div class="col">عمود تلقائي العرض</div>
</div>

3) Offsets و Ordering و Alignment

<div class="row align-items-center g-3">
  <div class="col-md-4 order-2 order-md-1">العمود الأيسر</div>
  <div class="col-md-4 offset-md-1 order-1 order-md-2">العمود الأوسط</div>
  <div class="col-md-3 order-3">العمود الأيمن</div>
</div>

أدوات مهمة:

offset-* لتحريك العمود
order-* لتغيير الترتيب بصريًا
align-items-* للمحاذاة الرأسية
justify-content-* للتوزيع الأفقي

5) نمط لوحة تحكم عملي

<div class="container py-4">
  <div class="row g-3">
    <div class="col-12 col-md-6 col-xl-3"><div class="card p-3">مؤشر 1</div></div>
    <div class="col-12 col-md-6 col-xl-3"><div class="card p-3">مؤشر 2</div></div>
    <div class="col-12 col-md-6 col-xl-3"><div class="card p-3">مؤشر 3</div></div>
    <div class="col-12 col-md-6 col-xl-3"><div class="card p-3">مؤشر 4</div></div>

    <div class="col-12 col-xl-8"><div class="card p-3">الرسم الرئيسي</div></div>
    <div class="col-12 col-xl-4"><div class="card p-3">آخر النشاطات</div></div>

    <div class="col-12 col-lg-4"><div class="card p-3">مصدر A</div></div>
    <div class="col-12 col-lg-4"><div class="card p-3">مصدر B</div></div>
    <div class="col-12 col-lg-4"><div class="card p-3">مصدر C</div></div>
  </div>
</div>

7) مشروع كامل: Dashboard متجاوب

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap لوحة تحكم</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body class="bg-light">
    <div class="container py-4">
      <header class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">لوحة الأداء</h1>
        <button class="btn btn-primary">تصدير التقرير</button>
      </header>

      <div class="row g-3 mb-3">
        <div class="col-12 col-md-6 col-xl-3"><div class="card border-0 shadow-sm"><div class="card-body"><small class="text-muted">الإيرادات</small><h4>$48,200</h4></div></div></div>
        <div class="col-12 col-md-6 col-xl-3"><div class="card border-0 shadow-sm"><div class="card-body"><small class="text-muted">الطلبات</small><h4>1,294</h4></div></div></div>
        <div class="col-12 col-md-6 col-xl-3"><div class="card border-0 shadow-sm"><div class="card-body"><small class="text-muted">الزوار</small><h4>73,111</h4></div></div></div>
        <div class="col-12 col-md-6 col-xl-3"><div class="card border-0 shadow-sm"><div class="card-body"><small class="text-muted">التحويل</small><h4>3.8%</h4></div></div></div>
      </div>

      <div class="row g-3">
        <div class="col-12 col-lg-8">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
              <h5 class="card-title">نظرة على الزيارات</h5>
              <div class="bg-body-secondary rounded" style="height: 280px"></div>
            </div>
          </div>
        </div>

        <div class="col-12 col-lg-4">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
              <h5 class="card-title">النشاط الأخير</h5>
              <ul class="list-group list-group-flush">
                <li class="list-group-item px-0">طلب جديد #1042</li>
                <li class="list-group-item px-0">ترقية خطة عميل</li>
                <li class="list-group-item px-0">طلب استرجاع</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

الملخص

في هذا الدرس تعلمنا:

منطق شبكة 12 عمود
الأعمدة حسب نقاط التوقف
الإزاحة والترتيب المرن
التداخل داخل الشبكة
ضبط المسافات بين العناصر
مشروع Dashboard كامل

الدرس القادم: مكونات Bootstrap وأنماط التفاعل.

هل تحتاج مساعدة في تصميم Layout متجاوب؟

Bootstrap Grid System Responsive Layout Columns Breakpoints Dashboard Frontend

قسم المقالة

Bootstrap

Bootstrap Grid Mastery: إتقان التخطيطات المتجاوبة المتقدمة

اتقن نظام Grid في Bootstrap: الصفوف، الأعمدة، نقاط التوقف، التداخل، الترتيب، الإزاحة، وتخطيطات لوحات التحكم العملية.

التواصل والاستشارة

تواصل مباشر عبر الواتساب أو الهاتف لفهم احتياجات مشروعك بدقة.

التخطيط والجدولة

وضع خطة عمل واضحة مع جدول زمني محدد لكل مرحلة من المشروع.

البرمجة والتطوير

تطوير المشروع بأحدث التقنيات لضمان الأداء والأمان العاليين.

المراجعة والتسليم

ختبار شامل ومراجعة دقيقة قبل التسليم النهائي للمشروع.

علاء عامر

مطور ويب محترف بخبرة تزيد عن 10 سنوات في بناء حلول رقمية مبتكرة.

هل تحتاج هذه الخدمة؟

تواصل معي الآن للحصول على استشارة مجانية وعرض سعر

تواصل عبر واتساب رضاكم هو هدفنا الأسمى

عروض إضافية

صيانة وتحديث المواقع

نحافظ على موقعك آمنًا ومحدّثًا دائمًا
ربط الأنظمة وواجهات البرمجة

نربط أنظمتك بواجهات برمجية قوية ومرنة
تصميم وتحسين قواعد البيانات

استعلامات أسرع وهيكلة أوضح وأخطاء أقل
تأمين المواقع والحماية المتقدمة

حماية موقعك من التهديدات السيبرانية
أتمتة العمليات والمهام البرمجية

نؤتمت المهام المتكررة ونوفّر وقتك دائمًا

لديك استفسار؟

اتصل بنا الآن

00201014714795

راسلنا عبر البريد الإلكتروني

[email protected]

علاء عامر

Bootstrap Grid Mastery: إتقان التخطيطات المتجاوبة المتقدمة