Что такое Bootstrap и зачем он нужен?
Bootstrap — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется вебразработчиками для быстрой вёрстки адаптивных дизайнов сайтов и веб-приложений.
Из чего состоит Bootstrap
Bootstrap состоит из:
инструментов для создания макета (обёрточных контейнеров, мощной системы сеток, гибких медиа-объектов, адаптивных утилитных классов);
классов для стилизации базового контента: текста, изображений, кода, таблиц и figure;
готовых компонентов: кнопок, форм, горизонтальных и вертикальных навигационных панелей, слайдеров, выпадающих списков, аккордеонов, модальных окон, всплывающих подсказок и др.;
утилитных классов для решения традиционных задач наиболее часто возникающими перед вебразработчиками: выравнивание текста, отображение и скрытие элементов, задания цвета, фона, margin и padding отступов, и т.д.
Преимущества и недостатки фреймворка Bootstrap
Преимущества Bootstrap при его использовании для frontend разработки сайтов и интерфейсов админок:
высокая скорость создания качественной адаптивной вёрстки даже начинающими вебразработчиками (достигается это благодаря использованию готовых классов и компонентов, созданных профессионалами);
кроссбраузерность и кроссплатформеннось (корректное отображение и работа сайта во всех поддерживаемых этим фреймворком браузерах и операционных системах);
наличие большого количество готовых хорошо продуманных компонентов, протестированных огромным сообществом веб-разработчиков на различных устройствах;
возможность настройки под свой проект, достигается это посредством изменения SCSS переменных и использования миксинов (можно изменить количество колонок, цвета, радиус скруглений, отступы между колонками и т.д.);
низкий порог вхождения; для работы с фреймворком не обязательно иметь «глубокие» знания по HTML, CSS, JavaScript и jQuery (достаточно знать только основы этих технологий);
однородность дизайна и его согласованность между различными компонентами (в Bootstrap все компоненты выполнены в едином стиле);
наличие огромного количества сообществ и обучающих материалов; при желании это поможет не только хорошо разобраться в фреймворке, но и найти ответы практически на любые возникающие у вас вопросы.
Bootstrap, конечно, хороший инструмент, но на нём верстают далеко не всё. Его, например не имеет смысла использовать для:
создания фронтендов проектов с уникальным дизайном;
разработки проектов, в которых заказчик готов платить за проект на «чистом» CSS и JavaScript (в большинстве случаях такая разработка осуществляется в команде, в которой каждый её участник выполняет какой-то свой определенный набор функций);
вёрстки личных проектов, если у вас есть достаточно количество времени и ваш уровень знаний по HTML, CSS и JavaScript является достаточным, чтобы это осуществить.
Bootstrap, как и большинство подобных фреймворков, имеет недостатки. Среди них можно отметить следующие:
более большой размер конечных css и js-файлов проекта, чем они получились, если бы мы всё это создавали самостоятельно (это связано с тем, что стили фреймворка и его js-код содержат универсальный код (на все случаи жизни), а по факту для конкретного проекта из всего этого может потребоваться только часть);
сложность использования Bootstrap для вёрстки сайтов с уникальным дизайном, т.к. разработка в этом случае будет сопровождаться значительным переписыванием его кода и простой настройкой Bootstrap переменных тут уже не обойтись.
Какую версию Bootstrap выбрать
Для разработки большинства веб-проектов лучше использовать последнюю версию Bootstrap в выбранной ветке.
На текущий момент:
в v5 - это 5.0.0 (скачать);
в v4 - это 4.6.0 (скачать); в v3 - это 3.4.1 (скачать).
Bootstrap 5 рекомендуется для проектов, которые будут использоваться только в современных браузерах (поддержка IE и других браузеров не нужна). В других случаях - Bootstrap 4.
Что нового в Bootstrap 5:
нет зависимости от библиотеки jQuery, все плагины переписаны на чистом JavaScript;
библиотека Popper обновлена до v2.x с v1.x;
не поддерживаются Internet Explorer 10 и 11,
Microsoft Edge
Safari
1400px и выше);
новые классы .g-*, .gx-* и .gy-* для указания горизонтальных и вертикальных отступов между ячейками;
добавлен новый компонент offcanvas;
удален компонент Media, его реализацию предлагают выполнять с помощью утилитных классов Bootstrap;
улучшен раздел по формам в документации, и добавлена возможность создания в input плавающего label.
Третью версию в основном имеет смысл использовать, если нужна поддержка «старых» браузеров (IE8 и IE9).
Самостоятельная работа
Создать верстку single-page сайта использую сетку и компоненты Bootstrap.