در صفحات وب نیز از لیست بندی های مختلفی استفاده میشود یکی از معمول ترین و رایجترین نوع لیستی که استفاده میکنیم ، لیست شمارشی طبقه بندی نشده است.
پیشنهاد میشود پیش از ورود به این جلسه ، سایر قسمت های دوره ی بوت استرپ 4 را مطالعه فرمایید.
اگر اطلاعی از جلسات قبلی ندارید نگران نباشید تا انتهای این مقاله سعی میکنیم در حد امکان به مطالب قبلی اشاره ای داشته باشیم.
لیست ساده
همانطور که گفتیم ساده ترین نوع لیست ها ، لیست های طبقه بندی نشده است ، برای ساخت چنین لیستی کافی است از تگ ul با کلاس .list-group و تگ li با کلاس .list-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> |
حالت فعال
برای استفاده از حالت فعال کافی است کلاس .active را به تگ مورد نظر اضافه کنیم:
|
1 2 3 4 5 |
<ul class="list-group"> <li class="list-group-item active">Active item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul> |
لیست همراه با لینک
برای استفاده از لیست های لینک دار بهتر است از تگ div بجای تگ ul استفاده کنیم و بجای li کافی است تگ a با ادرس اینترنتی مورد نظر را قرار دهیم ، با این تفاوت که بجای کلاس .list-group-item از کلاس .list-group-item-action استفاده کرد:
|
1 2 3 4 5 |
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">First item</a> <a href="#" class="list-group-item list-group-item-action">Second item</a> <a href="#" class="list-group-item list-group-item-action">Third item</a> </div> |
آیتم های غیرفعال
برای استفاده از حالت غیرفعال کافی است از کلاس .disabled استفاده کنیم :
|
1 2 3 4 5 |
<div class="list-group"> <a href="#" class="list-group-item disabled">Disabled item</a> <a href="#" class="list-group-item disabled">Disabled item</a> <a href="#" class="list-group-item">Third item</a> </div> |
حذف مرز ها
در مثال اول با افزودن کلاس .list-group حاشیه ای ایجاد میشد ، اما خب طبق تدابیر اندیشیده شده در بوت استرپ و گستردگی میتوانید از کلاس .list-group-flush استفاده کنید تا حاشیه دور حذف شود:
|
1 2 3 4 5 6 |
<ul class="list-group list-group-flush"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> <li class="list-group-item">Fourth item</li> </ul> |
فهرست افقی
اگر تمایل به این دارید که بجای نمایش عمودی فهرست ، فهرست شما به نمای افقی تبدیل شود کافی است کلاس .list-group-horizontal را در کنار کلاس .list-group اضافه کنید:
|
1 2 3 4 5 6 |
<ul class="list-group list-group-horizontal"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> <li class="list-group-item">Fourth item</li> </ul> |
کلاسهای متنی
از کلاسهای متنی می توان برای لیست کردن موارد استفاده کرد. کلاس های رنگ آمیزی لیست موارد عبارتند از: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-dark ,list-group-item-light,:
برای درک بهتر کلاس ها مثال زیر را اجرا نمایید :
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="list-group"> <li class="list-group-item list-group-item-success">Success item</li> <li class="list-group-item list-group-item-secondary">Secondary item</li> <li class="list-group-item list-group-item-info">Info item</li> <li class="list-group-item list-group-item-warning">Warning item</li> <li class="list-group-item list-group-item-danger">Danger item</li> <li class="list-group-item list-group-item-primary">Primary item</li> <li class="list-group-item list-group-item-dark">Dark item</li> <li class="list-group-item list-group-item-light">Light item</li> </ul> |
لینک در کلاسهای متنی
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Action item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a> </div> |
لیست همراه با نشانه
برای افزودن نشانه اعداد به لیست میتوانیم از تگ span به شکل زیر استفاده کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Inbox <span class="badge badge-primary badge-pill">12</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Ads <span class="badge badge-primary badge-pill">50</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Junk <span class="badge badge-primary badge-pill">99</span> </li> </ul> |
ویدیوی قسمت پانزدهم
امیدوارم تا اینجای مقاله برای شما عزیزان مفید واقع شده باشد.
پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.
پایدار باشید.
1 Comment
Join the discussion and tell us your opinion.
واقعا آموش هاتون درجه یک و عالیه
ممنون از این که آموزش هارو رایگان در اختیارمون قرار میدین
موفق باشید