المجموعات الأساسية
ومعظم مجموعة قائمة الأساسية هي قائمة غير مرتبة مع عناصر القائمة:
- البند الأول
- البند الثاني
- البند الثالث
لإنشاء مجموعة القائمة الأساسية، واستخدام <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"><span class="badge">12</span> New</li>
<li
class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</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> انها محاولة لنفسك » اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »