Bootstrap Группа списков
В этой главе мы обсудим группы списков. Компонент группы списков используется для представления сложного и настраиваемого содержимого в виде списка. Шаги создания базовой группы списков следующие:
- Добавьте класс к элементу <ul>.list-group。
- Добавьте класс к элементу <li>.list-group-item。
Следующий пример демонстрирует это:
Пример
<ul class="list-group">
<li class="list-group-item">Бесплатная регистрация домена</li>
<li class="list-group-item">Бесплатный хостинг с пространством Window</li>
<li class="list-group-item">Количество изображений</li>
<li class="list-group-item">Поддержка 24*7</li>
<li class="list-group-item">Стоимость ежегодного обновления</li>
</ul>
Попробуйте »
Результат следующий:
Добавление значков в группу списка
Мы можем добавить компоненты badge к любому элементу списка, и они автоматически будут расположены справа. Просто добавьте его к элементу <li><span class="badge">и все. Следующий пример демонстрирует это:
Пример
<ul class="list-group">
<li class="list-group-item">Бесплатная регистрация домена</li>
<li class="list-group-item">Бесплатный хостинг с пространством Window</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>
Попробуйте »
Результат следующий:
Добавление ссылок в группу списка
Используя теги-якоря вместо элементов списка, мы можем добавить ссылки в группу списка. Нам нужно использовать элемент <a> вместо элемента <li>. Следующий пример демонстрирует это:
Пример
<a href="#" class="list-group-item active">Бесплатная регистрация домена</a>
<a href="#" class="list-group-item">Поддержка 24*7</a>
<a href="#" class="list-group-item">Бесплатный хостинг с пространством Window</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>
Попробуйте »
Результат следующий:
Горизонтальный список
В приведённых выше примерах списки отображаются вертикально. Если нам нужен горизонтальный список, мы можем добиться этого с помощью следующего кода:
Пример
.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}
Попробуйте »
Результат следующий:
Другие расширения
