مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. تا قبل از معرفی تکنیک Responsive و فریم ورک های آماده ی آن نظیر bootstrap، بیشتر از جداول (table) برای دسته بندی گزینه ها ، عناصر و حالات مختلف وب سایت ها، استفاده می شد. اما با ظهور Responsive و انتشار فریم ورک های bootstrap ، گزینه های بیشتری از جمله list group در bootstrap 3 ، برای گروه بندی مطالب صفحات وب ارائه شد، لیست گروه ها در bootstrap 3 ، ابزاری برای گروه بندی های ساده و متنوع مطالب صفحات وب است. برای آشنایی بیشتر با لیست گروه ها (list group) در bootstrap 3 در ادامه ی این آموزش، با ما همراه باشید.
لیست گروه ها (list group) در bootstrap 3
اساسی ترین list group در bootstrap 3 ، یک لیست نا منظم با آیتم های لیست است:
- First item
- Second item
- Third item
برای ایجاد طرح ساده و اصلی لیست گروه در bootstrap 3 ، از یک عنصر <ul> با کلاس .list-group و عناصر <li> با کلاس .list-group-item استفاده کنید:
ترکیب list group با badge
شما همچنین می توانید عناصر badge را با list group ترکیب کنید(badge طور اتوماتیک در سمت راست لیست قرار می گیرد):
- ۱۲ New
- ۵ Deleted
- ۳ Warnings
برای درج badge به list group از کلاس .badge در آیتم های لیست استفاده کنید:
مثال :
| <ul class="list-group"> <li class="list-group-item">New <span class="badge">12</span></li> <li class="list-group-item">Deleted <span class="badge">5</span></li> <li class="list-group-item">Warnings <span class="badge">3</span></li> </ul> |
لینک کردن آیتم ها در لیست گروه (list group)
همچنین می توانید به آیتم های لیست لینک اضافه کنید. در این صورت با حرکت اشاره گر ماوس روی هر آیتم، زمینه ی آن به خاکستری تغییر می کند.
برای لینک کردن آیتم های لیست، از عنصر <div> به جای <ul> و <a> به جای <li> استفاده کنید.
مثال :
| <div class="list-group"> <a href="#" class="list-group-item">First item</a> <a href="#" class="list-group-item">Second item</a> <a href="#" class="list-group-item">Third item</a> </div> |
وضعیت active
استفاده از کلاس .active در آیتم های لیست گروه، باعث highlight شدن آیتم جاری می شود.
مثال :
| <div class="list-group"> <a href="#" class="list-group-item active">First item</a> <a href="#" class="list-group-item">Second item</a> <a href="#" class="list-group-item">Third item</a> </div> |
وضعیت غیر فعال (disabled)
لیست گروه زیر یک آیتم غیر فعال دارد:
برای غیر فعال کردن یک آیتم در list group ، کلاس .disabled را مانند نمونه ی زیر، اضافه کنید:
مثال :
| <div class="list-group"> <a href="#" class="list-group-item disabled">First item</a> <a href="#" class="list-group-item">Second item</a> <a href="#" class="list-group-item">Third item</a> </div> |
کلاس های متنی
در لیست گروه از کلاس های متنی می توان برای رنگ بندی آیتم های list group استفاده کرد.
- First item
- Second item
- Third item
- Fourth item
کلاسهایی که برای رنگ بندی آیتم های list group در bootstrap 3 می توان استفاده کرد، شامل موارد زیر است:list-group-item-success. , list-group-item-info, list-group-item-warning و .list-group-item-danger
مثال:
مثال :
| <ul class="list-group"> <li class="list-group-item list-group-item-success">First item</li> <li class="list-group-item list-group-item-info">Second item</li> <li class="list-group-item list-group-item-warning">Third item</li> <li class="list-group-item list-group-item-danger">Fourth item</li> </ul> |
سفارشی کردن محتوای آیتم های list group
شما می توانید از هر عنصر html در محتوای آیتم های list group استفاده کنید.
برای این منظور bootstrap کلاسهای .list-group-item-heading و.list-group-item-text را ارائه داده است.
مثال:
مثال :
| <div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">First List Group Item Heading</h4> <p class="list-group-item-text">List Group Item Text</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">Second List Group Item Heading</h4> <p class="list-group-item-text">List Group Item Text</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">Third List Group Item Heading</h4> <p class="list-group-item-text">List Group Item Text</p> </a> </div> |
کلام آخر
در این آموزش با چگونگی کار با انواع لیست گروه ها در bootstrap و چگونگی استفاده از آن، بخوبی آشنا شدید. امیدواریم که از مباحث لیست گروه ها (list group) در bootstrap 3 بخوبی استفاده کرده باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
