نمادها

شما اینجا هستید

آموزش Bootstrap جلسه هجدهم(List Groups)

در خدمت شما هستیم با آموزش 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)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید


و یا آن را در آپارات ببینید

و همچنین در صورت علاقه میتوانید از مسیر زیر در یوتیوب آن را ببینید
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

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


این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه هجدهم(List Groups): نوع فایل:mp4 حجم فایل:26.33 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

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

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.