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

CSS фреймворк Twitter Bootstrap 4

Bootstrap - это открытый и бесплатный CSS фреймворк, который используется для быстрого создания современных дизайнов сайтов. Среди аналогичных систем (Foundation, UIkit, Semantic UI, InK и др.) фреймворк Bootstrap является самым популярным. Основное назначение данной платформы – это разработка адаптивных интерфейсов веб-страниц (веб-сайтов) посредством складывания его из "готовых" блоков. Под "готовыми" блоками Bootstrap понимаются завершённые куски HTML кода (компоненты), классы CSS и плагины jQuery (динамические компоненты). Это означает то, что не надо иметь хорошее знание языка разметки HTML, таблиц стилей CSS и языка сценариев JavaScript с jQuery, для того чтобы вам приступить к проектированию макета сайта. Достаточно просто найти необходимый компонент и встроить его в определённое место на странице. Это основный принцип использование CSS фреймворка Bootstrap.

Элементы (кирпичики) Bootstrap

Возможности платформы Bootstrap определяются элементами (кирпичиками) посредством которых осуществляется создание интерфейса. Все строительные элементы можно сгруппировать в следующие основные группы:

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

Начало работы с Bootstrap

Многие начинающие разработчики задаются вопросом: "Как начать работать с Bootstrap?". На самом деле создавать макеты страниц с помощью Bootstrap очень просто. Первое что вам необходимо - это скачать и подключить Bootstrap к странице. Как это выполнить рассмотрено на уроке Установка платформы Bootstrap. Следующий шаг - это создание сетки. Этот этап является наиболее сложным, особенно для тех, кто первый раз начинает использовать фреймворк Bootstrap. Поэтому на данном этапе стоит остановиться более подробно и разобраться с тем как она (сетка) работает. Понять основные принципы работы с сеткой вам поможет урок Сетка Bootstrap. Заключительный этап - это наполнение ячеек сетки различными HTML элементами и компонентами Bootstrap. Это основные шаги по созданию сайта на Bootstrap с нуля.

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

Если взглянуть на платформу с другой стороны, то можно обнаружить что она состоит из CSS файла (bootstrap.css), плагина JavaScript (bootstrap.js) и каталога fonts, в котором расположены иконки в формате шрифта.

Теперь перейдём к рассмотрению основных преимуществ Bootstrap.

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

Преимущества Bootstrap

Использование фреймворка Bootstrap предоставляет веб-разработчикам следующие преимущества:

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

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

Кроме этого Bootstrap 4 вообще не поддерживает браузер Internet Explorer версии 8 и ниже. Если вам все ещё нужна поддержка старых браузеров, то в этом случае вам стоит использовать Bootstrap 3.


Следующий урок: Подключение CSS фреймворка Bootstrap к странице.