در خدمت شما هستیم با آموزش Bootstrap جلسه هجدهم (List Groups)
آموزش Bootstrap جلسه هجدهم (List Groups) از سری آموزش های تک قسمتی است
سلام برنامه در این آموزش یاد می دهد که چطور لیست های خود را در بوت استرپ گروه کنید
گروه کردن لیست ها چه فایده ای برای ما دارد؟
گاهی اوقات لازم است که لیست هایی را در کنار یکدیگر بچسبانیم و مشابه یک جدول آن ها را بسازیم
در حالت عادی باید در css تغییراتی در استایل به وجود آوریم که این اتفاق بیفتد
اما در bootstrap تنها با اضافه کردن کلاس لیست گروهی این کار را انجام می دهیم
علاوه بر گروه کردن لیست ها ما می توانیم آیتم های لیست ها را هم گروه کنیم
کلاس List Groups
بالاتر درباره این کلاس توضیح دادیم اگر چه در ظاهر کاربرد این کلاس کم است اما برای حالت موبایل بسایر کاربردی است.
در حالت موبایل جداول و لیست ها در حالت عادی باعث بهم ریختگی صفحه میشوند که توسط این کلاس مشکل حل میشود.
تنها با قرار دادن کلاس list-group که برای ul تعریف میشود و کلاس list-group-item که برای li تعریف میشود میتوان این کار را کرد.
اگر بخواهیم بیشتر توضیح بدهیم میتوانید از کد های زیر کمک بگیرید:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic List Group</h2>
<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>
</div>
</body>
</html>
همانطور که در کد بالا میبینید تنها با همین ۲ کلاس ساده توانستیم لیست گروهی رسپانسیو بسازیم.
در جلسات قبل درباره badge صحبت کردیم که در لیست ها میتوانید از آن استفاده کنید.
برای این مورد هم میتوانید از کد های زیر کمک بگیرید:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>List Group With Badges</h2>
<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>
</div>
</body>
</html>
می توانید دیگر قسمت ها را در لینک زیر ببینید
آموزش Bootstrap جلسه هفدهم(Pager)
آموزش Bootstrap جلسه نوزدهم (Panels)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید
و یا آن را در آپارات ببینید
آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)
آموزش Bootstrap جلسه پایانی (Design Template)
آموزش Bootstrap جلسه سی و پنجم (Simple Template)
آموزش Bootstrap جلسه سی و چهارم (Affix)