List Group ها در واقع همان لیست های HTML هستند که بوت استرپ به شکل خاصی نمایش می دهد. این لیست ها برای نمایش مجموعه از از موارد مختلف مورد استفاده قرار می گیرند. ساده ترین نوع این لیست ها در بوت استرپ را با استفاده از یک <ul> با کلاس list-group. و چند عنصر <li> با کلاس list-group-item. می سازیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!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. را به یکی از موارد لیست زیر اضافه کرده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!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 inaList 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. استفاده کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!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">
<ahref="#"class="list-group-item list-group-item-action">First item</a>
<ahref="#"class="list-group-item list-group-item-action">Second item</a>
<ahref="#"class="list-group-item list-group-item-action">Third item</a>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
کلاس disabled
کلاس disabled. دقیقا بر خلاف کلاس active عمل می کند. اگر در لیست خود موردی داشته باشیم که بخواهیم غیرفعال باشد (مثلا لینکی که فعلا در دسترس نیست) می توانیم از کلاس disabled. استفاده کنیم تا به کاربر بگوییم فعلا این قابلیت موجود نیست. به مثال زیر دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!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 WithaDisabled Item</h2>
<p>The disabled classaddsalighter text color tothe disabled item.Andifused on links,it will remove the defaulthover effect.</p>
<div class="list-group">
<ahref="#"class="list-group-item disabled">Disabled item</a>
<ahref="#"class="list-group-item disabled">Disabled item</a>
<ahref="#"class="list-group-item">Third item</a>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حذف حاشیه ها
تا این جای کار تمام لیست های ما به طور پیش فرض دارای حاشیه بوده اند اما می توانیم این حاشیه را با استفاده از کلاسlist-group-flush. حذف کنیم. نحوه ی انجام این کار بسیار ساده است:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!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>Usethe.list-group-flush classtoremove some borders androunded 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.اضافه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!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 classdisplays 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
ما این کلاس ها را در قالب یک مثال آورده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!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
همین لیست ها به صورت لینک دار نیز در دسترس شما هستند. کافی آن ها را به این صورت بنویسید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!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 tosee the hover effect:</p>
<div class="list-group">
<ahref="#"class="list-group-item list-group-item-action">Action item</a>
<ahref="#"class="list-group-item list-group-item-action list-group-item-success">Success item</a>
<ahref="#"class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
<ahref="#"class="list-group-item list-group-item-action list-group-item-info">Info item</a>
<ahref="#"class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
<ahref="#"class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
<ahref="#"class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
<ahref="#"class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
<ahref="#"class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ترکیب لیست ها در بوت استرپ با نشان ها (badge)
اگر کلاس badge. را به عنوان یک کلاس کمکی به لیست ها بدهید، می توانید آن ها را دارای نشانه کنید. ممکن است استفاده ی عملی این روش برایتان سوال برانگیز باشد؛ یکی از مثال های رایج آن ایجاد تب های شمارنده (مانند تب های افقی در Gmail) است. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!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 toadd 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
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟