مجموعات القوائم Bootstrap 5

المجموعة الأساسية

أكثر مجموعات القوائم الأساسية هي قوائم غير مرتبة تحتوي على عناصر القائمة:

لإنشاء مجموعة قائمة أساسية، استخدم النوع .list-group من <ul> العنصر والنوع: .list-group-item من <li> العنصر:

مثال

<ul class="list-group">
  <li class="list-group-item">النقطة الأولى</li>
  <li class="list-group-item">النقطة الثانية</li>
  <li class="list-group-item">النقطة الثالثة</li>
</ul>

جربها بنفسك

الحالة النشطة

استخدم .active لإبراز المشروع الحالي، استخدم

مثال

<ul class="list-group">
  <li class="list-group-item active">المشروع النشط</li>
  <li class="list-group-item">النقطة الثانية</li>
  <li class="list-group-item">النقطة الثالثة</li>
</ul>

جربها بنفسك

مجموعة قائمة تحتوي على مشاريع مرتبطة

لإنشاء مجموعة قائمة تحتوي على مشاريع مرتبطة، استخدم <div> بديلاً عن <ul>، باستخدام <a> بديلاً عن <li>اختياريًا، إذا كنت ترغب في إضافة خلفية رمادية عند التمرير فوقها، يُرجى إضافة .list-group-item-action النوع:

مثال

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">المساهمة الأولى</a>
  <a href="#" class="list-group-item list-group-item-action">المساهمة الثانية</a>
  <a href="#" class="list-group-item list-group-item-action">النقطة الثالثة</a>
</div>

جربها بنفسك

المشروع المحظور

.disabled الصفة تُضيف لونًا أخف للنص إلى المشروع المحظور. عند استخدامها في الروابط، سيتم إزالة تأثير الاستدلال عند النقر:

مثال

<div class="list-group">
  <a href="#" class="list-group-item disabled">المشروع المحظور</a>
  <a href="#" class="list-group-item disabled">المشروع المحظور</a>
  <a href="#" class="list-group-item">النقطة الثالثة</a>
</div>

جربها بنفسك

حذف الحواف

استخدام .list-group-flush الصفة تُزيل الحواف والزوايا

مثال

<ul class="list-group list-group-flush">
  <li class="list-group-item">النقطة الأولى</li>
  <li class="list-group-item">النقطة الثانية</li>
  <li class="list-group-item">النقطة الثالثة</li>
  <li class="list-group-item">النقطة الرابعة</li>
</ul>

جربها بنفسك

المجموعة المرتبة

استخدام .list-group-numbered الصفة تُنشئ قائمة تحتوي على عناصر مرتبة数字ًا:

مثال

<ol class="list-group list-group-numbered">
  <li class="list-group-item">النقطة الأولى</li>
  <li class="list-group-item">النقطة الثانية</li>
  <li class="list-group-item">النقطة الثالثة</li>
</ol>

جربها بنفسك

المجموعة الأفقية

إذا كنت ترغب في عرض عناصر القائمة على شكل أفقي بدلاً من العمودي (متراصة بدلاً من متداخلة)، فأضف .list-group-horizontal الصفة تُضيف إلى .list-group：

مثال

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">النقطة الأولى</li>
  <li class="list-group-item">النقطة الثانية</li>
  <li class="list-group-item">النقطة الثالثة</li>
  <li class="list-group-item">النقطة الرابعة</li>
</ul>

جربها بنفسك

الصفات الإضافية

الصفات الإضافية يمكن استخدامها لتلوين عناصر القائمة:

الصفات المستخدمة لتلوين عناصر القائمة هي:

  • .list-group-item-success
  • .list-group-item-secondary
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group-item-primary
  • .list-group-item-dark
  • .list-group-item-light

مثال

<ul class="list-group">
  <li class="list-group-item list-group-item-success">النقطة الناجحة</li>
  <li class="list-group-item list-group-item-secondary">ثانوي</li>
  <li class="list-group-item list-group-item-info">معلوماتي</li>
  <li class="list-group-item list-group-item-warning">تحذيري</li>
  <li class="list-group-item list-group-item-danger">مهمة خطيرة</li>
  <li class="list-group-item list-group-item-primary">مهمة رئيسية</li>
  <li class="list-group-item list-group-item-dark">مهمة مظلمة</li>
  <li class="list-group-item list-group-item-light">مهمة فاتحة</li>
</ul>

جربها بنفسك

مشاريع الروابط مع الفئة المحددة

مثال

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">مهمة</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">نجاح</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">ثانوي</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">معلوماتي</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">تحذيري</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">عنصر خطير</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">عنصر رئيسي</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">عنصر暗ي</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">عنصر فاتح</a>
</div>

جربها بنفسك

مجموعة القوائم المزخرفة

تحويل .badge الجمع بين الفئة والفئة المساعدة/المساعدة يمكن إضافة شارة إلى مجموعة القوائم:

مثال

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    صندوق الوارد
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    رسائل البريد الإلكتروني꞉
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    سلة المهملات
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

جربها بنفسك