انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 27
دورة بوتستراب 5

مجموعات القوائم في بوتستراب 5Bootstrap 5 List Groups

تعلّم بناء مجموعات القوائم في بوتستراب 5.3 بحالاتها النشطة والمعطلة، وقوائم الروابط والأزرار التفاعلية، والقوائم المدمجة داخل البطاقات، والترقيم التلقائي، ودمج الشارات.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
1
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

Basic List Group Markup بناء مجموعة القائمة الأساسية

تُعد مجموعات القوائم في Bootstrap 5.3 أداة مثالية لعرض قوائم الإعدادات، وسجلات النشاط، وفهارس الدروس، وصناديق الرسائل الواردة بمظهر منظم يفوق القوائم النقطية الخام. تبدأ البنية الأساسية بوسم <ul class="list-group"> يضم عناصر أبناء تحمل الكلاس .list-group-item، حيث يرسم بوتستراب إطاراً موحداً مستدير الأطراف وفواصل أفقية رشيقة بين كل عنصر والذي يليه.

مخطط مجموعات القوائم التفاعلية والمدمجة والمرقمة والأفقية في بوتستراب 5.3
HTML 
<ul class="list-group">
  <li class="list-group-item">Account Security</li>
  <li class="list-group-item">API Access Tokens</li>
  <li class="list-group-item">Webhook Endpoints</li>
</ul>
جرّب بنفسك

Active Disabled List Items العنصر النشط والعنصر المعطل

لتمييز العنصر المختار حالياً بلون الهوية الأساسي أضف الكلاس .active مع سمة الإتاحة aria-current="true"؛ ولتعطيل عنصر غير متاح مؤقتاً بلون باهت ومنع النقر عليه أضف الكلاس .disabled مع aria-disabled="true" (أو السمة الأصيلة disabled إذا كان العنصر وسم <button>).

Flush Borderless Lists القوائم المدمجة بدون إطار

إذا وضعت قائمة مؤطرة عادية داخل مكوّن .card الذي تعلمناه في الدرس السابق، سيتكون إطاران مزدوجان قبيحان على الجانبين! يعالج الكلاس .list-group-flush ذلك بحذف الإطار الخارجي واستدارة الزوايا، لتلتحم فواصل القائمة الأفقية بحواف البطاقة بتناغم معماري رائع.

HTML 
<div class="card">
  <div class="card-header fw-bold">Server Regions</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Riyadh (me-central)</li>
    <li class="list-group-item">Frankfurt (eu-central)</li>
  </ul>
</div>
جرّب بنفسك

Numbered List Groups مجموعات القوائم المرقمة تلقائياً

لعرض خطوات مرتبة تسلسلياً — مثل خطوات تثبيت حزمة أو ترتيب المتصدرين — استخدم الوسم الدلالي <ol class="list-group list-group-numbered">؛ حيث يولد بوتستراب الترقيم تلقائياً أمام كل عنصر حتى عندما يحتوي العنصر على تخطيط Flexbox متعدد الأسطر وعناوين فرعية.

Horizontal List Groups مجموعات القوائم الأفقية المتجاوبة

يحوّل الكلاس .list-group-horizontal اتجاه رص العناصر من العمودي إلى الصف الأفقي، والأفضل عملياً استخدام صيغته المتجاوبة مثل .list-group-horizontal-md لتبقى القائمة عمودية مريحة على الهاتف وتتحول إلى شريط أفقي على الشاشات المتوسطة، مع إمكانية إضافة .flex-fill على العناصر لتقسيم العرض بالتساوي.

Colored Lists with Badges تلوين القوائم ودمج الشارات

توفر كلاسات .list-group-item-primary حتى .list-group-item-dark تلويناً دلالياً ناعماً لتمييز سجلات النجاح أو التحذير. وبدمج Flexbox عبر .d-flex .justify-content-between .align-items-center على كل عنصر مع مكوّن .badge .rounded-pill نحصل على قوائم إحصائية احترافية تدفع العداد تلقائياً إلى أقصى الطرف المقابل في اللغتين العربية والإنجليزية!

نمط القائمةالكلاس القياسي في Bootstrap 5.3الاستخدام الأمثل
قائمة تفاعلية.list-group-item-action على <a> أو <button>قوائم الإعدادات الجانبية ولوحات التنقل
قائمة مدمجة بلا إطار.list-group-flushالدمج المباشر داخل حاويات .card
قائمة مرقمة تلقائياًol.list-group.list-group-numberedخطوات التثبيت المتسلسلة وقوائم الترتيب
قائمة أفقية متجاوبة.list-group-horizontal-mdملخصات المؤشرات التي تتكدس على الهاتف
HTML 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between
    align-items-center">
    Open Tickets
    <span class="badge text-bg-primary
      rounded-pill">14</span>
  </li>
</ul>
جرّب بنفسك
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

أتقنت في هذا الدرس تصميم مجموعات القوائم في بوتستراب 5.3، بما يشمل الحالات النشطة والمعطلة، وقوائم الروابط والأزرار التفاعلية، والقوائم المدمجة داخل البطاقات، والترقيم التلقائي، والقوائم الأفقية المزودة بالشارات. الخطوة التالية: انتقل الآن إلى الدرس الثامن والعشرين لتعلّم البنية المحدثة لأشرطة التقدم Progress Bars في الإصدار 5.3 والأشرطة المكدسة والمتحركة وتحديثها برمجياً.

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 List Group Action عنصر القائمة التفاعلي
كلاس يضاف إلى روابط أو أزرار القائمة لمنحها استجابة بصرية كاملة عند التمرير والتركيز والنقر.
للمراجعة
02 Flush List Group مجموعة القائمة المدمجة
نمط يزيل الإطار الجانبي واستدارة الزوايا لدمج القائمة بسلاسة داخل البطاقات والحاويات.
للمراجعة
03 Numbered List Group القائمة المرقمة تلقائياً
قائمة مرتبة تولد أرقاماً متسلسلة عبر عدادات CSS دون تعارض مع تخطيطات Flexbox الداخلية.
للمراجعة
04 Horizontal List Group مجموعة القائمة الأفقية
كلاس يعرض عناصر القائمة جنباً إلى جنب أفقياً مع دعم نقاط التوقف المتجاوبة.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 ARIA ARIA
Accessible Rich Internet Applications
توفر سمات تحديد العنصر الحالي والعنصر المعطل داخل القوائم لقارئات الشاشة.
للمراجعة
02 CSS CSS
Cascading Style Sheets
تشغّل آلية الترقيم التلقائي للعناصر عبر خاصية counter-increment.
للمراجعة
03 KPI KPI
Key Performance Indicator
مؤشرات الإحصائيات السريعة التي تعرضها القوائم الأفقية أو المزودة بالشارات.
للمراجعة
04 RTL RTL
Right-to-Left
يعكس زوايا القوائم الأفقية ومواضع الشارات الجانبية تلقائياً في العربية.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

من الفهم للتطبيق

مهامك قبل الاختبار

خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.

0/2مهام منجزة

  1. أنشئ بطاقة تضم رأساً card-header متبوعاً بقائمة ul.list-group.list-group-flush من ثلاثة عناصر متلاصقة بالحواف.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  2. صمّم قائمة روابط تفاعلية تجمع list-group-item-action ومحاذاة Flexbox مع شارة عداد كبسولية في الطرف المقابل.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

8أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي8 أسئلة تنتظرك
01

أي كلاس يُضاف إلى عناصر <a> أو <button> داخل .list-group لمنحها تفاعلية التمرير والتركيز القياسية؟

يوفر الكلاس .list-group-item-action تنسيق التمرير والتركيز الكامل دون الحاجة لكلاس .btn.

02

ينصح توثيق Bootstrap 5 بإضافة الكلاس .btn إلى جانب .list-group-item-action على أزرار القائمة.

خطأ؛ يحذر التوثيق الرسمي صراحةً من استخدام كلاسات .btn هنا لأنها تفسد محاذاة وعرض عناصر القائمة.

03

أي كلاس يزيل الإطار الخارجي واستدارة الزوايا لدمج القائمة بسلاسة داخل مكوّن .card؟

الكلاس .list-group-flush مخصص لدمج القوائم حافةً بحافة داخل البطاقات والحاويات.

04

كيف يولّد الكلاس .list-group-numbered أرقام التسلسل التلقائية في Bootstrap 5؟

تضمن عدادات CSS بقاء الترقيم سليماً ومصطفاً حتى عندما يستخدم العنصر تخطيط Flexbox.

05

ما السمة الواجب إضافتها على العنصر الحامل لكلاس .active داخل مجموعة القائمة لدعم قارئات الشاشة؟

تُعلِم السمة aria-current="true" التقنيات المساندة بأن هذا العنصر هو الخيار النشط حالياً.

06

يجعل الكلاس .list-group-horizontal-md القائمة عمودية على شاشات الهاتف وأفقية بدءاً من الشاشات المتوسطة md فما فوق.

نعم، تتبع القوائم الأفقية فلسفة Mobile-First فتتكدس تحت نقطة التوقف وتصطف أفقياً عند بلوغها.

07

لتوزيع عناصر قائمة أفقية بعرض متساوٍ تماماً يملأ كامل السطر، أي كلاس أداة نضيفه على كل عنصر .list-group-item؟

يمنح الكلاس .flex-fill كل عنصر مرونة تمدد متساوية لتغطية كامل عرض القائمة الأفقية.

08

أي تركيبة Flexbox تدفع شارة العداد .badge إلى أقصى الطرف المقابل للنص داخل عنصر .list-group-item؟

تضع justify-content-between النص في بداية السطر والشارة في نهايته مع محاذاة رأسية متوسطة.