آموزش گروه لیست در بوت استرپ

آموزش گروه لیست در بوت استرپ

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش گروه لیست در بوت استرپ خواهیم پرداخت.

هدف از مولفه گروه لیست ارائه محتوای پیچیده و سفارشی در لیست ها است. برای دریافت یک گروه لیست پایه دارای موارد زیر است –

• کلاس .list-group را به عنصر <ul> اضافه کنید.
• .list-group-item کلاس را به <li> اضافه کنید.

مثال زیر این را نشان می دهد –

افزودن نشان ها به گروه لیست

ما می توانیم مولفه نشان را به هر مورد از گروه لیست اضافه کنیم و به طور خودکار در سمت راست قرار می گیرد. فقط <span class = “badge”> را در عنصر <li> اضافه کنید. مثال زیر این را نشان می دهد –

لینک دادن موارد گروه به لیست

با استفاده از تگ های لنگر به جای موارد لیست ، می توانیم گروه های لیست را پیوند دهیم. ما باید به جای عنصر <ul> از <div> استفاده کنیم. مثال زیر این را نشان می دهد –

نسخه ی نمایشی زنده
<a href = “#” class = “list-group-item active”>
ثبت نام دامنه به صورت رایگان
</a>

اضافه کردن محتوای سفارشی به گروه لیست 

ما می توانیم هر محتوای HTML را به گروه های لیست پیوندی بالا اضافه کنیم. مثال زیر این را نشان می دهد –

منبع.

لیست جلسات قبل آموزش بوت استرپ

1. آموزش بوت استرپ
2.  بررسی اجمالی بوت استرپ
3. آموزش راه اندازی بوت استرپ
4. آموزش سیستم شبکه در بوت استرپ 
5. بررسی اجمالی CSS در بوت استرپ
6. آموزش تایپوگرافی در بوت استرپ 
7. آموزش کد در بوت استرپ 
8. آموزش جدول در بوت استرپ
9. آموزش فرم ها در بوت استرپ 
10. آموزش دکمه ها در بوت استرپ
11. آموزش تصاویر در بوت استرپ
12. آموزش کلاس های کمکی در بوت استرپ 
13. آموزش ابزارهای پاسخگو در بوت استرپ 
14. آموزش Glyphicons در بوت استرپ 
15. آموزش منوهای کشویی در بوت استرپ
16. آموزش گروه های دکمه ای در بوت استرپ
17. آموزش گروه های ورودی در بوت استرپ
18. آموزش عناصر ناوبری در بوت استرپ
19. آموزش Navbar در بوت استرپ
20. آموزش Breadcrumbs در بوت استرپ
21. آموزش صفحه بندی در بوت استرپ
22. آموزش لیبل ها در بوت استرپ
23. آموزش بج ها در بوت استرپ
24. آموزش Jumbotron در بوت استرپ 
25. آموزش تصاویر کوچک در بوت استرپ 
26. آموزش هشدارها در بوت استرپ 
27.  آموزش نوارهای پیشرفت در بوت استرپ 
28. آموزش شی Media در بوت استرپ