مجموعات قائمة التمهيد
مجموعات القوائم الأساسية
مجموعة القائمة الأساسية هي قائمة غير مرتبة تحتوي على عناصر قائمة:
- البند الأول
- البند الثاني
- البند الثالث
لإنشاء مجموعة قائمة أساسية ، استخدم <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>
قائمة المجموعة بشارات
يمكنك أيضًا إضافة شارات إلى مجموعة قائمة. سيتم وضع الشارات تلقائيًا على اليمين:
- 12 جديد
- 5 تم الحذف
- 3 تحذيرات
لإنشاء شارة ، قم بإنشاء <span>عنصر بالفئة .badge
داخل عنصر القائمة:
مثال
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
قائمة المجموعة مع العناصر المرتبطة
يمكن أن تكون العناصر الموجودة في مجموعة القائمة ارتباطات تشعبية أيضًا. سيضيف هذا لون خلفية رمادية عند التمرير:
لإنشاء مجموعة قائمة بالعناصر المرتبطة ، استخدم <div>بدلاً من <ul>
وبدلاً <a>من <li>:
مثال
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
دولة نشطة
استخدم .activeالفصل لتمييز العنصر الحالي:
مثال
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
عنصر معطل
تحتوي مجموعة القائمة التالية على عنصر معطل:
لتعطيل عنصر ، أضف .disabledالفصل:
مثال
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
الفئات السياقية
يمكن استخدام الفئات السياقية لتلوين عناصر القائمة:
- البند الأول
- البند الثاني
- البند الثالث
- البند الرابع
فئات عناصر قائمة التلوين هي:
.list-group-item-successو list-group-item-infoو
list-group-item-warningو .list-group-item-danger:
مثال
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
محتوى مخصص
يمكنك إضافة أي HTML تقريبًا داخل عنصر مجموعة قائمة.
يوفر Bootstrap الفئات .list-group-item-headingوالتي
.list-group-item-textيمكن استخدامها على النحو التالي:
مثال
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>