گروه های لیست (List Groups) در بوت استرپ

با سلام خدمت شما همراهان عزیز وب سایت پرنیان طرح

با آموزشی دیگر از مبحث Bootstrap 4 در خدمت شما همراهان این سایت هستیم.

در این آموزش مبحث List Groups در بوت استرپ ۴ خواهیم آموخت.

گروه های لیست ساده (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]

تصویر یک گروه لیست ساده:

basic list group

حالت فعال (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]

تصویر حالت فعال گروه لیست :

active list groups

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

برای ایجاد یک گروه لیست با موارد مرتبط ، به جای <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]

تصویر مثال بالا:

list group with linked

آیتم های غیر فعال(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]

تصویر آیتم های غیرفعال:

disabled item

حذف حاشیه ها (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]

تصویر زیر را ببینید:

remove border

گروه های لیست افقی (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]

تصویر گروه های لیست افقی:

horizontal list groups

کلاسهای متنی (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]

تصویر زیر را ببینید:

contexual classes

لیست های گروه با نشان ها (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]

نشان ها را در گروه لیست تصویر زیر مشاهده نمایید:

list group with badges