Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش Bootstrap--کار با لیست گروه ها در بوت استرپ(List Groups)

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت بیستم آموزش در زیر قرار داده شده است.

کار با لیست گروه ها در بوت استرپ(List Groups)                                                                       قسمت پایانی

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

برای ایجاد یک لیست عمومی از المان <ul> استفاده می کنیم

بدین صورت که به المان<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>

6358490909567337071.png

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

برا ی استفاده از 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>

6358490918909471412.png

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

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

<div class="list-group">
  <href="#" class="list-group-item active">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <href="#" class="list-group-item">Third item</a>
</div>

6358490941617370233.png

برای غیر فعال کردن یکی از عناصر لیست از کلاس disabled. استفاده می کنیم

<href="#" class="list-group-item disabled"> item</a>

همچنین میتوانیم از کلاس های متنی list-group-item-successlist-group-item-infolist-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>

 

6358490966371786104.png

محتوای سفارشی :

شما می توانید هر المان html  را درون لیست گروه تان اضافه کنید

برای مشخص کردن تیتر متن از کلاس list-group-item-heading. و همچنین متن اصلی از کلاس list-group-item-text. استفاده می شود

<div class="list-group">
  <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>
  <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>
  <href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
    <class="list-group-item-text">List Group Item Text</p>
  </a>
</div>

6358490976778081305.png

پایان

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

منبع : http://www.w3schools.com

 

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

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