Цель компонента группы списков - отображать сложный и настроенный контент в списках. Чтобы получить основную группу списка -

  • Добавить класс .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>

Добавление значков в группу списков

Мы можем добавить компонент значков в любой элемент группы списка, и он будет автоматически помещен справа. Просто добавьте 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>

Элементы списка список ссылок

Используя теги привязки вместо элементов списка, мы можем связать группы списков. Нам нужно использовать 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>

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok