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

Bootstrap: مجموعة القوائم والشارات

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

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

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

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

(3) المشكلة

يبني Charlie نظام إدارة تذاكر ويحتاج إلى عرض "قيد الانتظار (5)"، "قيد التنفيذ (3)"، "مكتمل (12)" في شريط جانبي — مجموعة كلاسيكية من مجموعات القوائم والشارات.

(4) الحل

مجموعات القوائم والشارات هي مكوّنات عرض خفيفة لكنها عملية في Bootstrap. تعرض مجموعات القوائم مجموعة من العناصر ذات الصلة، بينما تعرض الشارات الأعداد أو الحالات في الزوايا.

لفهم الفكرة: مجموعة القوائم = <ul> مُحسّنة (أنماط أفضل، تفاعلية)، الشارة = ملصق صغير (يُظهر أرقامًا/حالات، مرفق بعناصر أخرى).

(5) الفوائد

استخدام مجموعات القوائم مع الشارات يعرض بوضوح وبشكل حدسي أعداد الإشعارات المصنّفة، مما يُحسّن بشكل كبير كفاءة الحصول على المعلومات.

2. أساسيات مجموعة القوائم

HTML 
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
▶ جرّب الكود

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

▶ مثال: أساسيات مجموعة القوائم

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List Group 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 class="row">
      <div class="col-md-4">
        <h5>Basic List</h5>
        <ul class="list-group">
          <li class="list-group-item">Dashboard</li>
          <li class="list-group-item">Orders</li>
          <li class="list-group-item">Products</li>
          <li class="list-group-item">Customers</li>
        </ul>
      </div>

      <div class="col-md-4">
        <h5>Active & Disabled</h5>
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action active">Home</a>
          <a href="#" class="list-group-item list-group-item-action">Profile</a>
          <a href="#" class="list-group-item list-group-item-action disabled">Settings (locked)</a>
        </div>
      </div>

      <div class="col-md-4">
        <h5>Flush Style</h5>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Inbox <span class="badge bg-primary rounded-pill">3</span></li>
          <li class="list-group-item">Sent</li>
          <li class="list-group-item">Drafts <span class="badge bg-warning">2</span></li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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

3. تنويعات مجموعة القوائم

(1) مجموعة قوائم تفاعلية

HTML 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Active link</a>
  <a href="#" class="list-group-item list-group-item-action">Regular link</a>
  <button class="list-group-item list-group-item-action">Button as item</button>
</div>
▶ جرّب الكود

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

(2) تنويعات الألوان

HTML 
<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
</ul>
▶ جرّب الكود

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

الفئة لون الخلفية الدلالة
list-group-item-primary أزرق فاتح معلومات
list-group-item-success أخضر فاتح نجاح
list-group-item-danger أحمر فاتح خطأ
list-group-item-warning أصفر فاتح تحذير

(3) مجموعة قوائم مع شارات

HTML 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Notifications
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Messages
    <span class="badge bg-danger rounded-pill">3</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Updates
    <span class="badge bg-success rounded-pill">7</span>
  </li>
</ul>
▶ جرّب الكود

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

4. محتوى مجموعة قوائم مخصص

HTML 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">New update released</h5>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Version 2.4 includes bug fixes and performance improvements.</p>
    <small class="text-body-secondary">By Alice Chen</small>
  </a>

  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Server maintenance</h5>
      <small class="text-body-secondary">1 week ago</small>
    </div>
    <p class="mb-1">Scheduled downtime on Saturday 2:00 AM - 4:00 AM UTC.</p>
    <small class="text-body-secondary">By Bob Wang</small>
  </a>
</div>
▶ جرّب الكود

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

5. الشارات

HTML 
<h1>Example heading <span class="badge bg-secondary">New</span></h1>

<button class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
  </span>
</button>

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-warning">Warning</span>

<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-dark">Dark</span>
▶ جرّب الكود

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

(1) دلالات ألوان الشارات

الفئة الاستخدام
bg-primary ملصق افتراضي
bg-success مكتمل/ناجح
bg-danger خطأ/عدد الإخفاقات
bg-warning قيد الانتظار/يحتاج اهتمامًا
bg-info ملصق معلوماتي
bg-secondary ملصق محايد/ثانوي

6. المزيد من أمثلة مجموعة القوائم

▶ مثال: تنقل مجموعة قوائم بنمط التبويب

HTML 
<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel">Home content: welcome to the dashboard.</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel">Profile content: manage your personal info.</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel">Messages content: view your inbox.</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel">Settings content: configure preferences.</div>
    </div>
  </div>
</div>
▶ جرّب الكود

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

▶ مثال: قائمة معقدة (شارة + أيقونة)

HTML 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
    <div class="me-3 fs-5">📧</div>
    <div class="flex-grow-1">
      <div class="d-flex w-100 justify-content-between">
        <h6 class="mb-0">New message from Alice</h6>
        <small class="text-body-secondary">2 min ago</small>
      </div>
      <small class="text-body-secondary">Meeting rescheduled to 3pm.</small>
    </div>
    <span class="badge bg-danger rounded-pill ms-2">3</span>
  </a>
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
    <div class="me-3 fs-5">🔔</div>
    <div class="flex-grow-1">
      <div class="d-flex w-100 justify-content-between">
        <h6 class="mb-0">Server alert</h6>
        <small class="text-body-secondary">1 hr ago</small>
      </div>
      <small class="text-body-secondary">CPU usage exceeded 90%.</small>
    </div>
    <span class="badge bg-warning rounded-pill ms-2">5</span>
  </a>
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
    <div class="me-3 fs-5">✅</div>
    <div class="flex-grow-1">
      <div class="d-flex w-100 justify-content-between">
        <h6 class="mb-0">Deployment complete</h6>
        <small class="text-body-secondary">3 hr ago</small>
      </div>
      <small class="text-body-secondary">Version 2.4 deployed to production.</small>
    </div>
    <span class="badge bg-success rounded-pill ms-2">12</span>
  </a>
</div>
▶ جرّب الكود

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

▶ مثال: مجموعة قوائم بمربعات اختيار

HTML 
<div class="list-group">
  <label class="list-group-item d-flex align-items-center">
    <input class="form-check-input me-2" type="checkbox" value="" checked>
    HTML & CSS Basics
  </label>
  <label class="list-group-item d-flex align-items-center">
    <input class="form-check-input me-2" type="checkbox" value="">
    JavaScript Fundamentals
  </label>
  <label class="list-group-item d-flex align-items-center">
    <input class="form-check-input me-2" type="checkbox" value="" checked>
    Bootstrap 5 Framework
  </label>
  <label class="list-group-item d-flex align-items-center">
    <input class="form-check-input me-2" type="checkbox" value="">
    React & Vue.js
  </label>
  <label class="list-group-item d-flex align-items-center disabled">
    <input class="form-check-input me-2" type="checkbox" value="" disabled>
    Advanced Node.js (locked)
  </label>
</div>
▶ جرّب الكود

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

▶ مثال: مجموعة قوائم ملوّنة مخصصة

HTML 
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action list-group-item-success d-flex justify-content-between align-items-center">
    <span>✅ Task completed</span>
    <span class="badge bg-success rounded-pill">12</span>
  </button>
  <button type="button" class="list-group-item list-group-item-action list-group-item-warning d-flex justify-content-between align-items-center">
    <span>⏳ In progress</span>
    <span class="badge bg-warning rounded-pill">5</span>
  </button>
  <button type="button" class="list-group-item list-group-item-action list-group-item-danger d-flex justify-content-between align-items-center">
    <span>❌ Overdue</span>
    <span class="badge bg-danger rounded-pill">3</span>
  </button>
  <button type="button" class="list-group-item list-group-item-action list-group-item-info d-flex justify-content-between align-items-center">
    <span>ℹ️ New updates</span>
    <span class="badge bg-info rounded-pill">8</span>
  </button>
</div>
▶ جرّب الكود

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

(1) شجرة مكوّن مجموعة القوائم

100% 
flowchart TD
    A[list-group container] --> B[list-group-item list item]
    B --> C[list-group-item-action<br/>interactive]
    B --> D[list-group-item-primary<br/>color variant]
    B --> E[badge]
    A --> F[list-group-flush<br/>borderless]
    A --> G[Custom content<br/>Flex + Typography]

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

تنويع مجموعة القوائم الفئة الاستخدام
قائمة أساسية list-group + list-group-item عرض عناصر بسيطة
تفاعلية list-group-item-action التنقل، القوائم
بلا حدود list-group-flush داخل البطاقات، السيناريوهات المضغوطة
صفوف ملوّنة list-group-item-{color} تصنيف الحالات
شارة أرقام badge rounded-pill عدد، أرقام إشعارات
مربع اختيار/راديو form-check-input + list-group-item قوائم المهام، اختيار متعدد
لون الشارة الدلالة السيناريو المطبّق
bg-primary افتراضي/معلومات أعداد عادية
bg-success نجاح/مكتمل مهام مكتملة، ناجحة
bg-danger خطأ/عاجل أعداد الإخفاقات، أعداد التنبيهات
bg-warning قيد الانتظار قيد التنفيذ، بانتظار الموافقة
bg-info تلميح إشعارات جديدة، رسائل جديدة
bg-secondary ثانوي أعداد مساعدة
طريقة التنقل المزايا العيوب أفضل سيناريو
تنقل مجموعة القوائم تنسيق غني، يدعم الشارات لا يدعم التداخل قوائم الشريط الجانبي، التبويبات
Nav nav-tabs نمط تبويبات أصلي، يدعم القوائم المنسدلة لا يدعم الشارات تبديل تبويبات الصفحة
Navbar nav متجاوب، تكامل العلامة التجارية بنية معقدة التنقل الرئيسي العلوي
Dropdown مضغوط، يوفّر مساحة يُظهر العنصر الحالي فقط قائمة المستخدم، الإعدادات

❓ أسئلة شائعة

س هل يمكن تداخل مجموعات القوائم؟
ج لا، لا يُدعم التداخل. صُمّمت مجموعات القوائم لهيكل مسطح. للتسلسل الهرمي، فكّر في استخدام مكوّن Accordion في Bootstrap أو ul متداخل يدويًا.
س كيف أتحكم في نصف قطر الشارة؟
ج rounded-pill ينشئ شكل حبة الدواء (أطراف نصف دائرية)، rounded-1/2/3 درجات متفاوتة من نصف القطر، بدونها تكون مربعة افتراضيًا.
س هل يمكن استخدام مجموعة قوائم للتنقل القابل للنقر؟
ج نعم. استخدم عناصر <a> أو <button>، أضف list-group-item-action، واستخدم active للإشارة إلى العنصر المحدد حاليًا. مثالية للتنقل الجانبي.
س هل تستمر حالة active لمجموعة القوائم بعد تحديث الصفحة؟
ج لا، لا تستمر تلقائيًا. active هي فئة ثابتة. بعد التحديث، يجب إضافتها ديناميكيًا بواسطة الخادم أو JavaScript بناءً على المسار الحالي، مثلاً باستخدام مطابقة window.location.
س ما الفرق بين وضع مجموعة قوائم داخل بطاقة واستخدامها مباشرة؟
ج مجموعة القوائم داخل بطاقة تستخدم عادةً نمط list-group-flush، لتتماشى مع حواف البطاقة بلا حدود أو زوايا إضافية، لتتكامل بصريًا كوحدة واحدة. مجموعة القوائم خارج البطاقة لها حدودها وزواياها الخاصة.

📖 ملخص

📝 تمارين

  1. ⭐ أنشئ مجموعة قوائم تنقل جانبية: 5 عناصر قائمة، الصفحة الحالية مميّزة كـ active، واحدة مضبوطة كـ disabled، كل عنصر يعرض شارة عدد مقابلة على اليمين.
  2. ⭐⭐ أنشئ قائمة إشعارات باستخدام مجموعة قوائم + محتوى مخصص: كل إشعار له عنوان، طابع زمني (صغير)، معاينة جسم، ويدعم أحداث النقر.
  3. ⭐⭐⭐ أنشئ مجموعة أزرار، كل زر يعرض شارة عدد في الزاوية العلوية اليمنى، لمحاكاة "Inbox (12)"، "Pending Approval (5)"، "Drafts (3)".

الدرس السابق: البطاقات · الدرس التالي: الجداول

Web-Tutorial.com

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

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

100%