لیست ها در بوت استرپ

برای ایجاد یک لیست معمولی و ساده به جهت لیست کردن موارد میتوان از کد زیر استفاده کرد که این کلاس list-group حاشیه و border ایجاد میکند و در درون آن باید کلاس .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 به عنوان آیتم فعال و از کلاس disable به عنوان آیتم غیر فعال استفاده کرد:

active item:

<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>

Disabled Item:

<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>

لینک دار شدن :

برای اینکه ایتم مورد نظر لینک داشته باشد و ارجاع داده شود به صفحه مورد نظر باید از تگ <a> و ذکر لینک مورد نظر استفاده شود :

حالت hover :

برای اینکه حالت hover یا اینکه با قرار گرفتن موس روی ایتم مورد نظر به رنگ خاکستری ظاهر شود باید در تگ <a> از کلاس list-group-item-action استفاده شود.

رنگی کردن item ها :

از کلاس های .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 and list-group-item-light

میتوان به منظور رنگ دار شدن استفاده کرد.

بیشتر بخوانید : kimialearning.ir