در خدمت شما هستیم با آموزش Bootstrap 4 جلسه پانزدهم (List Groups)
آموزش Bootstrap 4 جلسه پانزدهم (List Groups) از سری آموزش های تک قسمتی است.
لیست گروهی
در این جلسه قرار است درباره لیست های گروهی صحبت کنیم وقتی اسم لیست می آید فکر ما به سمت ul و li میرود که کاملا درست است اما لیست تنها به ul و li ختم نمیشود گاهی لیست شامل چند تگ a است. اما نکته ای که مهم است آن است که چگونه به کمک کلاس های بوت استرپ این لیست ها را بسازیم بوت استرپ برای لیست های گروهی چند کلاس دارد .ما برای ساخت این لیست ابتدا باید کلاس list-group را به تگ ul بدهیم و سپس کلاس list-group-item را به تگ li بدهیم . به این روش یک لیست گروهی ساده ساخته ایم برای واضح شدن میتوانید از کد زیر کمک بگیرید:
<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 در تگ li و کلاس list-group-item استفاده کنید حالت فعال به رنگ آبی نمایش داده میشود برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<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>
لیست های گروهی لینک دار
همانطور که بالاتر توضیح دادیم گاهی لیست ها تگ a هستند و قابلیت هدایت کاربر به صفحه ای را دارند اگر شما هم میخواهید از لیست استفاده کنید میتوانید از کلاس list-group-item-action در تگ a کنار کلاس list-group-item استفاده کنید . نکته ای که اینجا باید به آن توجه کنید این است که برای آنکه تگ های a به صورت لیست در بیایند باید آنها را در تگ div با کلاس list-group قرار دهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<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>
لیست گروهی flush
flush به حالتی گفته میشود که در آن حاشیه های لیست ها حذف شده و تنها حاشیه پایینی باقی میماند برای ایجاد کردن این حالت کافیست از کلاس list-group-flush در تگ ul خود کنار کلاس list-group-item استفاده کنید برای واضح شدن موضوع از کد زیر کمک بگیرید:
<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>
لیست گروهی افقی
تا اینجای کار تمام لیست هایی که ساختیم عمودی بودند اگر قصد ساخت لیست افق دارید بوت استرپ کلاس آن را برای شما ساخته است کافیست کلاس list-group-horizontal را در تگ ul خود در کنار کلاس list-group قرار دهید و به راحتی لیست خود را از حالت عمودی به حالت افقی تغییر دهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<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>
کلاس های رنگی در لیست گروهی
درست است لیست های گروهی نیز از کلاس های رنگی پشتیبانی میکنند کافیست کلاس list-group-item را به کلاس های رنگی اضافه کنید به عنوان مثال برای رنگ سبز باید list-group-item-success را به تگ li خود اضافه کنید ما برای شما کلاس های رنگی را لیست میکنیم و رنگ هرکدام را توضیح میدهیم:
- list-group-item-success : به کمک این کلاس میتوانید رنگ سبز را به لیست اضافه کنید.
- list-group-item-secondary : این کلاس رنگ خاکستری میسازد.
- list-group-item-info : رنگ این کلاس آبی است.
- group-item-warning :به کمک این کلاس میتوانید رنگ نارنجی به لیست بدهید.
- list-group-item-danger :این کلاس رنگ قرمز میسازد.
- list-group-item-primary : این کلاس رنگ آبی کمرنگ ایجاد میکند.
- list-group-item-dark :این کلاس رنگ تیره نزدیک به مشکی را ایجاد میکند.
- 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>
لیست گروهی با قابلیت hover
اگر میخواهید با قرار گرفتن موس روی لیست ها تغییر حالت در آن ها ببینید کافیست در کنار کلاس list-group-item و کلاس های رنگی کلاس list-group-item-action را نیز اضافه کنید به همین راحتی میتوانید قابلیت تغییر ظاهر در لیست های خود به وجود آورید برای واضح شدن موضوع میتوانید از کد زیر استفاده کنید:
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>
لیست گروهی با badge
در جلسات قبل درباره badge صحبت کردیم شما میتوانید به راحتی در لیست های خود از آن استفاده کنید ما مستقیم به سراغ کد رفته و نحوه استفاده از badge را در کد به شما نشان میدهیم:
<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>
همچنین برای راحتی شما کل مباحث آموزش را در کد زیر جای داده ایم:
<!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>
<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 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>
----------------------------------------------------------------------------
<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>
----------------------------------------------------------------------------
<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>
----------------------------------------------------------------------------
<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>
----------------------------------------------------------------------------
<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>
----------------------------------------------------------------------------
<div class="container">
<h2>List Group With Contextual Classes</h2>
<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>
----------------------------------------------------------------------------
<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>
----------------------------------------------------------------------------
<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>
<br>
</body>
</html>
می توانید دیگر قسمت ها را در لینک زیر ببینید:
آموزش Bootstrap 4 جلسه چهاردهم (Pagination)
آموزش Bootstrap 4 جلسه شانزدهم (Card)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.
آموزش ساخت لیست افزودن اطلاعات