Блоки списком или сеткой - Grid & List / Блоки / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Блоки

Для Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Вес файла: 2.2 Kb

Уникальный ID: 760

Количество символов:

Посмотрели: 7349 раз

Помощь: установка & настройка

Прикреплён файл №1: /_sf/7/760.html

Прикреплён файл №2: /stuff/0-0-0-760-20

Скачали бесплатно: 404 раз

Прокомментировали: 0 раз

Рейтинг: 4.8 / 5 - 8 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: grid, Snippet, html, блок, Block, сниппет, Bootstrap, List

Поделился: BootstrapТема

Добавлено: 2016-03-19 в 19:52

Метка: 1581616524

⇄ ⇅

.item.list-group-item {
 float: none;
 width: 100%;
 background-color: #fff;
 margin-bottom: 10px
}
.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover {
 background: rgb(105,65,152)
}
.item.list-group-item .list-group-image {
 margin-right: 10px
}
.item.list-group-item .thumbnail {
 margin-bottom: 0px
}
.item.list-group-item .caption {
 padding: 9px 9px 0px 9px
}
.item.list-group-item:nth-of-type(odd) {
 background: #eeeeee
}
.item.list-group-item:before, .item.list-group-item:after {
 display: table;
 content: " "
}
.item.list-group-item img {
 float: left
}
.item.list-group-item:after {
 clear: both
}
.list-group-item-text {
 margin: 0 0 11px
}
</style>

<div class="container">
 <div class="well well-sm">
 <strong>Вид: </strong>
 <div class="btn-group">
 <a href="#" id="list" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-th-list"></span>Список</a> 
<a href="#" id="grid" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-th"></span>Сетка</a>
 </div>
 </div>
 <div id="products" class="row list-group">
 <div class="item col-xs-4 col-lg-4">
 <div class="thumbnail">
 <img class="group list-group-image" src="https://bootstraptema.ru/images/type/400x250.png" alt="1" />
 <div class="caption">
 <h4 class="group inner list-group-item-heading">Товар 1</h4>
 <p class="group inner list-group-item-text">
Описание товара 1, Описание товара 1, Описание товара 1, Описание товара 1, Описание товара 1, Описание товара 1, Описание товара 1, Описание товара 1, Описание товара 1.
</p>
 <div class="row">
 <div class="col-xs-12 col-md-6">
 <p class="lead">$350.000</p>
 </div>
 <div class="col-xs-12 col-md-6">
 <a class="btn btn-success" href="#">Заказать</a>
 </div>
 </div>
 </div>
 </div>
 </div>

<div class="item col-xs-4 col-lg-4">
 <div class="thumbnail">
 <img class="group list-group-image" src="https://bootstraptema.ru/images/type/400x250.png" alt="2" />
 <div class="caption">
 <h4 class="group inner list-group-item-heading">Товар 2</h4>
 <p class="group inner list-group-item-text">
Описание товара 2, Описание товара 2, Описание товара 2, Описание товара 2, Описание товара 2, Описание товара 2, Описание товара 2, Описание товара 2, Описание товара 2.
</p>
 <div class="row">
 <div class="col-xs-12 col-md-6">
 <p class="lead">
 $250.000</p>
 </div>
 <div class="col-xs-12 col-md-6">
 <a class="btn btn-success" href="#">Заказать</a>
 </div>
 </div>
 </div>
 </div>
 </div>

<div class="item col-xs-4 col-lg-4">
 <div class="thumbnail">
 <img class="group list-group-image" src="https://bootstraptema.ru/images/type/400x250.png" alt="3" />
 <div class="caption">
 <h4 class="group inner list-group-item-heading">Товар 3</h4>
 <p class="group inner list-group-item-text">
Описание товара 3, Описание товара 3, Описание товара 3, Описание товара 3, Описание товара 3, Описание товара 3, Описание товара 3, Описание товара 3, Описание товара 3.
</p>
 <div class="row">
 <div class="col-xs-12 col-md-6">
 <p class="lead">
 $150.000</p>
 </div>
 <div class="col-xs-12 col-md-6">
 <a class="btn btn-success" href="#">Заказать</a>
 </div>
 </div>
 </div>
 </div>
 </div>

<div class="item col-xs-4 col-lg-4">
 <div class="thumbnail">
 <img class="group list-group-image" src="https://bootstraptema.ru/images/type/400x250.png" alt="4" />
 <div class="caption">
 <h4 class="group inner list-group-item-heading">Товар 4</h4>
 <p class="group inner list-group-item-text">
Описание товара 4, Описание товара 4, Описание товара 4, Описание товара 4, Описание товара 4, Описание товара 4, Описание товара 4, Описание товара 4, Описание товара 4.
</p>
 <div class="row">
 <div class="col-xs-12 col-md-6">
 <p class="lead">
 $200.000</p>
 </div>
 <div class="col-xs-12 col-md-6">
 <a class="btn btn-success" href="#">Заказать</a>
 </div>
 </div>
 </div>
 </div>
 </div>

<div class="item col-xs-4 col-lg-4">
 <div class="thumbnail">
 <img class="group list-group-image" src="https://bootstraptema.ru/images/type/400x250.png" alt="5" />
 <div class="caption">
 <h4 class="group inner list-group-item-heading">Товар 5</h4>
 <p class="group inner list-group-item-text">
Описание товара 5, Описание товара 5, Описание товара 5, Описание товара 5, Описание товара 5, Описание товара 5, Описание товара 5, Описание товара 5, Описание товара 5.
</p>
 <div class="row">
 <div class="col-xs-12 col-md-6">
 <p class="lead">
 $320.000</p>
 </div>
 <div class="col-xs-12 col-md-6">
 <a class="btn btn-success" href="#">Заказать</a>
 </div>
 </div>
 </div>
 </div>
 </div>

<div class="item col-xs-4 col-lg-4">
 <div class="thumbnail">
 <img class="group list-group-image" src="https://bootstraptema.ru/images/type/400x250.png" alt="6" />
 <div class="caption">
 <h4 class="group inner list-group-item-heading">Товар 6</h4>
 <p class="group inner list-group-item-text">
Описание товара 6, Описание товара 6, Описание товара 6, Описание товара 6, Описание товара 6, Описание товара 6, Описание товара 6, Описание товара 6, Описание товара 6.
</p>
 <div class="row">
 <div class="col-xs-12 col-md-6">
 <p class="lead">
 $21.000</p>
 </div>
 <div class="col-xs-12 col-md-6">
 <a class="btn btn-success" href="#">Заказать</a>
 </div>
 </div>
 </div>
 </div>
 </div>

</div>
</div>

BootstrapTema

Блоки списком или сеткой - Grid & List

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0