То, что не убьет тебя, сделает тебя сильным (Ф. Ницше).

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

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 5,00 из 5)
Загрузка...
5 июля 2017
Bootstrap - Список групп
Цель списка групп компонентов для визуализации сложного и настроенного содержимого в списках. Чтобы получить список основной группы, необходимо:

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

Просмотров: 138

Если статья понравилась, то поделитесь ей в социальных сетях:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close