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 i flex: вирівнюють елементи по краях, верх, низ, між собою тощо.
margin i padding: роблять необхідні відступи rem, em, px, %
Зверніть увагу - left і right замінені на start i 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. Модульний підхід більш ефективний і пропонує приріст продуктивності (надсилайте тільки той код, який потрібен, замість того, щоб доставляти все, на випадок, якщо якійсь сторінці знадобиться якийсь компонент).