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