Bootstrap + masonry

Bootstrap + masonry bootstrap

В данном уроке мы разберемся в том как в bootstrap создать masonry сетку.

Если вы в первый раз слышите о ней, она позволяет подставлять колонки друг под друга, в случае если у них разная высота.

masonry сетка

Скачиваем и подключаем masonry к bootstrap

  1. Скачиваете masonry с официального сайта: salvattore.com
  2. Заливаете скрипт salvattore.min.js на хостинг и подключаем его к шаблону
<script src="/assets/js/salvattore.min.js"></script>

(/assets/js замените на свой путь куда вы залили salvattore.min.js)

Далее в CSS файл добавляем следующее:

@media screen and (max-width: 767px) {
.masonry[data-columns]::before {
content: '2 .col-xs-6';
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.masonry[data-columns]::before {
content: '3 .col-xs-4';
}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
.masonry[data-columns]::before {
content: '4 .col-xs-3';
}
}
@media screen and (min-width: 1200px) {
.masonry[data-columns]::before {
content: '4 .col-xs-3';
}
}

Давайте в кратции разберем одно из css правил, к примеру вот это:

@media screen and (min-width: 1200px) {
.masonry[data-columns]::before {
content: '4 .col-xs-3';
}
}

Здесь masonry на разрешении экрана 1200 и более пикселей, будет строить ряды из 4 col-xs-3 колонок.

@media screen and (min-width: 768px) and (max-width: 991px) {
.masonry[data-columns]::before {
content: '3 .col-xs-4';
}
}

Здесь masonry на разрешении экрана от 768 до 991  пикселей, будет строить ряды из трех col-xs-4 колонок.

Ну и остается подключить masonry в html. Делается это очень просто, для этого необходимо для контейнера, добавить класс masonry и после него data-columns

<div class="row masonry" data-columns>

Ну вот в принципе и все.

Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 2 оценки, среднее 1 из 5 )
Создание, поисковая оптимизация, продвижение и монетизация сайтов. Инструменты для веб-разработчиков, CMS сборки.
Добавить комментарий

  1. Timur Basmach

    Пробовал и как здесь и как на офф сайте плагина. Не работает (( Даже не знаю куда копать

    Ответить
    1. Alex87

      Если работаете на ПК может не работать. Попробуйте на сервере (хостинге)

      Ответить
      1. Timur Basmach

        На сервере пробовал. Победил проблему. Оказалось имеет значение место подключения скрипта. Когда добавлял его в шапке страницы не работало, попробовал перенести подключение в конец страницы и заработало. Спасибо.

        Ответить
        1. Alex87

          Пожалуйста

          Ответить