Joomla-4 Bootstrap-5

Bootstrap - это фрэймворк (компонент вывода материалов), построенный на css и JavaScript. Его создали разработчики социальной сети Twitter и сделали бесплатным Open Source.

Новая версия Bootstrap-5 - это современная веб-технология, исповедующая подход "Легко и Быстро" - HTML и CSS, а не JS.

По возможности, мы НЕ используем JavaScript. В целом, HTML и CSS более эффективны и доступны большему числу людей разного уровня. HTML и CSS также быстрее в браузерах, чем JS, и ваш браузер в целом поддержит их богатую функциональность.

Однако интерактивные элементы возможно реализовать только с помощью JavaScript. Поэтому была внедрена модульная технология JavaScript-ES5/ES6. Модульная система дала возможность отказаться от сторонних библиотек MooTools и jQuery. Ранее нужно было обязательно загружать базовый файл библиотеки, который весит 120...200...300... Kb плюс еще файл компонента. Сейчас каждый компонент в отдельном именном файле небольшого размера, который загружается принудительным вызовом только тогда, когда вам нужно.

Пример
У вас на странице установлен слайдер, галерея, аккордеон и т.п. Необходимо селектором вызвать соответствующий файл: .selector вызывает bootstrap.carousel или bootstrap.collapse или что-то другое. Этот файл будет загружен только на эту страницу, и весит он всего 5...10...15 Kb. Как подключать селектор детально расписано в официальной инструкции, примеры приведены на моем сайте в соответствующих разделах, там же можно скачать файлы примера. Сложного ничего нет, в код лазить не надо, все сделано за вас :)

Визуальное оформление. Стили .css

Сетки Bootstrap (grid) использует серию контейнеров, строк и столбцов для размещения и выравнивания содержимого. Сетки построены на flexbox и полностью отзывчивы на разных экранах.

Основные переменные: контейнер, система сеток, колонки, отступы - container, grid, flex, margin, padding.

container: фиксирует все элементы внутри себя.

grid и flex: выравнивают элементы по краям, верх, низ, между собой и т.д.

margin и padding: делают необходимые отступы rem, em, px, %

Обратите внимание - left и right заменены на start и end. Отступ справа обозначаются классом pe (padding end) или me (margin end), аналогично слева - ps (padding start), ms (margin start).

Файл template.css имеет большой вес - 250 kb. В него загружено всего очень много, чтобы вы смогли прочувствовать всю мощь Bootstrap-5. После настройки своего живого сайта я удалил ненужные стили, вес стал 107 kb.

Хотелось бы отметить короткое, интуитивно понятное название классов. p-3, m-2, g-0, gx-2, gy-5 и т.п Гениально! Это не дикий конский код индусов 😉 (для тех кто в теме поймет)

 

Joomla 4 представляет модульный подход для интерактивных компонентов

Некоторые из компонентов, описанных в документации Bootstrap, используют только CSS. Например, Breadcrumbs отображается с помощью CSS и не требует поддержки Javascript. Другие реагируют на действия пользователя, такие как щелчок или наведение, и нуждаются в подключении Javascript. Последние называются интерактивными компонентами. В этой статье объясняется, как использовать их в статьях и настраиваемом модуле.

Как я уже говорил выше, функциональность разбита на отдельные компоненты, поддерживаемые отдельными файлами. Нет единого файлового подхода, как это было с Bootstrap в Joomla-3. Модульный подход более эффективен и предлагает прирост производительности (отправляйте только тот код, который нужен, вместо того, чтобы доставлять все, на случай, если какой-то странице понадобится какой-то компонент).

Полная документация настройки Bootstrap Components in Joomla 4