akofaraji.ir
آشنایی با List Group
نوشته شده در تاریخ 31 خرداد 1403
نظرات: 0 امتیاز: 8 زمان مطالعه: 14 دقیقه
لیست ها در بوت استرپ

 

List Group چیست؟

 

List Group ها در واقع همان لیست های HTML هستند که بوت استرپ به شکل خاصی نمایش می دهد. این لیست ها برای نمایش مجموعه از از موارد مختلف مورد استفاده قرار می گیرند. ساده ترین نوع این لیست ها در بوت استرپ را با استفاده از یک <ul> با کلاس list-group. و چند عنصر <li> با کلاس list-group-item. می سازیم:

 

مشاهده ی خروجی در JSBin

 

حالت فعال (active)

 

می توانید با استفاده از کلاس active. (مانند دیگر موارد بوت استرپ) عناصر یک list group را به حالت فعال و هایلایت شده نمایش دهید. این هایلایت شدن می تواند در موقعیت های مختلفی به درد شما بخورد؛ به طور مثال اگر لیستی داشته باشیم که کاربر بتواند از بین موارد آن موردی را انتخاب کند، مورد انتخاب شده باید active شود. ما کلاس active. را به یکی از موارد لیست زیر اضافه کرده ایم:

 

مشاهده ی خروجی در JSBin

 

List Group های لینک دار

 

اگر بخواهیم List Group هایی داشته باشیم که قابل کلیک کردن باشند (لینک دار باشند)، به جای عنصر <ul>  از <div>  و به جای <li> از <a> استفاده می کنیم. همچنین اگر می خواهید در هنگام hover (حرکت موس روی آیتم ها) رنگ پس زمینه خاکستری شود، می توانید از کلاس list-group-item-action. استفاده کنید:

 

مشاهده ی خروجی در JSBin

 

کلاس disabled

 

کلاس disabled. دقیقا بر خلاف کلاس active عمل می کند. اگر در لیست خود موردی داشته باشیم که بخواهیم غیرفعال باشد (مثلا لینکی که فعلا در دسترس نیست) می توانیم از کلاس disabled. استفاده کنیم تا به کاربر بگوییم فعلا این قابلیت موجود نیست. به مثال زیر دقت کنید:

 

مشاهده ی خروجی در JSBin

 

حذف حاشیه ها

 

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

 

مشاهده ی خروجی در JSBin

 

لیست های افقی

 

اگر به هر دلیلی در طراحی شما نیاز به لیست های افقی احساس شد (مانند مباحث طراحی واکنش گرا برای تلفن های هوشمند) جای نگرانی نیست. در این حالت می توانید کلاس list-group-horizontal. را به کلاس list-group. اضافه کنید:

 

مشاهده ی خروجی در JSBin

 

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

 

اگر یادتان باشد در قسمت های قبلی اشاره کردیم که در بوت استرپ کلاس هایی وجود دارند که دربردارنده ی معنی خاصی هستند. این دست کلاس ها را در عناصر مختلفی دیده ایم و برای لیست ها نیز از این عناصر داریم. این لیست ها عبارت اند از:

 .list-group-item-successlist-group-item-secondarylist-group-item-infolist-group-item-warning.list-group-item-danger.list-group-item-primarylist-group-item-dark و list-group-item-light

ما این کلاس ها را در قالب یک مثال آورده ایم:

 

مشاهده ی خروجی در JSBin

 

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

 

مشاهده ی خروجی در JSBin

 

ترکیب لیست ها در بوت استرپ با نشان ها (badge)

 

اگر کلاس badge. را به عنوان یک کلاس کمکی به لیست ها بدهید، می توانید آن ها را دارای نشانه کنید. ممکن است استفاده ی عملی این روش برایتان سوال برانگیز باشد؛ یکی از مثال های رایج آن ایجاد تب های شمارنده (مانند تب های افقی در Gmail) است. به مثال زیر توجه کنید:

 

مشاهده ی خروجی در JSBin

 

منبع: سایت روکسو


اگر احساس می کنید این مطلب برای شما مفید بود ، از 1 تا 10 به این مطلب امتیاز دهید

دیدگاه کاربران در مورد این مطلب

ثبت نظر
به نظر خوب میاد!
لطفا نام را وارد کنید
@
لطفا یک ایمیل منحصر به فرد و معتبر انتخاب کنید.
لطفا متن با کلمات و معانی مفهوم دار وارد نمایید