سبد (0)

لیست های گروهی در بوت استرپ

لیست های گروهی مقدماتی در بوت استرپ

Wiki

مقدماتی ترین لیست گروهی، عبارت است از یک لیست نامنظم به همراه آیتم های آن:

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

مثال (لیست های گروهی بوت استرپ)

<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>

خودتان امتحان کنید »

لیست های گروهی به همراه مدال ها(badges)

Wiki

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

برای ایجاد یک مدال(badge)، یک عنصر <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>

خودتان امتحان کنید »

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

Wiki

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

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

مثال (لیست های گروهی در بوت استرپ)

<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>

خودتان امتحان کنید »

آیتم غیرفعال شده در لیست گروهی بوت استرپ

Wiki

در تصویر زیر، آیتم اول از لیست گروهی، غیرفعال شده است:

برای غیرفعال کردن یک آیتم، می توانید کلاس 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>

خودتان امتحان کنید »

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

Wiki

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

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

list-group-item-success. و list-group-item-info. و list-group-item-warning. و 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>

خودتان امتحان کنید »

از چه عناصری می توان در لیست گروهی استفاده کرد؟

Wiki

شما تقریبا می توانید از هر عنصر 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>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Second List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
</div>

خودتان امتحان کنید »

 

آموزش صوتی Bootstrap

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه