Bootstrap 4 قائمة المجموعات
مجموعات القوائم الأساسية
مجموعة القائمة الأساسية هي قائمة غير مرتبة تحتوي على عناصر قائمة:
- البند الأول
- البند الثاني
- البند الثالث
لإنشاء مجموعة قائمة أساسية ، استخدم <ul>عنصرًا مع فئة .list-group،
<li>وعناصر بها فئة .list-group-item:
مثال
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
دولة نشطة
- عنصر نشط
- البند الثاني
- البند الثالث
استخدم .activeالفصل لتمييز العنصر الحالي:
مثال
<ul class="list-group">
<li class="list-group-item
active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third 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">First item</a>
<a
href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
عنصر معطل
يضيف الفصل .disabledلون نص أفتح إلى العنصر المعطل. وعند استخدامه على الروابط ، سيزيل تأثير التمرير:
مثال
<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#"
class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
مسح / إزالة الحدود
استخدم .list-group-flushالفصل لإزالة بعض الحدود والزوايا المستديرة:
- البند الأول
- البند الثاني
- البند الثالث
- البند الرابع
مثال
<ul class="list-group
list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
مجموعات القائمة الأفقية
إذا كنت تريد عرض عناصر القائمة أفقيًا بدلاً من عرضها عموديًا (جنبًا إلى جنب بدلاً من أن تكون فوق بعضها البعض) ، فقم بإضافة .list-group-horizontalالفئة إلى .list-group:
- البند الأول
- البند الثاني
- البند الثالث
- البند الرابع
مثال
<ul class="list-group
list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth 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">Success item</li>
<li
class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li
class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li
class="list-group-item list-group-item-light">Light item</li>
</ul>
ربط العناصر بالفئات السياقية
مثال
<div class="list-group">
<a href="#" class="list-group-item
list-group-item-action">Action item</a>
<a href="#"
class="list-group-item list-group-item-action list-group-item-success">Success item</a>
<a
href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>
قائمة المجموعة بشارات
ادمج .badgeالفئات مع فئات الأدوات المساعدة / المساعدة لإضافة شارات داخل مجموعة القائمة:
- صندوق الوارد 12
- إعلانات 50
- نفاية 99
مثال
<ul class="list-group">
<li class="list-group-item d-flex
justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary
badge-pill">50</span>
</li>
<li class="list-group-item
d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
نصيحة: اقرأ المزيد عن فصول Bootstrap 4 Utility / Helper في BS4 Utilities Chapter .