Недавно состоялся долгожданный релиз бета-версии Bootstrap 4. Front-end разработчики по всему миру ожидали этого события около полутора лет. Теперь мы можем разрабатывать сайты на новейшей версии самого популярного фреймворка в мире!
Что такое Bootstrap?
Bootstrap появился в далеком 2011 году в компании Twitter. Изначально это была небольшая библиотека для внутренних нужд компании, однако он быстро завоевал популярность и вышел далеко за ее пределы.
На сегодняшний день Bootstrap является признанным фаворитом среди разработчиков адаптивных сайтов. Это фреймворк, состоящий из шаблонов HTML, CSS и расширений JavaScript.
Он следует принципу “mobile-first”, что подразумевает изначальную разработку сайта для небольшого экрана мобильного телефона, затем контент размещается согласно разрешению планшета и, наконец, верстальщик работает над версией для ноутбука и компьютера. Благодаря такому подходу конечный пользователь может просматривать сайт на любых устройствах, не испытывая малейшего неудобства.

Подключение Bootstrap
Существует два способа подключения фреймворка к Вашему проекту. Его можно скачать с официального сайта http://getbootstrap.com, либо использовать ссылки на версию Бутстрапа, расположенную на сайте MaxCDN.
Использование MaxCDN имеет свои плюсы и минусы. Несомненным достоинством является быстрая загрузка. Однако если сеть будет недоступна, то и фреймворк не загрузится.
Преимущества сайта на Bootstrap
Скорость разработки
Благодаря большому количеству предустановленных компонентов верстальщику нет нужды начинать разработку проекта с нуля.
Адаптивность
Фреймворк Бутстрап включает в себя 12-ти колоночную сетку. При разработке сайта верстальщику остается только принять решение, сколько колонок отвести на тот или иной компонент в зависимости от размера экрана пользователя.
Популярность
Миллионы сайтов по всему миру созданы на Bootstrap. Соответственно, разработано несметное количество шаблонов и различных вариантов оформления компонентов.

Бесплатность
Bootstrap можно использовать абсолютно бесплатно как при самостоятельной разработке сайта, так и при коммерческой деятельности.
Гибкая настройка
Bootstrap поддерживает возможность гибкой настройки компонентов. Можно выбрать только те компоненты CSS и JavaScript, которые понадобятся в текущем проекте.
Документированность
Официальный сайт Bootstrap обладает исчерпывающей документацией с большим количеством примеров; также много информации можно найти на специализированных форумах.
Поддержка
Bootstrap активно развивается, выходят новые версии, исправляются ошибки и появляется новый функционал.
Эволюция Bootstrap
Bootstrap отвечает самым современным требованиям дизайна. Рассмотрим, как эволюционировал фреймворк на протяжении пяти лет на примере кнопок.
Не так давно в мире веб-дизайна господствовали градиенты, что мы и наблюдаем в первых двух версиях:

Время не стоит на месте, теперь популярен так называемый «плоский» дизайн (flat). Соответственно, это можно наблюдать в текущей версии Bootstrap:

Скоро выйдет четвертая версия фреймворка. Там нас ожидают «кнопки-призраки» (‘ghost buttons’):

Bootstrap 4
В скором времени ожидается релиз четвертой версии фреймворка. Разработчики не называют точную дату. Однако самые нетерпеливые могут уже сегодня поработать с бета-версией. Так чем же нас порадует новый Bootstrap?
- все JavaScript плагины были переписаны с учетом последней версии языка (ES6);
- поддержка самой современной системы верстки flexbox;
- отказ от поддержки браузера Internet Explorer 8;
- отказ от препроцессора Less и переход к Sass;
- увеличение шрифта по умолчанию с 14 пикселей до 16 пикселей
- иконочный шрифт Glyphicons больше не поддерживается
- замена части изображений в формате png на изображения в формате svg. Так выглядят стрелки на png (слева, Bootstrap-3) и svg (справа, Bootstrap-4), увеличенные в 500 раз:

Остановимся на изменениях подробнее
Возможно, вас удивит строчка shrink-to-fit=no в метатегах нового Bootstrap. Она предотвращает масштабирование контента на мобильных устройствах, работающих на Safari 9.0.
Новые названия классов изображений
- 1Класс, делающий картинки адаптивными img-responsive , переименован наimg-fluid
- 2Класс, добавляющий картинкам скругленные углы img-roundedпереименован на rounded
- 3Класс, делающий картинки круглыми img-circle, переименован в rounded-circle
Макет
Классы container и container-fluid, знакомые нам по предыдущим версиям, все так же используются для создания фиксированного контейнера и контейнера, занимающего всю ширину экрана.
Однако медиа-запросы претерпели изменение.
- 1Теперь при указании запроса для небольших смартфонов, мы больше не указываем xs. Используем префикс col- и необходимое количество колонок, например, сol-6. Такой запрос будет работать для устройств, чья ширина не превышает 565 пикселей.
- 2Следующий медиазапрос включает небольшие мобильные устройства, размером от 576 пикселей до 767 включительно и использует префикс col-sm-, например col-sm-12
- 3Для небольших планшетов, размером от 768 пикселей до 991 пикселя, используем префикс col-md
- 4Для устройств, чья ширина составляет от 992 до 1199 пикселей включительно, подойдет префикс col-lg
- 5Для ноутбуков и компьютеров, чья ширина превысит 1200 пикселя, нужно использовать префикс col-xl

Сетка, как и ранее, делится на 12 колонок. Вложенные колонки поддерживаются. Но теперь высота всех колонок в строке одинаковая, благодаря системе верстки flexbox.
Нужно отметить, что если в строке колонок больше, чем 12, они автоматически перенесутся на новую строку.
Приятным нововведением является возможность создания колонок одинаковой ширины, не привязанных к конкретному медиазапросу. Синтаксис предельно прост: внутри тега div c классом row прописываем необходимое количество тегов div class = col. Два таких класс поделят сетку пополам, три – на три равные части и так далее.
Если же размер колонки должен соответствовать ширине ее содержимого, используют класс с постфиксом auto, например col-md-auto.
Выравнивание по вертикали
Опять же, благодаря flexbox, выравнивание по вертикали больше не проблема! Просто добавьте в тег div class = 'row', объединяющий колонки в строку, класс, задающий необходимые Вам параметры. Так, класс align-items-start прижмет контент к верху колонки, класс align-items-end – к ее низу, а класс align-items-center расположит контент посередине колонки. Это распространится на все колонки в строке.
Нужно выровнять только одну колонку в строке? Проще простого. Нужно добавлять классы не к строке, а непосредственно к самой колонке. Классы называются align-self-start (верх колонки), align-self-center (центр колонки), align-self-end (низ колонки).

Выравнивание по горизонтали
Равнять контент по горизонтали можно путем добавления классов к строке div class = 'row'. Для выравнивания к началу строки используем класс justify-content-start, а к ее концу - justify-content-end. Класс justify-content-center разместит колонки посередине без промежутков между ними.
Рассмотрим еще два интересных варианта размещения колонок. Класс justify-content-between разместит первую и последнюю колонки у начала и конца строки соответственно. Оставшийся промежуток будет поделен поровну между другими колонками. Класс justify-content-around отличается только тем, что расстояние будет одинаковое между всеми колонками, включая первую и последнюю в строке.
Отступы
Между колонками по умолчанию находятся отступы (15 пикселей с каждой стороны). Если Вам нужно их убрать, используйте класс no-gutters. Он установит значения padding и margin справа и слева равными нулю.

Изменение расположения колонок
Мы можем менять порядок, в котором расположены колонки, при помощи префикса order- и порядкового номера колонки. Всего существует 12 порядковых номеров.
Например, имеем строку из 3-х колонок. Мы хотим, чтобы третья колонка стала первой. Для этого добавим ей класс order-1.
Также можно использовать предопределенные медиазапросы. Хотим изменить порядок только для устройств, чья ширина превышает 1200 пикселя? Добавьте еще класс order-lg-2
Вложенные колонки
Для того, чтобы разместить одну группу колонок внутри другой, оберните их в класс row. Помните, что количество вложенных колонок также составляет 12. Например, имеем главную колонку с классом col-10. Хотим разместить внутри нее две равные колонки. Эти колонки имеют классы col-6, а не col-5, обратите внимание!
Как видно, фреймворк Bootstrap может значительно упростить жизнь разработчика. Активное развитие и поддержка, следование самым последним тенденциям веб-дизайна и веб-технологий делает его самым популярным фреймворком для фронтенд разработки сайтов как за рубежом, так и в нашей стране.