گروه های لیست در Bootstrap

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

ایجاد گروه های لیست با Bootstrap :

گروه های لیست اجزای بسیار مناسب و انعطاف پذیری جهت نمایش لیستی از عناصر به یک روش زیبا هستند. به بیان بسیار ساده، یک گروه لیست در واقع یک لیست نامرتب با کلاس list-group. میباشد که آیتم های موجود در لیست دارای کلاس list-group-item. هستند.







خروجی مثال بالا به شکل زیر خواهد بود :








 

گروه لیست با آیتم های لینک شده :

همچنین میتوانید با تغییرات مختصری در کد HTML آیتم های لیست را هایپرلینک کنید.
تنها تگ a را جایگزین تگ li کرده و عنصر div را به عنوان parent به جای ul به کار ببرید. بعلاوه میتوانید با اضافه کردن آیکون ها یا علامت ها به گروه های لیست ظاهر زیباتری به آن ها بدهید. علامت ها به طور خودکار در سمت راست قرار خواهند گرفت.















خروجی مثال بالا به شکل زیر خواهد بود :











نکته : با استفاده از گروه های لیست در Bootstrap میتوانید منوهای جانبی کنار صفحه ایجاد کنید. برای مثال، نمایش لیست محصولات یا دسته بندی وب سایت.
همچنین میتوانید عناصر HTML دیگر مانند Headingها و پاراگراف ها را داخل این گروه های لیست اضافه کنید.

















خروجی مثال بالا به شکل زیر خواهد بود :











 

گروه های لیست با حالت contextual :

مانند اکثر اجزاء دیگر، میتوانید جهت ایجاد تأکید بیشتر بر روی آیتم های گروه های لیست، کلاس های contextual را به آن ها اعمال کنید.











خروجی مثال بالا به شکل زیر خواهد بود :










به طور مشابه میتوانید این کلاس ها را برای گروه های لیست لینک شده هم استفاده کنید. همچنین با استفاده از کلاس active. میتوانید آیتم فعال در گروه لیست را مشخص کنید.










مطلب بعدی -> ایجاد فرم در bootstrap

---