Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت پانزدهم bootstrap : نحوه ی استفاده از لیست در بوت استرپ ۴

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

295

Calendar-amico (2)

تاریخ انتشار:

17 , دی , 1398

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

در صفحات وب نیز از لیست بندی های مختلفی استفاده میشود یکی از معمول ترین و رایجترین نوع لیستی که استفاده میکنیم ، لیست شمارشی طبقه بندی نشده است.

پیشنهاد میشود پیش از ورود به این جلسه ، سایر قسمت های دوره ی بوت استرپ ۴ را مطالعه فرمایید.

اگر اطلاعی از جلسات قبلی ندارید نگران نباشید تا انتهای این مقاله سعی میکنیم در حد امکان به مطالب قبلی اشاره ای داشته باشیم.

لیست ساده

همانطور که گفتیم ساده ترین نوع لیست ها ، لیست های طبقه بندی نشده است ، برای ساخت چنین لیستی کافی است از تگ ul با کلاس .list-group و تگ li با کلاس .list-group-item به شکل زیر استفاده کنید:

حالت فعال

برای استفاده از حالت فعال کافی است کلاس .active را به تگ مورد نظر اضافه کنیم:

لیست همراه با لینک

برای استفاده از لیست های لینک دار بهتر است از تگ div بجای تگ ul استفاده کنیم و بجای li کافی است تگ a با ادرس اینترنتی مورد نظر را قرار دهیم ، با این تفاوت که بجای کلاس .list-group-item از کلاس .list-group-item-action استفاده کرد:

آیتم های غیرفعال

برای استفاده از حالت غیرفعال کافی است از کلاس .disabled استفاده کنیم :

حذف مرز ها

در مثال اول با افزودن کلاس .list-group حاشیه ای ایجاد میشد ، اما خب طبق تدابیر اندیشیده شده در بوت استرپ و گستردگی میتوانید از کلاس .list-group-flush استفاده کنید تا حاشیه دور حذف شود:

فهرست افقی

اگر تمایل به این دارید که بجای نمایش عمودی فهرست ، فهرست شما به نمای افقی تبدیل شود کافی است کلاس .list-group-horizontal را در کنار کلاس .list-group اضافه کنید:

کلاسهای متنی

از کلاسهای متنی می توان برای لیست کردن موارد استفاده کرد. کلاس های رنگ آمیزی لیست موارد عبارتند از: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-dark ,list-group-item-light,:

برای درک بهتر کلاس ها مثال زیر را اجرا نمایید :

لینک در کلاسهای متنی

لیست همراه با نشانه

برای افزودن نشانه اعداد به لیست میتوانیم از تگ span به شکل زیر استفاده کنیم:

ویدیوی قسمت پانزدهم

امیدوارم تا اینجای مقاله برای شما عزیزان مفید واقع شده باشد.

پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.

پایدار باشید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

0 پاسخ به "قسمت پانزدهم bootstrap : نحوه ی استفاده از لیست در بوت استرپ ۴"

ارسال یک پیام

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