آموزش ایجاد گروه لیست در بوت استرپ

گروه لیستی

هدف از ایجاد مؤلفه های گروه لیستی (list group) ، ارائه محتوای پیچیده و سفارشی به صورت لیستی می باشد. برای ایجاد یک گروه لیست پایه ای به صورت زیر عمل می کنیم :

• کلاس .list-group را به عنصر <ul> اضافه می کنیم.
• کلاس .list-group-item را به عنصر <li> اضافه می کنیم.

مثال زیر نحوه انجام این کار را نشان می دهد :

<ul class = "list-group">
   <li class = "list-group-item">Free Domain Name Registration</li>
   <li class = "list-group-item">Free Window Space hosting</li>
   <li class = "list-group-item">Number of Images</li>
   <li class = "list-group-item">24*7 support</li>
   <li class = "list-group-item">Renewal cost per year</li>
</ul>

خروجی قطعه کد فوق به صورت زیر می باشد :

افزودن نشان به گروه لیستی

ما می توانیم مؤلفه های نشان (badge) را به هر آیتم گروه لیستی اضافه کنیم. این مؤلفه ها ، به طور خودکار در سمت راست قرار می گیرند. برای انجام این کار کافی است <span class = "badge"> را در داخل عنصر <li> اضافه کنیم. مثال زیر نحوه انجام این کار را نشان می دهد :

<ul class = "list-group">
   <li class = "list-group-item">Free Domain Name Registration</li>
   <li class = "list-group-item">Free Window Space hosting</li>
   <li class = "list-group-item">Number of Images</li>
   
   <li class = "list-group-item">
      <span class = "badge">New</span>
      24*7 support
   </li>
   
   <li class = "list-group-item">Renewal cost per year</li>
   
   <li class = "list-group-item">
      <span class = "badge">New</span>
      Disocunt Offer
   </li>
	
</ul>

خروجی قطعه کد فوق به صورت زیر می باشد :

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

با استفاده از تگ های anchor به جای آیتم های لیست ، ما می توانیم به گروه های لیست لینک دهی کنیم. برای انجام این کار ، باید از <div> به جای عنصر <ul> استفاده کنیم. مثال زیر نحوه انجام این کار را نشان می دهد :

<a href = "#" class = "list-group-item active">
   Free Domain Name Registration
</a>

<a href = "#" class = "list-group-item">24*7 support</a>
<a href = "#" class = "list-group-item">Free Window Space hosting</a>
<a href = "#" class = "list-group-item">Number of Images</a>
<a href = "#" class = "list-group-item">Renewal cost per year</a>

خروجی قطعه کد فوق به صورت زیر می باشد :

افزودن محتوای سفارشی به گروه لیستی

ما می توانیم محتوای HTML مورد نظر خود را به گروه لیست های لینک داده شده فوق اضافه کنیم. مثال زیر نحوه انجام این کار را نشان می دهد :

<div class = "list-group">
   <a href = "#" class = "list-group-item active">
      <h4 class = "list-group-item-heading">
         Starter Website Package
      </h4>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">
         Free Domain Name Registration
      </h4>
      
      <p class = "list-group-item-text">
         You will get a free domain registration with website pages.
      </p>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">
         24*7 support
      </h4>
      
      <p class = "list-group-item-text">
         We provide 24*7 support.
      </p>
   </a>
   
</div>

<div class = "list-group">
   <a href = "#" class = "list-group-item active">
      <h4 class = "list-group-item-heading">
         Business Website Package
      </h4>
   </a>
   
   <a href = "#" class="list-group-item">
      <h4 class = "list-group-item-heading">
         Free Domain Name Registration
      </h4>
      
      <p class = "list-group-item-text">
         You will get a free domain registration with website pages.
      </p>
   </a>
   
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">24*7 support</h4>
      <p class = "list-group-item-text">We provide 24*7 support.</p>
   </a>
   
</div>

خروجی قطعه کد فوق به صورت زیر می باشد :