آموزش بوت استرپ

ایجاد لیست گروهی List Group بوت استرپ bootstrap

نحوه کار و ایجاد لیست نامرتب , لیست گروهی در بوت استرپ bootstrap list group

لیست گروه های اصلی

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

برای ایجاد یک گروه لیست پایه گروهی، از یک عنصر <ul> با کلاس .list-group و <li> عناصر با کلاس classlist-group-item استفاده کنید.

مثال

 

List Group  با Badges

شما همچنین می توانید badge را به یک لیست گروه list group اضافه کنید. نشان ها به طور خودکار در سمت راست قرار می گیرند:

برای ایجاد یک نشان badge ، یک عنصر <span> با کلاس .badge درون لیست ایتم list item ایجاد کنید:

مثال

 

لیست ها با ایتم های لینک شده

List Group With Linked Items

ایتم ها در یک گروه لیست همچنین می تواند هایپر لینک hyperlink باشند . این یک رنگ پس زمینه خاکستری را در شناور اضافه می کند،وقتی که موس روی یک ایتم میرود پس زمینه ان خاکستری رنگ می شود:

برای ایجاد یک گروه لیست با ایتم ها لینک داده شده، از <div> به جای <ul> و <a> به جای <li> استفاده کنید:

مثال

 

وضعیت فعال

استفاده از کلاس .actove برای هایلایت کردن highlight  آیتم فعال استفاده کنید در لیست بوت استرپ :

مثال

 

وضعیت غیر فعال

لیست گروه زیر غیر فعال می باشند:

برای غیرفعال کردن یک مورد، کلاس .disabled را اضافه کنید:

مثال

 

کلاسهای متنی

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

کلاس های لیست رنگ لیست ها عبارتند از: listlist-group-item-success، list-group-item-info، list-group-item-warning، and list-group-item-danger:

مثال

 

محتوای سفارشی

شما می توانید تقریبا هر HTML داخل یک ایتم لیست گروه قرار دهید.

بوت استرپ کلاس هایی را ایجاد می کند: listlist-group-item-heading و listlist-group-item-text که می تواند به صورت زیر استفاده شود:

 

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بستن