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

بهاره حسنیبهاره حسنی
710 بازدید

در این بخش میخواهیم کلاس های گروه های لیست در بوت استرپ را آموزش دهیم.

با استفاده از کلاس گروه های لیست آیتم ها را به شکل مناسبی درون لیست نمایش خواهیم داد.

در بوت استرپ کلاس های آماده ی این گروه های لیست موجود است.

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

با آموزشی دیگر از مبحث 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

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

22+ محصولات
401+ سفارشات تکمیل شده
2086+ کاربران
399+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت