ایجاد لیست گروهی List Group بوت استرپ bootstrap
نحوه کار و ایجاد لیست نامرتب , لیست گروهی در بوت استرپ bootstrap list group
مقالات
لیست گروه های اصلی
اساسی ترین لیست گروه یک لیست نامرتب unordered list با لیست آیتم ها د بوت استرپ می باشد:
برای ایجاد یک گروه لیست پایه گروهی، از یک عنصر <ul> با کلاس .list-group و <li> عناصر با کلاس classlist-group-item استفاده کنید.
مثال
|
1 2 3 4 5 |
<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> |
List Group با Badges
شما همچنین می توانید badge را به یک لیست گروه list group اضافه کنید. نشان ها به طور خودکار در سمت راست قرار می گیرند:
برای ایجاد یک نشان badge ، یک عنصر <span> با کلاس .badge درون لیست ایتم list item ایجاد کنید:
مثال
|
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> |
لیست ها با ایتم های لینک شده
List Group With Linked Items
ایتم ها در یک گروه لیست همچنین می تواند هایپر لینک hyperlink باشند . این یک رنگ پس زمینه خاکستری را در شناور اضافه می کند،وقتی که موس روی یک ایتم میرود پس زمینه ان خاکستری رنگ می شود:
برای ایجاد یک گروه لیست با ایتم ها لینک داده شده، از <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> |
وضعیت فعال
استفاده از کلاس .actove برای هایلایت کردن 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> |
کلاسهای متنی
کلاس های متنی Contextual را می توان برای رنگ کردن آیتم های لیست استفاده کرد:
کلاس های لیست رنگ لیست ها عبارتند از: listlist-group-item-success، list-group-item-info، list-group-item-warning، and list-group-item-danger:
مثال
|
1 2 3 4 5 6 7 |
<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> Try it Yourself » |
محتوای سفارشی
شما می توانید تقریبا هر HTML داخل یک ایتم لیست گروه قرار دهید.
بوت استرپ کلاس هایی را ایجاد می کند: listlist-group-item-heading و listlist-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> |
مطالب زیر را حتما مطالعه کنید
افزونه و کلاس Carousel در بوت استرپ bootstrap
کلاس collapse در بوت استرپ bootstrap
کلاس jumbotron در بوت استرپ
فیلترهای بوت استرپ
افزونه Affix بوت استرپ
افزونه Scrollspy بوت استرپ
1 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
Price Of Levitra 20 Mg Cialis 20 Order Now Cash On Delivery Stendra Next Day Berlin cialis 5 mg original Amoxicillin Treat Meningitis Generic Cialis Uk Next Day Delivery