با سلام خدمت شما همراهان عزیز وب سایت پرنیان طرح
با آموزشی دیگر از مبحث Bootstrap 4 در خدمت شما همراهان این سایت هستیم.
در این آموزش مبحث List Groups در بوت استرپ 4 خواهیم آموخت.
گروه های لیست ساده (Basic List Groups) :
ساده ترین نوع گروه های لیست به شکل مثال زیر است.
به این مثال توجه کنید:
[php]
<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>
[/php]
تصویر یک گروه لیست ساده:
حالت فعال (Active State):
از حالت active برای برجسته کردن آیتم اصلی استفاده میکنیم.
برای مثال:
[php]
<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>
[/php]
تصویر حالت فعال گروه لیست :
گروه های لیست با آیتم های لینک دار:
برای ایجاد یک گروه لیست با موارد مرتبط ، به جای <ul> از <div> و به جای <li> از <a> استفاده کنید.
در صورت تمایل از کلاس list-group-item-action. برای داشتن پس زمینه ی خاکستری هنگامی که hover میشود استفاده نمایید.
برای مثال:
[php]
<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>
[/php]
تصویر مثال بالا:
آیتم های غیر فعال(Disabled Item):
کلاس disabled. یک رنگ متن روشن تر را به مورد غیرفعال اضافه میکند.
و هنگامی که در لینک ها استفاده میشود حالت hover را ندارد.
مثال:
[php]
<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>
[/php]
تصویر آیتم های غیرفعال:
حذف حاشیه ها (Remove Borders):
از کلاس list-group-flush. برای حذف برخی از حاشیه ها و حذف گوشه های گرد استفاده کنید.
برای توضیح به این مثال توجه کنید:
[php]
<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>
[/php]
تصویر زیر را ببینید:
گروه های لیست افقی (Horizontal List Groups):
اگر بخواهید آیتم های لیست به جای عمودی به صورت افقی نمایش داده شوند کلاس list-group-horizontal. را به کلاس list-group. اضافه کنید.
مثال :
[php]
<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>
[/php]
تصویر گروه های لیست افقی:
کلاسهای متنی (Contextual Classes):
از کلاسهای متنی میتوان برای رنگی کردن آیتم ها استفاده کرد.
کلاس های رنگی متن عبارتند از : list-group-item-success، list-group-item-info، list-group-item-warning، و list-group-item-danger .
برای مثال کلاس های متنی رنگی زیر را ببینید:
[php]
<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>
[/php]
تصویر زیر را ببینید:
لیست های گروه با نشان ها (List Groups with Badgs):
شما همچنین میتوانید لیست های گروه با نشان ها را ایجاد کنید در مثال زیر یک گروه لیست با نشان ها را ترکیب کرده ایم:
مثال:
[php]
<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>
[/php]
نشان ها را در گروه لیست تصویر زیر مشاهده نمایید: