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

Bootstrap: Carousel وModal

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

1. مقدمة

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

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

(3) المشكلة

تحتاج صفحة تفاصيل منتج Alice إلى Carousel صور لعرض زوايا متعددة للمنتج، وModal "عرض سريع" ينبثق بتفاصيل المنتج — يعمل المكوّنان معًا لإنشاء تجربة مستخدم احترافية دون كتابة JavaScript مخصص.

(4) الحل

الـ Carousel وModal من أكثر مكوّنات JavaScript التفاعلية شيوعًا في Bootstrap. يُستخدم الـ Carousel لتدوير الصور أو المحتوى، بينما يُستخدم Modal لعرض مربع حوار أو نموذج أو رسالة تأكيد.

لفهم الفكرة: الـ Carousel = عرض شرائح تلقائي، الـ Modal = مربع حوار مؤقت يتراكب فوق الصفحة الحالية.

(5) الفائدة

استخدام الـ Carousel وModal معًا يتيح لك إنشاء عرض منتجات احترافي دون كتابة أي JavaScript.

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carousel Demo</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">
    <div id="demoCarousel" class="carousel slide" data-bs-ride="carousel">

      <div class="carousel-indicators">
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="2"></button>
      </div>

      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/800x400/0d6efd/fff?text=Slide+1" class="d-block w-100" alt="Slide 1">
          <div class="carousel-caption d-none d-md-block">
            <h5>First Slide</h5>
            <p>Welcome to Bootstrap Carousel.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/198754/fff?text=Slide+2" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/dc3545/fff?text=Slide+3" class="d-block w-100" alt="Slide 3">
        </div>
      </div>

      <button class="carousel-control-prev" type="button" data-bs-target="#demoCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#demoCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ جرّب الكود

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

العنصر الفئة/data-* الوصف
الحاوية carousel slide حاوية الـ Carousel؛ المعرّف يُستخدم للربط
المؤشرات carousel-indicators النقاط السفلية للقفز إلى شريحة
حاوية الشرائح carousel-inner تلفّ جميع الشرائح
شريحة مفردة carousel-item محتوى كل شريحة
الشريحة النشطة carousel-item active الشريحة المعروضة حاليًا
التسمية carousel-caption نص متراكب على الصورة
HTML 
<!-- تشغيل تلقائي كل ثانيتين (افتراضي: 5000ms) -->
<div id="carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">

<!-- انتقال بتلاشي بدلاً من الانزلاق -->
<div id="carousel" class="carousel slide carousel-fade">
▶ جرّب الكود

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

3. الـ Modal

HTML 
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch Demo Modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5">Modal Title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>This is the modal body content. You can put any HTML here.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
▶ جرّب الكود

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

(1) بنية الـ Modal

العنصر الفئة الوصف
الخلفية المعتمة modal fade الغطاء الخلفي شبه الشفاف
الحوار modal-dialog يتحكم في الحجم والتوسيط العمودي
المحتوى modal-content حاوية اللوحة البيضاء
الترويسة modal-header العنوان + زر الإغلاق
الجسم modal-body منطقة المحتوى الرئيسية
التذييل modal-footer مجموعة أزرار الإجراءات

4. أحجام ومحاذاة الـ Modal

HTML 
<div class="modal-dialog modal-sm">Small</div>
<div class="modal-dialog modal-lg">Large</div>
<div class="modal-dialog modal-xl">Extra large</div>
<div class="modal-dialog modal-dialog-centered">Vertically centered</div>
<div class="modal-dialog modal-dialog-scrollable">Scrollable body</div>
<div class="modal-dialog modal-fullscreen-md-down">Full screen on mobile</div>
▶ جرّب الكود

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

الفئة العرض حالة الاستخدام
modal-sm 300px حواريات التأكيد
افتراضي 500px نماذج عامة
modal-lg 800px نماذج كبيرة
modal-xl 1140px محتوى كامل الحجم
modal-fullscreen 100vw ملء الشاشة على الجوال
HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Carousel</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">
    <div id="productCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="3000">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="2"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/800x400/0d6efd/fff?text=iPhone+15" class="d-block w-100" alt="Product 1">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
            <h5>iPhone 15 Pro</h5>
            <p>Starting at $999 — A17 Pro chip, titanium design.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/198754/fff?text=MacBook+Air" class="d-block w-100" alt="Product 2">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
            <h5>MacBook Air M3</h5>
            <p>Lightweight power — 18hr battery, 15-inch display.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/dc3545/fff?text=AirPods+Pro" class="d-block w-100" alt="Product 3">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
            <h5>AirPods Pro 2</h5>
            <p>Adaptive audio, noise cancellation, USB-C.</p>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ جرّب الكود

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

▶ مثال: Modal مع نموذج مضمّن

HTML 
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#feedbackModal">
  Leave Feedback
</button>

<div class="modal fade" id="feedbackModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Send Feedback</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label class="form-label">Your Name</label>
            <input type="text" class="form-control" placeholder="Enter name">
          </div>
          <div class="mb-3">
            <label class="form-label">Rating</label>
            <select class="form-select">
              <option selected>5 - Excellent</option>
              <option>4 - Good</option>
              <option>3 - Average</option>
              <option>2 - Poor</option>
              <option>1 - Terrible</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Message</label>
            <textarea class="form-control" rows="3" placeholder="Tell us about your experience..."></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</div>
▶ جرّب الكود

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

HTML 
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#carouselModal">
  View Gallery
</button>

<div class="modal fade" id="carouselModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Product Gallery</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0">
        <div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://via.placeholder.com/800x500/0d6efd/fff?text=Photo+1" class="d-block w-100" alt="Photo 1">
            </div>
            <div class="carousel-item">
              <img src="https://via.placeholder.com/800x500/198754/fff?text=Photo+2" class="d-block w-100" alt="Photo 2">
            </div>
            <div class="carousel-item">
              <img src="https://via.placeholder.com/800x500/dc3545/fff?text=Photo+3" class="d-block w-100" alt="Photo 3">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
▶ جرّب الكود

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

▶ مثال: Modal بخلفية ثابتة

HTML 
<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#staticModal">
  Open with Static Backdrop
</button>

<div class="modal fade" id="staticModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content text-center">
      <div class="modal-body py-4">
        <div class="display-6 text-warning mb-3">⚠️</div>
        <h5>Delete Account?</h5>
        <p class="text-muted small">This action cannot be undone.</p>
        <div class="d-grid gap-2">
          <button class="btn btn-danger">Confirm Delete</button>
          <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
▶ جرّب الكود

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

100% 
flowchart TD
    subgraph Carousel
        A[carousel slide] --> B[carousel-indicators (Indicators)]
        A --> C[carousel-inner (Slides Container)]
        C --> D[carousel-item active (Current Slide)]
        C --> E[carousel-item (Other Slides)]
        A --> F[carousel-control-prev/next (Previous/Next Arrows)]
        D --> G[carousel-caption (Caption)]
    end
    subgraph Modal
        H[modal fade (Backdrop)] --> I[modal-dialog (Dialog)]
        I --> J[modal-content (Content Panel)]
        J --> K[modal-header (Header)]
        J --> L[modal-body (Body)]
        J --> M[modal-footer (Footer)]
    end
    N[User Click] --> O{Target}
    O -->|Carousel Indicator| B
    O -->|Carousel Arrow| F
    O -->|Open Button| H
    O -->|Close Button| K

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

السمة data-bs-* الهدف القيم
data-bs-ride="carousel" حاوية الـ Carousel carousel / false
data-bs-interval حاوية الـ Carousel مللي ثانية (افتراضي 5000)
data-bs-slide-to زر المؤشر الفهرس (0،1،2...)
data-bs-slide زر التحكم prev / next
data-bs-toggle="modal" عنصر التشغيل modal
data-bs-target="#id" عنصر التشغيل معرّف الـ Modal الهدف
data-bs-dismiss="modal" زر الإغلاق modal
data-bs-backdrop الـ Modal true / false / static
data-bs-keyboard الـ Modal true / false
data-bs-touch حاوية الـ Carousel true / false
خيار الـ Carousel سمة data التأثير
تشغيل تلقائي data-bs-ride="carousel" يبدأ التشغيل التلقائي عند تحميل الصفحة
الفاصل الزمني data-bs-interval="2000" يبدّل الشرائح كل ثانيتين
انتقال التلاشي فئة carousel-fade يتلاشى بدلاً من الانزلاق
إيقاف عند التمرير data-bs-pause="hover" يتوقف عندما يكون الماوس فوقه
السحب باللمس data-bs-touch="true" يُفعّل إيماءات السحب على الجوال
حلقة لا نهائية data-bs-wrap="true" يعود إلى الشريحة الأولى بعد الأخيرة
حجم الـ Modal الفئة العرض حالة الاستخدام
صغير modal-sm 300px حواريات التأكيد، رسائل قصيرة
افتراضي لا شيء 500px نماذج، عرض معلومات
كبير modal-lg 800px نماذج كبيرة، جداول بيانات
كبير جدًا modal-xl 1140px لوحات محتوى كاملة الحجم
ملء الشاشة modal-fullscreen 100vw تجربة جوال غامرة

❓ أسئلة شائعة

س ماذا لو كانت صور الـ Carousel بأحجام مختلفة؟
ج هناك حلان: (1) استخدام صور بحجم ثابت (يُوصى بقصها لنسبة موحدة مثل 16:9)؛ (2) استخدام object-fit: cover مع height ثابت للـ Carousel.
س هل يمكن تمرير الخلفية عندما يكون الـ Modal مفتوحًا؟
ج لا، افتراضيًا — عندما يكون الـ Modal مفتوحًا، يُضبط overflow لـ body على hidden. للسماح بالتمرير، أضف modal-dialog-scrollable إلى modal-dialog.
س هل يمكن تداخل الـ Modal؟
ج Bootstrap لا يدعم تداخل الـ Modal. يُعرض Modal واحد فقط في كل مرة. ومع ذلك، يمكنك استخدام JavaScript لفتح Modal واحد بعد إغلاق آخر.
س هل يدعم الـ Carousel التحكم بلوحة المفاتيح؟
ج نعم. عندما يكون الـ Carousel مركّزًا، مفاتيح الأسهم يمين ويسار تبدّل الشرائح. هذا مُفعّل افتراضيًا.
س هل يدعم الـ Carousel إيماءات السحب على الجوال؟
ج نعم. Carousel في Bootstrap 5 يُفعّل أحداث اللمس افتراضيًا (data-bs-touch="true")، مما يسمح للمستخدمين بالسحب يسار/يمين بأصابعهم لتبديل الشرائح على أجهزة الجوال دون تكوين إضافي.

📖 ملخص

📝 تمارين

  1. ⭐ أنشئ Carousel لعرض المنتجات: 3 صور منتجات + تسميات (carousel-caption) + مؤشرات + أسهم سابق/تالي، تبديل تلقائي كل 3 ثوانٍ.
  2. ⭐⭐ نفّذ ميزة "عرض سريع": زر على بطاقة منتج يفتح Modal يعرض صورة كبيرة للمنتج والاسم والسعر والوصف وزر شراء.
  3. ⭐⭐⭐ أنشئ Modal ملء الشاشة (على الجوال) يحتوي على نموذج تسجيل (الاسم + البريد الإلكتروني + كلمة المرور).

الدرس السابق: النماذج · الدرس التالي: Alerts

Web-Tutorial.com

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

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

100%