Не замечать охлаждения людей — значит мало ценить их дружбу (Ф. Ларошфуко).

Bootstrap — Список групп

2 мин для чтения

Главное меню » Учебное пособие по framework Bootstrap » Bootstrap — Список групп

(1 оценок, среднее: 5,00 из 5)

Загрузка...

05.07.2017

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.