Bootstrap: что это за фреймворк и как им пользоваться

Bootstrap

Bootstrap framework — это бесплатный фреймворк с открытым исходным кодом для создания адаптивных интерфейсов сайтов и веб-приложений. Он позволяет верстать сайты во много раз быстрее и проще, чем на «чистом» JavaScript и CSS, при этом он обеспечивает единство стилей и понимание кода, что упрощает работу в команде.

Написан бутстрап на HTML, CSS, JavaScript и Sass. Распространяется по лицензии MIT, то есть его можно бесплатно использовать даже в коммерческих проектах. Это один из самых популярных фреймворков для фронтенд-разработки, который используется как независимыми разработчиками, так и крупными компаниями.

Из чего состоит Bootstrap

По сути, фреймворк Bootstrap — это набор CSS- и JavaScript-файлов с готовыми шаблонами для создания дизайна. Текущая пятая версия включает в себя:

• инструменты для создания макетов — гибкие медиа-объекты, оберточные контейнеры и системы сеток;
• библиотеки классов для стилизации базового контента — текста, изображений, кода и таблиц;
• готовые элементы — кнопки, тултипы, карусели, формы, навигационные панели, слайдеры, выпадающие списки, аккордеоны, модальные окна, всплывающие подсказки и другие;
• утилитарные классы для решения частых проблем — отображение и скрытие элементов, выравнивание текста, задание цвета, тени, фона, отступов и так далее;

• адаптивный мета-тег для мобильных устройств;
• поддержку HTML5 doctype;
• препроцессор Sass.

В папке фреймворка есть файлы с расширением .min — это минимизированные, или сжатые, файлы. Они имеют меньший размер и, следовательно, быстрее исполняются.

Преимущества и недостатки

Плюсы Bootstrap:

• позволяет быстро создавать сайты и веб-приложения за счет готовых шаблонов и классов для организации контента;
• легко настроить под свой проект;
• не требует глубоких знаний HTML, CSS, JavaScript и jQuery, что делает порог входа очень низким;
• создает единый стиль и понятный код, что облегчает работу в команде;
• обеспечивает кросс-платформенность и кросс-браузерность;
• имеет много компонентов, адаптированных для пользователей с ограниченными возможностями, например, голосовой ввод;
• использует современные стандарты защиты от атак и уязвимостей для безопасности сайтов и приложений;
• большое сообщество, множество обучающих материалов и возможность получить ответ на любой вопрос.

Минусы Bootstrap:

• интерфейсы плохо адаптированы под старые версии браузеров;
• не позволяет создать неповторимый дизайн сайта, поскольку все строится на готовых шаблонах;
• много лишнего кода, который делает проект тяжелее, чем он мог бы быть.

Как установить

Чтобы начать пользоваться Bootstrap, необходим любой текстовый редактор для работы с кодом — Notepad++, Sublime Text, Visual Studio Code, или IDE — Visual Studio, IntelliJ IDEA, WebStorm. Также понадобится браузер и заготовка для сайта. Остается только подключить бутстрап к своему сайту. Это можно сделать разными способами.

Подключение через CDN

Самый простой вариант, при котором не нужно ничего скачивать. Для подключения достаточно вставить в HTML своего сайта ссылки на файлы, размещенные на серверах CDN. У каждой версии бутстрап свой способ подключения.

Чтобы протестировать работоспособность, можно создать кнопку, которая в момент приближения курсора покажет всплывающую подсказку.

Локально с настройками по умолчанию

Для локальной установки необходимо пройти следующие этапы:

1. Скачать сборку с GitHub в виде архива.
2. Распаковать содержимое.
3. Перенести «bootstrap.min.css» и «bootstrap.bundle.min.js» в свой проект.
4. Подключить эти файлы к HTML-странице.

Последний шаг — поменять "путь_к_вашему_файлу" на путь к файлам Bootstrap, скопированным в ваш проект.

Локально со своими настройками

Чтобы добавить свои настройки в локальную версию, необходимо:

1. Проделать то, что указано в прошлом пункте, но добавить в тело разметки скрипт:

<script src="путь_к_вашему_файлу/bootstrap.bundle.min.js"></script>

1. Создать CSS-файл и подключить его после файла Bootstrap. В нем можно будет переопределить переменные и стили.
2. Если вы используете SASS, то можно импортировать Bootstrap в свой SASS-файл и компилировать их вместе.

Пример переопределения переменных с помощью CSS:

В этом примере мы импортируем файл bootstrap.min.css и затем переопределяем некоторые переменные и стили бутстрап. В частности, мы изменяем цвет фона, цвета кнопки, навигации и футера. То же самое для Sass:

Установка через менеджера пакетов

Рассмотрим на примере npm:

1. Скачайте npm с помощью команды npm install -g npm.
2. Создайте новую директорию для вашего проекта и перейдите в нее.
3. Скачайте фреймворк с помощью команды npm install bootstrap. Файлы попадут в node_modules/bootstrap.
4. Подключите файлы бутстрап к сайту:

Как начать пользоваться Bootstrap

Для начала нужно изучить сетку, потренироваться верстать макеты страниц и делать разметку блоков. В третьей версии сетка построена на float, а в четвертой и пятой — на flexbox. После того как разберетесь с сеткой, нужно понять, как настраивать и верстать компоненты, и научиться вставлять их в нужные места макета. Это минимум необходимого. Если вам нужно что-то изменить под себя, то без дополнительных знаний не обойтись. Что можно изучить:

• курс для начинающих на сайте itProger. Он включает в себя изучение базовых классов и написание скриптов на JS. Курс доступен в текстовом и видеоформате;
• официальную документацию с сайта bootstrap-4.ru на русском языке для каждой версии;
• курс по работе с пятой версией на сайте hexlet.io;
• подробный курс на сайте itchief.ru, своего рода учебник с открытыми комментариями под каждой статьей.

Кроме того, в интернете есть множество сайтов для самообучения с открытым доступом.

Когда стоит использовать

Bootstrap можно использовать в следующих случаях:

• когда не требуется уникальный дизайн;
• когда страницы собраны из простых компонентов;
• если в будущем не будет глобального редизайна;
• если требуется высокая скорость внедрения;
• если нужны минимальные трудозатраты.

Когда его лучше не использовать:

• при работе со старыми версиями браузеров;
• когда нужно высокое быстродействие.

Альтернативы Bootstrap

Foundation

Это модульный фреймворк для создания адаптивных сайтов и электронных писем, построенный с использованием Sass/SCSS. Он состоит из серии таблиц стилей Sass, которые реализуют различные компоненты набора инструментов. Имеет открытый исходный код.

Среди организаций, использующих Foundation, такие гиганты как Adobe, Amazon, HP и eBay. Он включает в себя адаптивную сетку, кнопки, базовую типографику и другие необходимые элементы интерфейса. Также есть специальная версия Foundation for Emails для создания адаптивных электронных писем на HTML.

Bulma

Легковесный CSS-фреймворк с открытым исходным кодом, один из первых реализовавший полноценную сетку на CSS Flexbox. Bulma поставляется с большой палитрой цветов и выбором элементов для создания сайтов. Имеет существенный недостаток — только CSS, без JavaScript, поэтому писать JS-скрипты для интерактивных элементов придется самостоятельно.

Materialize и Material Design Lite

Это легковесные фреймворки, основанные на дизайне Material Design от Google. Оба имеют открытый исходный код. Materialize использует SASS, а MDL — чистый CSS. Для обоих характерна простота использования, низкий порог вхождения и большое число компонентов. Система сеток 12-колоночная, основана на flexbox.

Skeleton

Минималистичный CSS-фреймворк для быстрого создания простых проектов. Он включает основные элементы вроде кнопок, списков, форм и таблиц. Ориентирован на мобильные устройства, что позволяет сохранять привлекательность макета на любом экране. Не включает в себя JavaScript-элементы.

Pure.css

Продукт команды Yahoo. Представляет собой набор модульных CSS-компонентов. Pure.css создавался с учетом требований мобильных устройств, поэтому имеет малый вес. Система сеток основана на процентной ширине столбцов.

Заключение

Bootstrap — это мощный и популярный фреймворк для веб-разработки, который может быть полезен для создания адаптивных кросс-браузерных веб-приложений. Он имеет низкий порог вхождения, что делает его доступным для новичков, и предоставляет множество готовых компонентов для быстрого создания интерфейсов. Однако он не подходит для создания неповторимого дизайна или поддержки старых версий браузеров.