Что такое Bootstrap и зачем он нужен?

Основная область его применения – это фронтенд разработка сайтов и интерфейсов админок. Среди аналогичных систем (Foundation, UIkit, Semantic UI, InK и др.) фреймворк Bootstrap является самым популярным.

Почему Bootstrap так популярен? Это связано с тем, что он позволяет верстать сайты в несколько раз быстрее, чем это можно выполнить на «чистом» CSS и JavaScript. А в нашем мире время – это очень ценный ресурс. Кроме этого, его популярность ещё обусловлена доступностью. Она заключается в том, что на нём даже начинающий разработчик может верстать достаточно качественные макеты, которые трудно было бы выполнить без глубоких знаний веб-технологий и достаточной практики.

Фреймворк Bootstrap представляет собой набор CSS и JavaScript файлов. Чтобы его использовать эти файлы необходимо просто подключить к странице. После этого вам станут доступны инструменты данного фреймворка: колоночная система (сетка Bootstrap), классы и компоненты.

Как он работает? Например, чтобы создать кнопку на странице с помощью Bootstrap, достаточно к ссылке или элементу button добавить всего несколько классов.

Создание кнопки в Bootstrap 4:

<!-- Чтобы сделать ссылку в виде кнопки добавим к ней 2 класса: btn и btn-success -->
<a href="#" class="btn btn-success">Ссылка, оформленная в виде кнопки</a>

Ну как? Сколько на это потребовалось времени? Да, всего несколько секунд.

А если, например, мне нужно создать вкладки, то для этого необходимо будет лишь скопировать готовый HTML фрагмент, и отредактировать его так, чтобы в нём остался код только для определённого количества вкладок:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <!-- атрибут href должен указывать на элемент, который необходимо показать -->
    <a class="nav-link active" data-toggle="tab" href="#section-1" role="tab" aria-controls="section-1" aria-selected="true">Секция 1</a>
  </li>
  <li class="nav-item">
    <!-- атрибут href должен указывать на элемент, который необходимо показать -->
    <a class="nav-link" data-toggle="tab" href="#section-2" role="tab" aria-controls="section-2"
      aria-selected="false">Секция 2</a>
  </li>
  <li class="nav-item">
    <!-- атрибут href должен указывать на элемент, который необходимо показать -->
    <a class="nav-link" data-toggle="tab" href="#section-3" role="tab" aria-controls="section-3"
      aria-selected="false">Секция 3</a>
  </li>
</ul>
<div class="tab-content">
  <!-- атрибут id определяет вкладку, которая будет его показывать -->
  <div class="tab-pane fade show active" id="section-1" role="tabpanel" aria-labelledby="home-tab">...</div>
  <!-- атрибут id определяет вкладку, которая будет его показывать -->
  <div class="tab-pane fade" id="section-2" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <!-- атрибут id определяет вкладку, которая будет его показывать -->
  <div class="tab-pane fade" id="section-3" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Всё, вкладки готовы. На это тоже ушли считанные секунды. Правда, потрясающая скорость. В этом сила Bootstrap.

Но, Bootstrap – это не просто набор готовых инструментов (HTML фрагментов, классов, компонентов и плагинов), а хорошо спроектированный фронтенд фреймворк, который довольно просто можно настроить под себя посредством редактирования Sass переменных и использования миксинов.

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

Bootstrap состоит из:

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

С чего начать изучение Bootstrap

Первое, что нам необходимо — это скачать фреймворк и подключить его к странице. Как это выполнить детально описано в статье «Установка платформы Bootstrap».

После того как мы это сделаем обычно возникает следующий вопрос: «А что дальше? Как использовать Bootstrap?». На самом деле тут нет ничего сложного, создавать страницы с использованием Bootstrap очень просто.

Но для этого, нам необходимо сначала ещё изучить сетку и научиться её использовать для создания макетов страниц и разметки блоков. Почитать про неё можно тут (для тех, кто использует Bootstrap 3) или здесь (для Bootstrap 4).

Сетка в 3.x версии построена на float, а в 4.x – на flexbox.

Затем нужно изучить компоненты и классы Bootstrap.

После изучение этих базовых вещей уже можно будет переходить к вёрстке сайта или веб-приложения.

Ну если ваша задача не просто использовать Bootstrap, а что-то в нём изменять, переделывать, то без хороших знаний CSS тут конечно уже не обойтись. Некоторые вещи, конечно, можно настроить через изменения SCSS переменных и применения миксинов, а другие – нет. И это касается любых фреймворков.

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

Преимущества Bootstrap при его использовании для frontend разработки сайтов и интерфейсов админок:

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

Фреймворк Bootstrap – это проект с открытым исходным кодом, доступным на Github. Он имеет лицензию MIT. Это означает, что его можно бесплатно использовать как в открытых, так и в коммерческих проектах.

Bootstrap, конечно, хороший инструмент, но на нём верстают далеко не всё. Его, например не имеет смысла использовать для:

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

Bootstrap, как и большинство подобных фреймворков, имеет недостатки. Среди них можно отметить следующие:

  • более большой размер конечных css и js-файлов проекта, чем они получились, если бы мы всё это создавали самостоятельно (это связано с тем, что стили фреймворка и его js-код содержат универсальный код (на все случаи жизни), а по факту для конкретного проекта из всего этого может потребоваться только часть);
  • сложность использования Bootstrap для вёрстки сайтов с уникальным дизайном, т.к. разработка в этом случае будет сопровождаться значительным переписыванием его кода и простой настройкой Bootstrap переменных тут уже не обойтись.

Первый недостаток можно немного «сгладить», если выполнить самостоятельную сборку проекта из исходных кодов и включить в неё только те компоненты, которые нам нужны. В этом случае код этого фреймворка будет значительно меньше. Как это выполнить в Bootstrap 4 можно посмотреть здесь, а в Bootstrap 3 – тут.

Какую версию Bootstrap выбрать

Для разработки большинства веб-проектов лучше использовать последнюю версию Bootstrap. На текущий момент — это 4.6.0 (скачать).

Эта версия, как уже было отмечено выше, построена на CSS Flexbox. Она поддерживает последние, стабильные версии всех основных браузеров и платформ (включая Internet Explorer 10 – 11 и Microsoft Edge).