لیست ها در بوت استرپ | bootstrap list group

List Group چیست؟

List Group ها در واقع همان لیست های HTML هستند که بوت استرپ به شکل خاصی نمایش می دهد. این لیست ها برای نمایش مجموعه از از موارد مختلف مورد استفاده قرار می گیرند. ساده ترین نوع این لیست ها در بوت استرپ را با استفاده از یک <ul> با کلاس list-group. و چند عنصر <li> با کلاس list-group-item. می سازیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Basic List Group</h2>
  <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>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

حالت فعال (active)

می توانید با استفاده از کلاس active. (مانند دیگر موارد بوت استرپ) عناصر یک list group را به حالت فعال و هایلایت شده نمایش دهید. این هایلایت شدن می تواند در موقعیت های مختلفی به درد شما بخورد؛ به طور مثال اگر لیستی داشته باشیم که کاربر بتواند از بین موارد آن موردی را انتخاب کند، مورد انتخاب شده باید active شود. ما کلاس active. را به یکی از موارد لیست زیر اضافه کرده ایم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Active Item in a List Group</h2>
  <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>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

List Group های لینک دار

اگر بخواهیم List Group هایی داشته باشیم که قابل کلیک کردن باشند (لینک دار باشند)، به جای عنصر <ul> از <div> و به جای <li> از <a> استفاده می کنیم. همچنین اگر می خواهید در هنگام hover (حرکت موس روی آیتم ها) رنگ پس زمینه خاکستری شود، می توانید از کلاس list-group-item-action. استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>List Group With Linked Items</h2>
  <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>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

کلاس disabled

کلاس disabled. دقیقا بر خلاف کلاس active عمل می کند. اگر در لیست خود موردی داشته باشیم که بخواهیم غیرفعال باشد (مثلا لینکی که فعلا در دسترس نیست) می توانیم از کلاس disabled. استفاده کنیم تا به کاربر بگوییم فعلا این قابلیت موجود نیست. به مثال زیر دقت کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>List Group With a Disabled Item</h2>
  <p>The disabled class adds a lighter text color to the disabled item. And if used on links, it will remove the default hover effect.</p>
  <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>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

حذف حاشیه ها

تا این جای کار تمام لیست های ما به طور پیش فرض دارای حاشیه بوده اند اما می توانیم این حاشیه را با استفاده از کلاس list-group-flush. حذف کنیم. نحوه ی انجام این کار بسیار ساده است:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Flush / Remove Borders</h2>
  <p>Use the .list-group-flush class to remove some borders and rounded corners:</p>
</div>
  
<div class="container">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth item</li>
  </ul>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

لیست های افقی

اگر به هر دلیلی در طراحی شما نیاز به لیست های افقی احساس شد (مانند مباحث طراحی واکنش گرا برای تلفن های هوشمند) جای نگرانی نیست. در این حالت می توانید کلاس list-group-horizontal. را به کلاس list-group. اضافه کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Horizontal List Groups</h2>
  <p>The .list-group-horizontal class displays the list items horizontally instead of vertically:</p>
  <ul class="list-group list-group-horizontal">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth item</li>
  </ul>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

کلاس های معنی دار

اگر یادتان باشد در قسمت های قبلی اشاره کردیم که در بوت استرپ کلاس هایی وجود دارند که دربردارنده ی معنی خاصی هستند. این دست کلاس ها را در عناصر مختلفی دیده ایم و برای لیست ها نیز از این عناصر داریم. این لیست ها عبارت اند از:

.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

ما این کلاس ها را در قالب یک مثال آورده ایم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>List Group With Contextual Classes</h2>
  <ul class="list-group">
    <li class="list-group-item list-group-item-success">کلاس موفقیت</li>
    <li class="list-group-item list-group-item-secondary">کلاس ثانویه</li>
    <li class="list-group-item list-group-item-info">کلاس اطلاعات</li>
    <li class="list-group-item list-group-item-warning">کلاس هشدار</li>
    <li class="list-group-item list-group-item-danger">کلاس خطر</li>
    <li class="list-group-item list-group-item-primary">کلاس اولیه</li>
    <li class="list-group-item list-group-item-dark">کلاس تیره</li>
    <li class="list-group-item list-group-item-light">کلاس روشن</li>
  </ul>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

همین لیست ها به صورت لینک دار نیز در دسترس شما هستند. کافی آن ها را به این صورت بنویسید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Linked Items With Contextual Classes</h2>
  <p>Move the mouse over the linked items to see the hover effect:</p>
  <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>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

ترکیب لیست ها در بوت استرپ با نشان ها (badge)

اگر کلاس badge. را به عنوان یک کلاس کمکی به لیست ها بدهید، می توانید آن ها را دارای نشانه کنید. ممکن است استفاده ی عملی این روش برایتان سوال برانگیز باشد؛ یکی از مثال های رایج آن ایجاد تب های شمارنده (مانند تب های افقی در Gmail) است. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>List Group With Badges</h2>
  <p>Combine .badge classes with utility/helper classes to add badges inside the list group:</p>
  <ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Inbox
      <span class="badge badge-primary badge-pill">12</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Ads
      <span class="badge badge-primary badge-pill">50</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Junk
      <span class="badge badge-primary badge-pill">99</span>
    </li>
  </ul>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin