Компьютерапия

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

Категория: Bootstrap 3
Просмотров: 1317

Содержание:

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

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



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

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok