Что такое Bootstrap?

Что такое 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

• добавлен новый брекпойнт в сетку (xxl для

1400px и выше);

• новые классы .g-*, .gx-* и .gy-* для указания горизонтальных и вертикальных отступов между ячейками;

• добавлен новый компонент offcanvas;

• удален компонент Media, его реализацию предлагают выполнять с помощью утилитных классов Bootstrap;

• улучшен раздел по формам в документации, и добавлена возможность создания в input плавающего label.

Третью версию в основном имеет смысл использовать, если нужна поддержка «старых» браузеров (IE8 и IE9).

Самостоятельная работа

Создать верстку single-page сайта использую сетку и компоненты Bootstrap.