Bootstrap: التخطيط المتجاوب

Q: ماذا لو أردت سلوكًا واحدًا بين lg و md، وآخر بين sm و xs؟

يستخدم Bootstrap min-width للتجاوز تصاعديًا. يمكنك كتابة d-none d-md-block d-xl-none ليعني: مخفي على xs-sm، مرئي على md-lg، مخفي على xl+.

Q: هل هناك فرق بين استخدام img-fluid للصور المتجاوبة واستخدام CSS max-width: 100% مباشرة؟

نفس الشيء في الأساس. .img-fluid هو صنف أدوات مُعد مسبقًا لـ max-width: 100%; height: auto; ، مصمم للتكامل بشكل أكثر اتساقًا مع مكونات صور Bootstrap.

Q: هل لدى Bootstrap أصناف متعلقة بأنماط الطباعة؟

نعم. يوفر Bootstrap 5 سلسلة أصناف d-print-* ، مثل d-print-none (مخفي عند الطباعة) و d-print-block (مرئي عند الطباعة). كما يوفر display-print-* للتحكم في قيمة العرض أثناء الطباعة. هذه الأصناف تنطبق فقط داخل وسائط الطباعة وممتازة لتحسين تخطيطات الطباعة.

Q: كيف أخصص نقاط التوقف؟

تخصيص نقاط التوقف يتطلب تعديل متغيرات Sass $grid-breakpoints و $container-max-widths (مفصل في المرحلة 5). إذا كنت تستخدم تجاوزات CSS فقط، يمكنك كتابة استعلامات وسائط مثل @media (min-width: 1600px) { ... } ، لكن أصناف أدوات نقاط التوقف المخصصة (مثل d-xxl-block ) لن تُولّد تلقائيًا. يُوصى باستخدام نقاط توقف Bootstrap القياسية قدر الإمكان.

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

1. مقدمة الدرس

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

إتقان حاويات Flexbox والمحاذاة (من الدرس الخامس)
الإلمام بأصناف أدوات justify-content-* و align-items-*

(2) 🎯 ما ستتعلمه

فهم نظام نقاط التوقف الست في Bootstrap (xs/sm/md/lg/xl/xxl)
إتقان أصناف أدوات العرض المتجاوبة d-{breakpoint}-*
تعلم محاذاة النص المتجاوبة والتحكم في حجم الخط
استخدام .img-fluid للصور المتجاوبة
القدرة على إنشاء صفحات متجاوبة متعددة الأجهزة بشكل مستقل

(3) المشكلة

يُطوّر تشارلي لوحة تحكم خلفية: سطح المكتب يعرض شريطًا جانبيًا كاملًا وجدولًا، والجهاز اللوحي يطوي الشريط الجانبي، والجوال يخفي الشريط الجانبي لصالح قائمة همبرغر. تنفيذ هذا باستعلامات وسائط CSS الخالصة يتطلب كتابة الكثير من التعليمات البرمجية المتكررة.

(4) الحل

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

(5) الفوائد

بعد استخدام أصناف الأدوات المتجاوبة في Bootstrap، حقق تشارلي تكيفًا متعدد الأجهزة بأصناف مثل d-none d-md-block و col-12 col-md-6، مما عزز كفاءة التطوير بشكل كبير.

2. نظام نقاط التوقف

▶ مثال: نظرة عامة على نظام نقاط التوقف

يُعرّف Bootstrap 5 ست نقاط توقف، مبنية على min-width (الجوال أولًا):

نقطة التوقف	الصنف	الحد الأدنى للعرض	الأجهزة النموذجية
صغير جدًا	لا يوجد	< 576px	هاتف عمودي
صغير	`sm`	>= 576px	هاتف أفقي
متوسط	`md`	>= 768px	أجهزة لوحية
كبير	`lg`	>= 992px	حواسيب محمولة
كبير جدًا	`xl`	>= 1200px	شاشات سطح المكتب
كبير جدًا جدًا	`xxl`	>= 1400px	شاشات ضخمة

graph LR
    subgraph Bootstrap breakpoints (min-width)
        A[xs 0-575px] --> B[sm 576-767px]
        B --> C[md 768-991px]
        C --> D[lg 992-1199px]
        D --> E[xl 1200-1399px]
        E --> F[xxl 1400px+]
    end

3. أصناف أدوات العرض: d-*

تحكم في ظهور/اختفاء العنصر عبر شاشات مختلفة:

HTML

<div class="d-none d-md-block bg-primary text-white p-3 mb-2">
  Visible on md+ screens, hidden on mobile
</div>

<div class="d-block d-md-none bg-success text-white p-3 mb-2">
  Visible on mobile, hidden on md+ screens
</div>

▶ جرّب الكود

(1) أوضاع العرض المتجاوبة الشائعة

المتطلب	التنفيذ
مخفي على الجوال، مرئي على الجهاز اللوحي+	`d-none d-md-block`
مرئي على الجوال، مخفي على الجهاز اللوحي+	`d-block d-md-none`
مخفي دائمًا	`d-none`
مرئي عند الطباعة	`d-none d-print-block`

4. النص المتجاوب

HTML

<!-- Responsive text alignment -->
<p class="text-center text-md-start">
  Centered on mobile, left-aligned on md+
</p>

<!-- Responsive font size -->
<p class="fs-6 fs-md-5 fs-lg-4">
  Gets larger on bigger screens
</p>

<!-- Responsive text color -->
<p class="text-muted text-md-primary">
  Gray on mobile, blue on tablet+
</p>

▶ جرّب الكود

التنفيذ	الجوال	الجهاز اللوحي+
`text-center text-md-start`	متمركز	محاذاة لليسار
`text-start text-lg-center`	محاذاة لليسار	متمركز على سطح المكتب

5. الهوامش والمسافات المتجاوبة

HTML

<div class="container">
  <div class="card p-3 p-md-4 p-lg-5 mb-3 mb-md-0">
    <h5>Responsive Card</h5>
    <p class="mb-0 mb-md-2">Padding and margin adapt to screen size.</p>
  </div>

  <div class="d-flex flex-column flex-md-row gap-2 gap-md-3">
    <button class="btn btn-primary">Save</button>
    <button class="btn btn-secondary">Cancel</button>
  </div>
</div>

▶ جرّب الكود

المتطلب	التنفيذ
مدمج على الجوال، واسع على سطح المكتب	`p-3 p-md-5`
مكدس على الجوال، جنبًا إلى جنب على سطح المكتب	`flex-column flex-md-row`
فجوة صغيرة على الجوال، أكبر على سطح المكتب	`gap-2 gap-lg-4`

6. الصور المتجاوبة

HTML

<img src="https://via.placeholder.com/1200x600" class="img-fluid" alt="Responsive image">

▶ جرّب الكود

HTML

<img src="https://via.placeholder.com/400x400" class="img-fluid rounded-circle" alt="Circular" style="max-width: 200px;">
<img src="https://via.placeholder.com/200x200" class="img-thumbnail" alt="Thumbnail">

▶ جرّب الكود

الصنف	التأثير
`img-fluid`	عرض متجاوب
`img-thumbnail`	حدود مدورة 1px
`rounded`	زوايا مدورة

7. مرجع نقاط التوقف وأصناف أدوات العرض

(1) مرجع نقاط التوقف الكامل

اسم نقطة التوقف	الصنف	الحد الأدنى للعرض	أقصى عرض للحاوية	الأجهزة النموذجية
صغير جدًا	لا يوجد	0px	100%	هاتف عمودي
صغير	`sm`	576px	540px	هاتف أفقي
متوسط	`md`	768px	720px	أجهزة لوحية
كبير	`lg`	992px	960px	حواسيب محمولة
كبير جدًا	`xl`	1200px	1140px	شاشات سطح المكتب
كبير جدًا جدًا	`xxl`	1400px	1320px	شاشات ضخمة

(2) مرجع أصناف أدوات العرض

الصنف	التأثير	الاستخدام النموذجي
`d-none`	مخفي دائمًا	إخفاء عنصر
`d-block`	عرض على مستوى الكتلة دائمًا	إظهار عنصر
`d-inline`	عرض مضمّن دائمًا	نص مضمّن
`d-inline-block`	inline-block دائمًا	أيقونة + نص
`d-flex`	حاوية flex	حاوية تخطيط
`d-none d-md-block`	مخفي على الجوال، مرئي على الجهاز اللوحي+	شريط جانبي متجاوب
`d-block d-md-none`	مرئي على الجوال، مخفي على الجهاز اللوحي+	قائمة همبرغر
`d-none d-print-block`	مرئي فقط عند الطباعة	تخطيط الطباعة

▶ مثال: معرض صور متجاوب

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Gallery</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="text-center mb-4">Responsive Image Gallery</h3>
    <div class="row g-3">
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/0d6efd/fff?text=1" class="img-fluid rounded" alt="img1">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/198754/fff?text=2" class="img-fluid rounded" alt="img2">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/dc3545/fff?text=3" class="img-fluid rounded" alt="img3">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/ffc107/000?text=4" class="img-fluid rounded" alt="img4">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/6f42c1/fff?text=5" class="img-fluid rounded" alt="img5">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/20c997/fff?text=6" class="img-fluid rounded" alt="img6">
      </div>
    </div>
    <p class="text-muted text-center mt-3">col-6 → col-md-4 → col-lg-3, each image uses img-fluid for responsiveness</p>
  </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>Responsive Typography</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="text-center text-md-start mb-4">Responsive Typography</h3>

    <p class="fs-6 fs-md-5 fs-lg-4 text-center text-md-start">
      Font size increases with screen size: Mobile fs-6 → Tablet fs-5 → Desktop fs-4.<br>
      <code>.fs-6 .fs-md-5 .fs-lg-4</code>
    </p>

    <hr>

    <p class="text-muted text-md-primary text-lg-success text-center text-md-start">
      Responsive text color: Mobile gray → Tablet blue → Desktop green.<br>
      <code>.text-muted .text-md-primary .text-lg-success</code>
    </p>

    <hr>

    <div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-between align-items-center bg-light p-3 rounded">
      <span class="badge bg-primary fs-6 fs-md-5 mb-2 mb-md-0">Badge One</span>
      <span class="badge bg-success fs-6 fs-md-5 mb-2 mb-md-0">Badge Two</span>
      <span class="badge bg-danger fs-6 fs-md-5">Badge Three</span>
    </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>Responsive Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <!-- Hero with responsive padding -->
    <div class="bg-primary text-white p-3 p-md-5 rounded text-center text-md-start">
      <h1 class="display-6">Responsive Spacing</h1>
      <p class="mb-0">Mobile p-3 (16px), Desktop p-5 (48px)</p>
    </div>

    <!-- Stacked sections -->
    <section class="my-4 p-3 p-lg-4 bg-light rounded">
      <h5>Section One</h5>
      <p>my-4 ensures vertical spacing, p-3 for mobile padding, p-lg-4 for large screen padding.</p>
    </section>

    <section class="my-4 p-3 p-lg-4 bg-light rounded">
      <h5>Section Two</h5>
      <p class="mb-0 mb-md-2">Spacing below text is also responsive.</p>
      <p class="d-none d-md-block">This paragraph only appears on md+ screens.</p>
    </section>

    <section class="my-4 p-3 p-lg-4 bg-light rounded">
      <h5>Section Three</h5>
      <p>All sections use the same spacing classes for consistency.</p>
    </section>

    <div class="d-flex flex-column flex-md-row gap-2 gap-md-3 justify-content-md-end">
      <button class="btn btn-outline-secondary">Cancel</button>
      <button class="btn btn-primary">Submit</button>
    </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>Responsive Table</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-3">Responsive Table</h3>
    <p class="text-muted small mb-3">Hide "Department" and "Status" columns on mobile, show all on tablet+</p>

    <div class="table-responsive">
      <table class="table table-bordered">
        <thead class="table-dark">
          <tr>
            <th>#</th>
            <th>Name</th>
            <th class="d-none d-md-table-cell">Department</th>
            <th>Email</th>
            <th class="d-none d-md-table-cell">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>John Doe</td>
            <td class="d-none d-md-table-cell">Tech</td>
            <td>john@example.com</td>
            <td class="d-none d-md-table-cell"><span class="badge bg-success">Active</span></td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jane Smith</td>
            <td class="d-none d-md-table-cell">Marketing</td>
            <td>jane@example.com</td>
            <td class="d-none d-md-table-cell"><span class="badge bg-warning">Probation</span></td>
          </tr>
          <tr>
            <td>3</td>
            <td>Mike Johnson</td>
            <td class="d-none d-md-table-cell">Design</td>
            <td>mike@example.com</td>
            <td class="d-none d-md-table-cell"><span class="badge bg-danger">Resigned</span></td>
          </tr>
        </tbody>
      </table>
    </div>

    <p class="text-muted small">
      Tip: Use <code>d-none d-md-table-cell</code> to hide columns on mobile. Use <code>table-responsive</code> to prevent table overflow.
    </p>
  </div>
</body>
</html>

▶ جرّب الكود

❓ أسئلة شائعة

س ماذا يعني "الجوال أولًا"؟ لماذا تستخدم أنماط الشاشات الكبيرة لاحقات نقاط التوقف؟

ج الجوال أولًا يعني أن الأنماط الأساسية (بدون نقاط توقف) للشاشات الصغيرة، وأن الأنماط بنقاط التوقف تتجاوزها للشاشات الأكبر. مثلًا، d-none d-md-block: d-none ينطبق على جميع الشاشات (يخفي)، بينما d-md-block يتجاوز لإظهار على md فأكبر.

س ماذا لو أردت سلوكًا واحدًا بين lg و md، وآخر بين sm و xs؟

ج يستخدم Bootstrap min-width للتجاوز تصاعديًا. يمكنك كتابة d-none d-md-block d-xl-none ليعني: مخفي على xs-sm، مرئي على md-lg، مخفي على xl+.

س هل هناك فرق بين استخدام img-fluid للصور المتجاوبة واستخدام CSS max-width: 100% مباشرة؟

ج نفس الشيء في الأساس. .img-fluid هو صنف أدوات مُعد مسبقًا لـ max-width: 100%; height: auto;، مصمم للتكامل بشكل أكثر اتساقًا مع مكونات صور Bootstrap.

س هل لدى Bootstrap أصناف متعلقة بأنماط الطباعة؟

ج نعم. يوفر Bootstrap 5 سلسلة أصناف d-print-*، مثل d-print-none (مخفي عند الطباعة) و d-print-block (مرئي عند الطباعة). كما يوفر display-print-* للتحكم في قيمة العرض أثناء الطباعة. هذه الأصناف تنطبق فقط داخل وسائط الطباعة وممتازة لتحسين تخطيطات الطباعة.

س كيف أخصص نقاط التوقف؟

ج تخصيص نقاط التوقف يتطلب تعديل متغيرات Sass $grid-breakpoints و $container-max-widths (مفصل في المرحلة 5). إذا كنت تستخدم تجاوزات CSS فقط، يمكنك كتابة استعلامات وسائط مثل @media (min-width: 1600px) { ... }، لكن أصناف أدوات نقاط التوقف المخصصة (مثل d-xxl-block) لن تُولّد تلقائيًا. يُوصى باستخدام نقاط توقف Bootstrap القياسية قدر الإمكان.

📖 ملخص

لدى Bootstrap 6 نقاط توقف: xs/sm/md/lg/xl/xxl، مبنية على min-width (الجوال أولًا)
أصناف الأدوات + لاحقات نقاط التوقف = تحكم متجاوب: d-{breakpoint}-*، text-{breakpoint}-*، p-{breakpoint}-*
d-none d-md-block هو نمط تبديل العرض الأكثر شيوعًا
.img-fluid يجعل الصور متجاوبة

📝 تمارين

⭐ أنشئ شريط تنقل متجاوب: الجوال يستخدم flex-column لروابط عمودية، الجهاز اللوحي+ يستخدم flex-row لأفقي.
⭐⭐ أنشئ بطاقة متجاوبة ثلاثية المستويات: الجوال p-2، الجهاز اللوحي p-4، سطح المكتب p-5، النص متمركز على الجوال ومحاذي لليسار على سطح المكتب.
⭐⭐⭐ أنشئ جدولًا يخفي العمودين 3 و4 على الجوال (d-none d-md-table-cell) ويظهر جميع الأعمدة على سطح المكتب.

الدرس السابق: Flexbox · الدرس التالي: الشبكة

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

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

من نحن