با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. تا قبل از معرفی تکنیک Responsive و فریم ورک های آماده ی آن نظیر bootstrap، بیشتر از جداول (table) برای دسته بندی گزینه ها ، عناصر و حالات مختلف وب سایت ها، استفاده می شد. اما با ظهور Responsive و انتشار فریم ورک های bootstrap ، گزینه های بیشتری از جمله list group در bootstrap 3 ، برای گروه بندی مطالب صفحات وب ارائه شد، لیست گروه ها در bootstrap 3 ، ابزاری برای گروه بندی های ساده و متنوع مطالب صفحات وب است. برای آشنایی بیشتر با لیست گروه ها (list group) در bootstrap 3 در ادامه ی این آموزش، با ما همراه باشید.
اساسی ترین list group در bootstrap 3 ، یک لیست نا منظم با آیتم های لیست است:
برای ایجاد طرح ساده و اصلی لیست گروه در bootstrap 3 ، از یک عنصر <ul>
با کلاس .list-group
و عناصر <li
> با کلاس .list-group-item
استفاده کنید:
شما همچنین می توانید عناصر badge را با list group ترکیب کنید(badge طور اتوماتیک در سمت راست لیست قرار می گیرد):
برای درج badge به list group از کلاس .badge
در آیتم های لیست استفاده کنید:
1 2 3 4 5 | <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> |
همچنین می توانید به آیتم های لیست لینک اضافه کنید. در این صورت با حرکت اشاره گر ماوس روی هر آیتم، زمینه ی آن به خاکستری تغییر می کند.
<div>
به جای <ul>
و <a>
به جای <li>
استفاده کنید.1 2 3 4 5 | <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
در آیتم های لیست گروه، باعث highlight شدن آیتم جاری می شود.
1 2 3 4 5 | <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
را مانند نمونه ی زیر، اضافه کنید:1 2 3 4 5 | <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 استفاده کرد.
کلاسهایی که برای رنگ بندی آیتم های list group در bootstrap 3 می توان استفاده کرد، شامل موارد زیر است:list-group-item-success.
, list-group-item-info
, list-group-item-warning
و .list-group-item-danger
مثال:
1 2 3 4 5 6 | <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> |
شما می توانید از هر عنصر html در محتوای آیتم های list group استفاده کنید.
برای این منظور bootstrap کلاسهای .list-group-item-heading
و.list-group-item-text
را ارائه داده است.
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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 بخوبی استفاده کرده باشید.