آموزش لیست در بوت استرپ

آموزش لیست در بوت استرپ 4 بصورت کامل و مثال های متنوع . در این آموزش با کلاس های List-group ، حذف کادر دور لیست ، قرار دادن لینک در لیست و غیره همراه با مثال آشنا خواهید شد.

این آموزش متعلق به تاپ سایت 98  و از بخش آموزش بوت استرپ 4 میباشد.

کلاس List-group

از کلاس List-group برای ایجاد لیست در بوت استرپ 4 استفاده می کنیم.

ابتدا یک تگ ul باز کرده و کلاس List-group را به آن می دهیم.

سپس به آیتم های آن کلاس list-group-item را می دهیم.

کد زیر را پس از لود فایل های بوت استرپ 4 (فایل css و js) تست نمایید.

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

<ul class="list-group">
<li class="list-group-item">topsite98</li>
<li class="list-group-item">sh711</li>
<li class="list-group-item">website</li>
</ul>

کلاس active

از کلاس active برای مشخص کردن آیتم فعال استفاده می کنیم.

روش کار را در زیر می بینید. کافی است که در کنار کلاس list-group-item آیتم مورد نظر کلاس active را نیز قرار دهید.

در این صورت مشاهده می کنید که رنگ پس زمینه آن آیتم تغییر می کند.

<li class="list-group-item active">sh711</li>

کلاس list-group-item-action

از کلاس list-group-item-action برای تگ a و برای مشخص کربدن لینک ها استفاده می کنیم.

اگر می خواهید بجای متن در لیست ، لینک قرار دهید این از کلاس کلاس list-group-item-action استفاده نمایید.

<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>

کلاس disabled

از کلاس disabled برای مشخص کردن عنصر غیرفعال استفاده می کنیم.

مثلا در یک فروشگاه یک محصول موجود نیست. از کلاس disabled می توانید برای چنین مواردی استفاده کنید.

<a href="#" class="list-group-item disabled">First item</a>

کلاس list-group-flush

برای حذف کادر دور لیست در بوت استرپ 4 باید از کلاس list-group-flush استفاده کنیم.

در زیر یک لیست را مشاهده می کنید که کادر دور آن حذف شده است.

<div class="list-group list-group-flush">
<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>

تغییر رنگ لیست در بوت استرپ 4

برای تغییر رنگ لیست در بوت استرپ 4 می بایست از کلاس list-group-item با رنگ دلخواه استفاده کرد.

مثلا list-group-item-success رنگ پس زمینه لیست را سبز می کند.

<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>

رنگ لینک در لیست

برای تغییر رنگ لینک در لیست می توانید مطابق مثال زیر عمل کنید.

یعنی همزمان از دو کلاس لیست یعنی list-group-item-action و list-group-item-success یا دیگر رنگ ها استفاده کنید.

برای لینک ها باید از تگ a استفاده کرد.

<a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>

استفاده از 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>

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

موفق باشید.

منبع : دبلیو تری اسکولز نویسنده : هدایت عباسی تاریخ : 2019-05-02 20:13:26 تگ :
تاپ سایت 98 تاپ سایت 98 تاپ سایت 98