آموزش لیست در بوت استرپ
آموزش لیست در بوت استرپ 4 بصورت کامل و مثال های متنوع . در این آموزش با کلاس های List-group ، حذف کادر دور لیست ، قرار دادن لینک در لیست و غیره همراه با مثال آشنا خواهید شد.
این آموزش متعلق به تاپ سایت 98 و از بخش آموزش بوت استرپ 4 میباشد.
کلاس List-group
از کلاس List-group برای ایجاد لیست در بوت استرپ 4 استفاده می کنیم.
ابتدا یک تگ ul باز کرده و کلاس List-group را به آن می دهیم.
سپس به آیتم های آن کلاس list-group-item را می دهیم.
کد زیر را پس از لود فایل های بوت استرپ 4 (فایل css و js) تست نمایید.
نتیجه یک باکس زیبا با کادر خواهد بود و لیست زیبای ریسپانسیو ایجاد می شود.
<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 را نیز قرار دهید.
در این صورت مشاهده می کنید که رنگ پس زمینه آن آیتم تغییر می کند.
کلاس list-group-item-action
از کلاس list-group-item-action برای تگ a و برای مشخص کربدن لینک ها استفاده می کنیم.
اگر می خواهید بجای متن در لیست ، لینک قرار دهید این از کلاس کلاس list-group-item-action استفاده نمایید.
<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 می توانید برای چنین مواردی استفاده کنید.
کلاس list-group-flush
برای حذف کادر دور لیست در بوت استرپ 4 باید از کلاس 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 رنگ پس زمینه لیست را سبز می کند.
<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 استفاده کرد.
استفاده از badge در لیست
برای استفاده از badge در لیست می بایست مطابق مثال زیر عمل کنید.
نتیجه مثال زیر یک لیست با badge میباشد .
<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 نیز می توانید استفاده کنید.
موفق باشید.
منبع: دبلیو تری اسکولز
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید