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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

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

ساده‌ترین گروه لیست، لیست نامرتب با آیتم‌های آن است:[۱]

برای ایجاد یک گروه<ul>ت ساده، از عنصر <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>


گروه لیست ها با نشان ها

می‌توانید به یک گروه لیست نشان‌ها را نیز اضافه کنید. نشان‌ها بطور خودکار در سمت راست قرار می‌گیرند:

برای ایجاد نشان، عنصر <span> را با کلاس .badge درون آیتم لیست اضافه کنید:

مثال

<ul class="list-group">
  <li class="list-group-item">New <span class="badge">12</span></li>
  <li class="list-group-item">Deleted <span class="badge">5</span></li>
  <li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>

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

آیتم‌ها در یک گروه لیست می‌توانند ابرلینک هم باشند. به این ترتیب یک پس زمینه خاکستری در صورت پیمایش ماوس (hover) به آن اضافه می‌شود:

برای ایجاد یک گروه لیست با آیتم‌های لینک شده، از تگ <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 را درون آیتم گروه لیست اضافه کرد.

بوت استرپ کلاس‌های .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>


منابع آموزشی