گروههای لیست Bootstrap 5
- پچھلے پیج پر جائیں BS5 پیج نیویگیشن
- پچھلے پیج پر جائیں BS5 کارڈ
بنیادی لیست گروپ
بنیادی لیست گروپ یہ ہے جو لسٹ آئیٹمز شامل ہیں اور سادے لسٹ میں آئیں:
اگر آپ بنیادی لیست گروپ بنانے چاہتے ہیں تو، کلاس استعمال کریں .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">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 کلاس اور utility/helper کلاس کو ملایا جائے، تو لسٹ گروپ میں بجلی کا نشان دکھایا جاسکتا ہے:
مثال
<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>
- پچھلے پیج پر جائیں BS5 پیج نیویگیشن
- پچھلے پیج پر جائیں BS5 کارڈ
