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

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

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

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

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

لیست ساده

همانطور که گفتیم ساده ترین نوع لیست ها ، لیست های طبقه بندی نشده است ، برای ساخت چنین لیستی کافی است از تگ 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 مراجعه فرمایید.

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

برچسب ها : اموزش جامع، اموزش طراحی لیست

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