ورود به کارتابل مشتریان وب مهراز
لیست گروهی در Bootstrap ورژن 4
یادگیری Bootstrapلیست گروه های پایه
اساسی ترین لیست گروه یک لیست با موارد لیست است:
- First item
- Second item
- Third item
برای ایجاد یک گروه لیست اولیه، از یک عنصر <ul> با کلاس لیست گروهی و <li> عناصر با کلاس classlist-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 item
- Second item
- Third item
استفاده از کلاس .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> وضعیت غیرفعال
- Disabled item
- Second item
- Third item
برای غیرفعال کردن یک مورد، کلاس .disabled را اضافه کنید:
<ul class="list-group">
<li class="list-group-item disabled">Disabled item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul> لیست گروه با لینک
برای ایجاد یک گروه لیست با لینک ، از <div> به جای <ul> و <a> به جای <li> استفاده کنید. اگر میخواهید یک رنگ پس زمینه خاکستری در شناور داشته باشید، همچنین کلاس classlist-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> کلاسهای متنی
کلاس های متنی را می توان برای رنگ کردن آیتم های لیست استفاده کرد:
- Success item
- Secondary item
- Info item
- Warning item
- Danger item
- Primary item
- Dark item
- Light item
کلاس ها برای رنگ آمیزی آیتم های لیست عبارتند از: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark and 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-success">Success item</a>
<a href="#" class="list-group-item list-group-item-secondary">Secondary item</a>
<a href="#" class="list-group-item list-group-item-info">Info item</a>
<a href="#" class="list-group-item list-group-item-warning">Warning item</a>
<a href="#" class="list-group-item list-group-item-danger">Danger item</a>
<a href="#" class="list-group-item list-group-item-primary">Primary item</a>
<a href="#" class="list-group-item list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-light">Light item</a>
</div>
نظر شما
>