لیست گروهی در Bootstrap ورژن 4

لیست گروه های پایه

اساسی ترین لیست گروه یک لیست با موارد لیست است:

  • 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> 
مشاهده مثال

 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای وبساز