Русский

Учебник Bootstrap

Макеты Bootstrap

Содержание Bootstrap

Компоненты Bootstrap

Bootstrap Формы

Поддержка Bootstrap

Утилиты Bootstrap

Демо Bootstrap

Bootstrap - Masonry Demo

Введение в Bootstrap Masonry

Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в захватывающий мир Bootstrap Masonry. Как ваш доброжелательный соседский учитель компьютера, я рад помочь вам в этом путешествии. Даже если вы никогда не писали ни строчки кода, не волнуйтесь – мы будем идти шаг за шагом, и скоро вы будете создавать красивые, динамичные макеты как профессионал!

Bootstrap-Masonry Demo

Что такое Bootstrap Masonry?

Bootstrap Masonry – это мощная техника раскладки, которая позволяет создавать сетку элементов с разной высотой. Представьте себе стену из bricks разного размера, которые идеально подходят друг к другу – это и есть суть Masonry! Она особенно полезна для создания галерей изображений, портфолио или любого контента, где вы хотите получить опрятный, организованный вид без потери места.

Начало работы с Bootstrap Masonry

Настройка вашего проекта

Прежде чем погрузиться в код, давайте настроим наш проект. Нам нужно включить Bootstrap и библиотеку Masonry в наш HTML-файл. Не беспокойтесь, если это сначала покажется вам сложным – я объясню каждую часть по ходу дела.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Masonry Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Наш контент пойдет сюда -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js"></script>
</body>
</html>

Давайте разберем это:

  1. Мы начинаем с базовой структуры HTML.
  2. В <head> мы linking к файлу CSS Bootstrap.
  3. В конце <body> мы включаем JavaScript-файлы Bootstrap и Masonry.

Эти файлы дают нам инструменты, необходимые для создания нашей Masonry-раскладки.

Создание вашего первого Masonry-макета

Теперь давайте создадим простой Masonry-макет с несколькими цветными коробками. Мы добавим этот код внутри тега <body>:

<div class="container my-5">
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-primary text-white">
<div class="card-body">
<h5 class="card-title">Коробка 1</h5>
<p class="card-text">Эта коробка короткая.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-success text-white">
<div class="card-body">
<h5 class="card-title">Коробка 2</h5>
<p class="card-text">Эта коробка немного выше. Masonry подстроится!</p>
<p class="card-text">Смотрите, как хорошо она помещается.</p>
</div>
</div>
</div>
<!-- Добавьте больше коробок здесь -->
</div>
</div>

Давайте разберем это:

  1. Мы создаем контейнер с row внутри.
  2. Атрибут data-masonry='{"percentPosition": true }' говорит Bootstrap использовать Masonry-раскладку для этой строки.
  3. Каждая коробка – это столбец (col-sm-6 col-lg-4) с картой внутри.
  4. Мы используем разные фоновые цвета (bg-primary, bg-success), чтобы сделать наши коробки визуально различимыми.

Настройка вашего Masonry-макета

Теперь, когда у нас есть базовый макет, давайте рассмотрим несколько способов его настройки.

Добавление элементов разного размера

Одна из красот Masonry заключается в том, как она обрабатывает элементы разного размера. Давайте добавим еще несколько коробок с разным контентом:

<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-warning">
<div class="card-body">
<h5 class="card-title">Коробка 3</h5>
<p class="card-text">Эта коробка真的很 высокая!</p>
<p class="card-text">У нее много контента.</p>
<p class="card-text">Masonry позаботится о том, чтобы она идеально помещалась.</p>
<p class="card-text">Независимо от того, насколько она высокая.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title">Коробка 4</h5>
<p class="card-text">Снова короткая коробка.</p>
</div>
</div>
</div>

Добавление изображений в ваш Masonry-макет

Masonry великолепен для галерей изображений. Давайте добавим несколько изображений в наш макет:

<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Случайное изображение">
<div class="card-body">
<h5 class="card-title">Карточка с изображением</h5>
<p class="card-text">Эта карточка имеет изображение.</p>
</div>
</div>
</div>

Этот код добавляет карточку с случайным изображением из Lorem Picsum. Изображение будет загружаться размером 300x200 пикселей, но вы можете изменить эти числа, чтобы получить изображения разных размеров.

Продвинутые техники

Фильтрация элементов Masonry

Одна из крутых функций, которую мы можем добавить, – это возможность фильтрации наших элементов Masonry. Давайте добавим несколько кнопок фильтрации и дадим нашим элементам категории:

<div class="container my-5">
<div class="mb-3">
<button class="btn btn-primary filter-btn" data-filter="all">Все</button>
<button class="btn btn-secondary filter-btn" data-filter="category1">Категория 1</button>
<button class="btn btn-secondary filter-btn" data-filter="category2">Категория 2</button>
</div>
<div class="row" id="masonry-grid" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category1">
<!-- Контент элемента -->
</div>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category2">
<!-- Контент элемента -->
</div>
<!-- Больше элементов... -->
</div>
</div>

Чтобы это работало, нам нужно добавить немного JavaScript:

<script>
document.addEventListener('DOMContentLoaded', function() {
var grid = document.querySelector('#masonry-grid');
var msnry = new Masonry(grid, {
percentPosition: true
});

var filterButtons = document.querySelectorAll('.filter-btn');
filterButtons.forEach(function(button) {
button.addEventListener('click', function() {
var filterValue = this.getAttribute('data-filter');
var items = grid.querySelectorAll('.masonry-item');

items.forEach(function(item) {
if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});

msnry.layout();
});
});
});
</script>

Этот скрипт делает следующее:

  1. Инициализирует Masonry на нашей сетке.
  2. Добавляет обработчики событий клика на наши кнопки фильтрации.
  3. Когда кнопка нажата, он показывает/скрывает элементы в зависимости от их категории.
  4. После фильтрации он вызывает msnry.layout(), чтобы перерасположить видимые элементы.

Заключение

Поздравляю! Вы только что создали свой первый Bootstrap Masonry макет. От базовых сеток до продвинутой фильтрации, вы теперь имеете инструменты для создания динамичных, адаптивных макетов, которые сделают ваши веб-страницы выделяющимися.

Remember, the key to mastering web development is practice. Try experimenting with different content, layouts, and features. Don't be afraid to break things – that's often how we learn the most valuable lessons in coding.

Keep building, keep learning, and most importantly, have fun with it! Before you know it, you'll be creating web layouts that would make even the most skilled masons jealous. Happy coding!

Method Description
Masonry(element[, options]) Initialize Masonry on an element
msnry.layout() Trigger layout after making changes
msnry.appended(elements) Add and lay out newly appended item elements
msnry.prepended(elements) Add and lay out newly prepended item elements
msnry.destroy() Remove Masonry functionality completely

Credits: Image by storyset

Предыдущий учебник:
Демонстрация Bootstrap-прилипающей навигационной панели в подвале
Следующий учебник:
Демо шаблона старта Bootstrap