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

Что такое Bootstrap

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

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

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

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

Классы Bootstrap можно разбить на 3 большие группы:

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

Кроме классов во фреймворке Bootstrap имеются ещё и компоненты (готовые объекты интерфейса). Это кнопки, хлебные крошки, формы, навигационные меню, выпадающие списки, всплывающие панели и др.

Основы работы с Bootstrap

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

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

Следующий шаг - это создание сетки. Этот этап является наиболее сложным, особенно для тех, кто первый раз начинает использовать фреймворк Bootstrap. Поэтому на данном этапе стоит остановиться более подробно и разобраться с тем как она (сетка) работает. Основные принципы работы с сеткой можно почитать в этом уроке (Bootstrap 3) или в этом (Bootstrap 4) в зависимости от того какую версию фреймворка вы используете.

После создания сетки переходят к наполнению её «ячеек» контентом и компонентами.

Это основные шаги по созданию дизайна сайта на Bootstrap.

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

Применение фреймворка Bootstrap при создании сайтов даёт следующие преимущества:

  • Очень быстрое создание качественных адаптивных дизайнов сайтов (достигается благодаря использованию хорошо продуманных и протестированных огромным количеством веб-разработчиков классов и готовых компонентов).
  • Современный дизайн (оформление HTML элементов и компонентов Bootstrap выполнено в едином стиле в последних тенденциях веб-дизайна).
  • Нет необходимости иметь глубокие знания по HTML, CSS, JavaScript и jQuery (достаточно знать только основы вышеперечисленных технологий).
  • Является кроссбраузерным и кроссплатформенным (адаптирован для всех популярных операционных систем и браузеров (Mozilla Firefox, Google Chrome, Safari, Internet Explorer и Opera и др.), работающих в этих системах).
  • Является открытым и бесплатным. Фреймворк Bootstrap – это проект с открытым исходным кодом, доступным на Github. Он имеет лицензию MIT. Это означает, что его можно использовать бесплатно как для личного, так и для коммерческого использования.

Но, кроме преимуществ у Bootstrap есть также недостатки. Первый заключается в том, что он не подходит для проектов имеющих уникальный дизайн. В этом случае из Bootstrap для проекта в основном берут только сетку. Второй – это когда вам для проекта нужны не все компоненты и классы, а только некоторые. Этот недостаток, не является проблемой. Например, на странице Customize можно очень просто собрать свою сборку, состоящую только из нужных классов и компонентов Bootstrap.

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

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

Скачать Bootstrap 4.0.0 beta 2

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

Если же проект должен корректно работать и в более старых браузерах (Internet Explorer 8 и 9), то в этом случае для его реализации лучше выбрать вместо 4.0 версию Bootstrap 3 (последняя версия 3.3.7).

Скачать Bootstrap 3.3.7

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