امام حسين(ع):اگر دين نداريد لااقل آزاده باشيد.
خوش آمدید - امروز : جمعه ۱۰ فروردین ۱۴۰۳

آموزش کار با فریمورک رایگان بوت استرپ / قسمت یازدهم

آموزش کار با فریمورک رایگان بوت استرپ / قسمت یازدهم

http://ivahid.com/wp-content/uploads/2014/11/cover8.png

فهرست گروهی بوت استرپ  (Bootstrap List Groups)

چطور می تونیم یک لیست به وب سایتمان با بوت استرپ اضافه کنیم و به آن امکانات دلخواه خودمان را اضافه کنیم. با ما همراه باشید.

فهرست گروهی پایه

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

list group

برای ایجاد یک لیست گروهی اولیه، از عنصر ul با کلاس list-group و عناصر li با کلاس list-group-item استفاده کنید:
مثال:

۱
۲
۳
۴
۵
<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>

فهرست گروهی با نشان (Badge)

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

list group badges

برای ایجاد یک نشان، عنصر span با کلاس badge در داخل لیست آیتم ها اضافه کنید:
مثال:

۱
۲
۳
۴
۵
<ul class="list-group">
<li class="list-group-item"><span class="badge">12</span> New</li>
<li class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul>

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

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

list group

برای ایجاد یک لیست گروهی با آیتم های لینک شده، از عنصر div به جای ul و از A به جای li استفاده کنید:
مثال :

۱
۲
۳
۴
۵
<div class="list-group">
  <a href="#" class="list-group-item">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

وضعیت فعال:
enable list group

از کلاس active برای برجسته کردن آیتم جاری استفاده کنید:
مثال:

۱
۲
۳
۴
۵
<div class="list-group">
  <a href="#" class="list-group-item active">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

آیتم غیر فعال
فهرست گروهی زیر یک آیتم غیر فعال دارد:
disable list group
برای غیر فعال کردن یک آیتم، کلاس disabled را اضافه کنید.
مثال:

۱
۲
۳
۴
۵
<div class="list-group">
  <a href="#" class="list-group-item disabled">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

کلاس های متنی (Contextual classes)
کلاس های متنی را می توان برای آیتم های لیست رنگی استفاده کرد:
bootstrap list group
کلاس ها برای رنگ آمیزی لیست آیتم ها عبارتند از: list-group-item-success ,
list-group-item-info , list-group-item-warnin و list-group-item-danger

۱
۲
۳
۴
۵
۶
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>

محتوای سفارشی
شما می توانید تقریبا هر HTML را در داخل یک آیتم از لیست گروهی اضافه کنید.
بوت استرپ کلاس های list-group-item-heading و list-group-item-text را فراهم کرده است که می توانند به صورت زیر استفاده شوند:

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
<div class="list-group">
  <a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
List Group Item Text
  </a>
  <a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
List Group Item Text
  </a>
  <a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
List Group Item Text
</a>
</div>

آموزش کار با فریمورک رایگان بوت استرپ / قسمت یازدهم