#1 Уроки по Bootstrap 5 - Обзор, загрузка и подключение

• Обсуждение новой версии Bootstrap 5.0, которая находится в бета-тесте.  

• Преимущества новой версии: отсутствие зависимости от библиотеки jQuery, работа на собственном коде.  

• Официальный сайт и документация на русском языке.  

• Основные ссылки на сайте: начало работы, краткая инструкция, скачать.  

• Пример использования Bootstrap для создания сайта без макета.  

• Преимущества Bootstrap для создания адаптивных сайтов.  

• Пошаговая инструкция по подключению Bootstrap в редактор кода.  

• Важность правильного порядка подключения стилей и JavaScript.  

• Использование библиотеки Popper.js для всплывающих подсказок.  

• Обязательные элементы в стартовом шаблоне: HTML5, метатег viewport.  

• Концепция mobile-first для адаптивности на мобильных устройствах.  

• Использование Box Sizing и Reset CSS для сброса стандартных стилей.  

• Создание контейнера и столбцов с помощью Bootstrap.  

• Пример структуры: контейнер, строка, столбцы.  

• Перестройка столбцов в зависимости от размера экрана.  

• Возможность скачивания скомпилированных CSS и JavaScript файлов.  

• Исходные файлы для работы всех модулей Bootstrap.  

• Подробное изучение документации для лучшего понимания фреймворка.  

• Скачали Bootstrap и извлекли его в текущую папку.  

• В каталоге есть файлы CSS и JavaScript.  

• Рассматриваем файлы Bootstrap Minified и Bootstrap Bundle.  

• Bootstrap Minified весит меньше, так как удаляет пробелы и лишние символы.  

• Bootstrap Bundle включает зависимость Popper.js, что увеличивает вес на 18 КБ.  

• Используем Bootstrap Bundle для полного функционала Bootstrap.  

• В каталоге CSS есть файлы Bootstrap Utilities и Bootstrap Reset.  

• Bootstrap Reset сбрасывает стандартные стили для кросс-браузерности.  

• Bootstrap Grid CSS включает только сетку, что позволяет использовать её отдельно.  

• Подключаем Bootstrap Minified CSS локально, чтобы не зависеть от интернета.  

• Удаляем ненужные атрибуты и указываем путь к файлу.  

• Обновляем страницу и проверяем работу сетки.  

• Устанавливаем расширение для работы с Bootstrap 5 и Foundation.  

• Используем сниппет для создания форм и других элементов.  

• Пример использования сниппета для создания карусели.  

• Bootstrap включает множество стилей и JavaScript-модулей.  

• Переход с Bootstrap 4 на 5 прост благодаря изменениям в структуре и именовании классов.  

• Видео полезно для новичков и тех, кто знаком с Bootstrap 4.