Цель списка групп компонентов для визуализации сложного и настроенного содержимого в списках. Чтобы получить список основной группы, необходимо:

  • Добавьте класс .list-group в элемент <ul>.
  • Добавить класс .list-group-item в элемент <li>.

Следующий пример демонстрирует это:

<ul class = "list-group"> <li class = "list-group-item">Бесплатная регистрация доменных имен</li> <li class = "list-group-item">Бесплатные оконное пространство хостинга</li> <li class = "list-group-item">Количество изображений</li> <li class = "list-group-item">Поддержка 24*7</li> <li class = "list-group-item">Стоимость продления в год</li>
</ul>

 

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

Мы можем добавить компонент значки в любой список группы элементов, и он будет автоматически установлен справа. Просто добавьте <span class = “badge”> внутри элемента <li>.

Следующий пример демонстрирует это:

<ul class = "list-group"> <li class = "list-group-item">Бесплатная регистрация доменных имен</li> <li class = "list-group-item">Бесплатные оконное пространство хостинга</li> <li class = "list-group-item">Количество изображений</li> <li class = "list-group-item"> <span class = "badge">Новый</span> Поддержка 24*7 </li> <li class = "list-group-item">Стоимость продления в год</li> <li class = "list-group-item"> <span class = "badge">Новый</span> Скидка </li>
</ul>

 

Связывание списка группы элементов

При использовании анкерных тегов вместо элементов списка, мы можем связать список группы. Нам нужно использовать <div> вместо элемента <ul>. Следующий пример демонстрирует это:

<a href = "#" class = "list-group-item active"> Бесплатная регистрация доменных имен
</a>
<a href = "#" class = "list-group-item">Поддержка 24*7</a>
<a href = "#" class = "list-group-item">Бесплатные оконное пространство хостинга</a>
<a href = "#" class = "list-group-item">Количество изображений</a>
<a href = "#" class = "list-group-item">Стоимость продления в год</a>

 

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

Мы можем добавить любое содержимое HTML в вышеуказанные связанные группы списков. Следующий пример демонстрирует это:

<div class = "list-group"> <a href = "#" class = "list-group-item active"> <h4 class = "list-group-item-heading"> Стартовый пакет </h4> </a> <a href = "#" class = "list-group-item"> <h4 class = "list-group-item-heading"> Бесплатная регистрация доменных имен </h4> <p class = "list-group-item-text"> Вы получите бесплатную регистрацию домена со страниц сайта. </p> </a> <a href = "#" class = "list-group-item"> <h4 class = "list-group-item-heading"> Поддержка 24*7 </h4> <p class = "list-group-item-text"> Мы предоставляем поддержку 24*7. </p> </a>
</div>
<div class = "list-group"> <a href = "#" class = "list-group-item active"> <h4 class = "list-group-item-heading"> Бизнес пакет </h4> </a> <a href = "#" class="list-group-item"> <h4 class = "list-group-item-heading"> Бесплатная регистрация доменных имен </h4> <p class = "list-group-item-text"> Вы получите бесплатную регистрацию домена со страниц сайта. </p> </a> <a href = "#" class = "list-group-item"> <h4 class = "list-group-item-heading">Поддержка 24*7</h4> <p class = "list-group-item-text">Мы предоставляем поддержку 24*7.</p> </a>
</div>

 

 

Источник: AndreyEx.ru