Сильный код легко читается, слабый — громко кричит об авторе. (автор не известен)
Bootstrap — Список групп
05.07.2017
Время чтения: 2 мин.
Цель списка групп компонентов для визуализации сложного и настроенного содержимого в списках. Чтобы получить список основной группы, необходимо:
- Добавьте класс .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>
Какой-то бред… У меня не работает и всё запутанно рассказано.
Интересней было бы привести пример в стиле ООП
Нормально всё расписано.
В моей компании многие используют эту статью.