نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه پانزدهم (List Groups)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه پانزدهم (List Groups)

آموزش Bootstrap 4 جلسه پانزدهم (List Groups) از سری آموزش های تک قسمتی است.

 

لیست گروهی

در این جلسه قرار است درباره لیست های گروهی صحبت کنیم وقتی اسم لیست می آید فکر ما به سمت ul و li میرود که کاملا درست است اما لیست تنها به ul و li ختم نمیشود گاهی لیست شامل چند تگ a است. اما نکته ای که مهم است آن است که چگونه به کمک کلاس های بوت استرپ این لیست ها را بسازیم بوت استرپ برای لیست های گروهی چند کلاس دارد .ما برای ساخت این لیست ابتدا باید کلاس list-group را به تگ ul بدهیم و سپس کلاس list-group-item را به تگ li بدهیم . به این روش یک لیست گروهی ساده ساخته ایم برای واضح شدن میتوانید از کد زیر کمک بگیرید:

 

فعال کردن موردی از لیست

اگر قصد دارید یکی از سطر های لیست را به حالت فعال در بیاورید که حالتی مجزا از باقی لیست داشته باشد می توانید از کلاس active در تگ li و کلاس list-group-item استفاده کنید حالت فعال به رنگ آبی نمایش داده میشود برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

لیست های گروهی لینک دار

همانطور که بالاتر توضیح دادیم گاهی لیست ها تگ a هستند و قابلیت هدایت کاربر به صفحه ای را دارند اگر شما هم میخواهید از لیست استفاده کنید میتوانید از کلاس list-group-item-action در تگ a کنار کلاس list-group-item استفاده کنید . نکته ای که اینجا باید به آن توجه کنید این است که برای آنکه تگ های a  به صورت لیست در بیایند باید آنها را در تگ div با کلاس list-group قرار دهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

لیست گروهی flush

flush به حالتی گفته میشود که در آن حاشیه های لیست ها حذف شده و تنها حاشیه پایینی باقی میماند برای ایجاد کردن این حالت کافیست از کلاس list-group-flush در تگ ul خود کنار کلاس list-group-item استفاده کنید برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

لیست گروهی افقی

تا اینجای کار تمام لیست هایی که ساختیم عمودی بودند اگر قصد ساخت لیست افق دارید بوت استرپ کلاس آن را برای شما ساخته است کافیست کلاس list-group-horizontal را در تگ ul خود در کنار کلاس list-group قرار دهید و به راحتی لیست خود را از حالت عمودی به حالت افقی تغییر دهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

کلاس های رنگی در لیست گروهی

درست است لیست های گروهی نیز از کلاس های رنگی پشتیبانی میکنند کافیست کلاس list-group-item را به کلاس های رنگی اضافه کنید به عنوان مثال برای رنگ سبز باید list-group-item-success را به تگ li خود اضافه کنید ما برای شما کلاس های رنگی را لیست میکنیم و رنگ هرکدام را توضیح میدهیم:

  • list-group-item-success : به کمک این کلاس میتوانید رنگ سبز را به لیست اضافه کنید.
  • list-group-item-secondary : این کلاس رنگ خاکستری میسازد.
  • list-group-item-info : رنگ این کلاس آبی است.
  • group-item-warning :به کمک این کلاس میتوانید رنگ نارنجی به لیست بدهید.
  • list-group-item-danger :این کلاس رنگ قرمز میسازد.
  • list-group-item-primary : این کلاس رنگ آبی کمرنگ ایجاد میکند.
  • list-group-item-dark :این کلاس رنگ تیره نزدیک به مشکی را ایجاد میکند.
  • list-group-item-light : این کلاس رنگ روشن نزدیک به سفید میسازد.

برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

لیست گروهی با قابلیت hover

اگر میخواهید با قرار گرفتن موس روی لیست ها تغییر حالت در آن ها ببینید کافیست در کنار کلاس list-group-item و کلاس های رنگی کلاس list-group-item-action را نیز اضافه کنید به همین راحتی میتوانید قابلیت تغییر ظاهر در لیست های خود به وجود آورید برای واضح شدن موضوع میتوانید از کد زیر استفاده کنید:

 

لیست گروهی با badge

در جلسات قبل درباره badge صحبت کردیم شما میتوانید به راحتی در لیست های خود از آن استفاده کنید ما مستقیم به سراغ کد رفته و نحوه استفاده از badge را در کد به شما نشان میدهیم:

 

همچنین برای راحتی شما کل مباحث آموزش را در کد زیر جای داده ایم:

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه چهاردهم (Pagination)

آموزش Bootstrap 4 جلسه شانزدهم (Card)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

 

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (2 رای, میانگین: 5٫00 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه پانزدهم (List Groups): نوع فایل:mp4 حجم فایل:25.44 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

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

*

code

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