Isotope для Bootstrap / Эффекты / Сниппеты Bootstrap

Версия: v1.0

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

Категория: Эффекты

Bootstrap: 3, 4

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

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

Вес файла: 15.6 Kb

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

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

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

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

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

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

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

Рейтинг: 5.0 / 5 - 4 голосов

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

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

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

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

Теги: эффект, Snippet, html, Effect, сниппет, Bootstrap, Isotope

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

Добавлено: 2016-11-27 в 11:03

Метка: 1581094341

⇄ ⇅

.container.no-gutter {
 padding: 0px;
}
.container.no-gutter .row [class*='col-']:not(:first-child),
.container.no-gutter .row [class*='col-']:not(:last-child)
{
 padding-right: 0;
 padding-left: 0;
}
.item { 
 border: none;
}
/* Isotope Transitions */
.isotope,
.isotope .item {
 -webkit-transition-duration: 0.8s;
 -moz-transition-duration: 0.8s;
 -ms-transition-duration: 0.8s;
 -o-transition-duration: 0.8s;
 transition-duration: 0.8s;
}
.isotope {
 -webkit-transition-property: height, width;
 -moz-transition-property: height, width;
 -ms-transition-property: height, width;
 -o-transition-property: height, width;
 transition-property: height, width;
}
.isotope .item {
 -webkit-transition-property: -webkit-transform, opacity;
 -moz-transition-property: -moz-transform, opacity;
 -ms-transition-property: -ms-transform, opacity;
 -o-transition-property: top, left, opacity;
 transition-property: transform, opacity;
} 
</style>

<h1 class="text-center">Isotope for Bootstrap</h1>

<div id="filters" class="button-group">
 <button class="btn btn-danger" data-filter="*">Все размеры</button>
 <button class="btn btn-success" data-filter=".1680x1050">1680x1050</button>
 <button class="btn btn-primary" data-filter=".1920x1200">1920x1200</button>
</div>
<hr />

</div>
</div>

$(window).smartresize(function(){
 $container.isotope({
 columnWidth: '.col-sm-3'
 });
 });
 
 $container.isotope({ filter: '*' });

$('#filters').on( 'click', 'button', function() {
 var filterValue = $(this).attr('data-filter');
 $container.isotope({ filter: filterValue });
 });
});
</script>

BootstrapTema

Isotope для Bootstrap

Скриншот

Подробнее

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

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

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