В этой статье мы познакомимся с фреймворком Bootstrap. Рассмотрим, что это такое и зачем он нужен. Разберём его основные преимущества и недостатки.

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

Логотип фреймворка Bootstrap 4

Фреймворк Bootstrap используется по всему миру не только независимыми разработчиками, но иногда и целыми компаниями. На Bootstrap создано очень много различных сайтов, посмотреть на них можно на странице Bootstrap Expo.

Основная область его применения – это разработка frontend сайтов и интерфейсов админок. Среди аналогичных систем (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?

Bootstrap состоит из:

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

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

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

Многие начинающие веб-разработчики задаются вопросом: "Как начать работать с Bootstrap?". На самом деле создавать страницы на Bootstrap очень просто.

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

Сетка в Bootstrap 3 построена на float, а Bootstrap 4 – на CSS Flexbox.

Следующее – это изучить компоненты и классы Bootstrap.

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

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

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

Преимущества, которые даёт фреймворк Bootstrap при разработке на его основе frontend части сайтов и интерфейсов админок:

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

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

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

Тоже касается и личных проектов, если у вас есть достаточно количество времени и ваш уровень знания технологий HTML, CSS и JavaScript достаточный, чтобы это осуществить, то тогда Bootstrap вам не нужен.

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

Другой недостаток связан с тем, что код CSS и JavaScript вашего проекта будет значительно больше по размеру, чем если бы вы его самостоятельно написали конкретно под этот проект. Ну, это понятно, т.к. стили, да и код JavaScript, заточены в Bootstrap под различные сценарии, которые в вашем проекте могут просто не использоваться. Уменьшить код фреймворка Bootstrap можно выполнив самостоятельную сборку проекта из исходных кодов и включить в неё только те компоненты, которые нужны. Как это выполнить для Bootstrap 4 можно почитать в этой статье, а для Bootstrap 3 - в этой.

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

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

Скачать Bootstrap v.4.3.1.

В этой версии верстать на много лучше, т.к. она основано как было уже отмечено выше на CSS Flexbox.

Данная версия поддерживает последние, стабильные версии всех основных браузеров и платформ. В операционной системе Windows эта версия Bootstrap поддерживает Internet Explorer 10-11 и Microsoft Edge.

Если же вам нужна поддержка более старых версий браузеров, например Internet Explorer 8 и 9, то в этом случае лучше остановиться на третьей версии Bootstrap. Последняя актуальная версия из 3 ветки - это 3.4.1.

Скачать Bootstrap v.3.4.1.

В старых версиях браузера Internet Explorer (8 и ниже) некоторые компоненты Bootstrap 3 могут отображаться без градиентов, теней и закруглённых углов. Это связано с тем, что эти версии не поддерживают свойства CSS3, которые используются в её компонентах.

Следующий шаг в изучении Bootstrap, это его установка.