آموزش کار با فریمورک رایگان بوت استرپ / قسمت یازدهم
فهرست گروهی بوت استرپ (Bootstrap List Groups)
چطور می تونیم یک لیست به وب سایتمان با بوت استرپ اضافه کنیم و به آن امکانات دلخواه خودمان را اضافه کنیم. با ما همراه باشید.
فهرست گروهی پایه
اولیه ترین لیست گروهی یک لیست نامرتب با اقلام لیست است:
برای ایجاد یک لیست گروهی اولیه، از عنصر ul با کلاس list-group و عناصر li با کلاس list-group-item استفاده کنید:
مثال:
۱
۲
۳
۴
۵
|
< ul class = "list-group" > < li class = "list-group-item" >First item</ li > < li class = "list-group-item" >Second item</ li > < li class = "list-group-item" >Third item</ li > </ ul > |
فهرست گروهی با نشان (Badge)
شما همچنین می توانید نشان ها را به لیست گروهی اضافه کنید. نشان ها به طور خودکار در سمت راست قرار خواهند گرفت:
برای ایجاد یک نشان، عنصر span با کلاس badge در داخل لیست آیتم ها اضافه کنید:
مثال:
۱
۲
۳
۴
۵
|
< ul class = "list-group" > < li class = "list-group-item" >< span class = "badge" >12</ span > New</ li > < li class = "list-group-item" >< span class = "badge" >5</ span > Deleted</ li > < li class = "list-group-item" >< span class = "badge" >3</ span > Warnings</ li > </ ul > |
فهرست گروهی با آیتم های لینک شده
آیتم ها در یک لیست گروهی می توانند لینک باشند.لینک شدن یک رنگ پس زمینه خاکستری وقتی روی آیتم برویم به آن اضافه می کند:
برای ایجاد یک لیست گروهی با آیتم های لینک شده، از عنصر 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 برای برجسته کردن آیتم جاری استفاده کنید:
مثال:
۱
۲
۳
۴
۵
|
< 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 را اضافه کنید.
مثال:
۱
۲
۳
۴
۵
|
< 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 > |
کلاس های متنی (Contextual classes)
کلاس های متنی را می توان برای آیتم های لیست رنگی استفاده کرد:
کلاس ها برای رنگ آمیزی لیست آیتم ها عبارتند از: list-group-item-success ,
list-group-item-info , list-group-item-warnin و 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 > |
محتوای سفارشی
شما می توانید تقریبا هر HTML را در داخل یک آیتم از لیست گروهی اضافه کنید.
بوت استرپ کلاس های 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 > List Group Item Text </ a > < a href = "#" class = "list-group-item" > < h4 class = "list-group-item-heading" >Second List Group Item Heading</ h4 > List Group Item Text </ a > < a href = "#" class = "list-group-item" > < h4 class = "list-group-item-heading" >Third List Group Item Heading</ h4 > List Group Item Text </ a > </ div > |