Учебники

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

Октябрь 25, 2018

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

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

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

Добавьте класс .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 в вышеупомянутые группы связанных списков. Следующий пример демонстрирует это —

37
Share: