پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
در این بخش میخواهیم کلاس های گروه های لیست در بوت استرپ را آموزش دهیم.
با استفاده از کلاس گروه های لیست آیتم ها را به شکل مناسبی درون لیست نمایش خواهیم داد.
در بوت استرپ کلاس های آماده ی این گروه های لیست موجود است.
با سلام خدمت شما همراهان عزیز وب سایت پرنیان طرح
با آموزشی دیگر از مبحث 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]
نشان ها را در گروه لیست تصویر زیر مشاهده نمایید:
