ИТ Блог. Создание сайтов с применением Bootstrap
(1 оценок, среднее: 5,00 из 5)
Загрузка...
Цель списка групп компонентов для визуализации сложного и настроенного содержимого в списках. Чтобы получить список основной группы, необходимо:
Следующий пример демонстрирует это:
<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>
