BOOTSTRAP - фреймворк для адаптивной разработки

BOOTSTRAP

Недавно состоялся долгожданный релиз бета-версии Bootstrap 4. Front-end разработчики по всему миру ожидали этого события около полутора лет. Теперь мы можем разрабатывать сайты на новейшей версии самого популярного фреймворка в мире!

Что такое Bootstrap?

Bootstrap появился в далеком 2011 году в компании Twitter.  Изначально это была небольшая библиотека для внутренних нужд компании, однако он быстро завоевал популярность и вышел далеко за ее пределы.

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

Он следует принципу “mobile-first”, что подразумевает изначальную разработку сайта для небольшого экрана мобильного телефона, затем контент размещается согласно разрешению планшета и, наконец, верстальщик работает над версией для ноутбука и компьютера. Благодаря такому подходу конечный пользователь может просматривать сайт на любых устройствах, не испытывая малейшего неудобства.

Bootstrap отображается на любых типах устройств

Подключение Bootstrap

Существует два способа подключения фреймворка к Вашему проекту. Его можно скачать с официального сайта http://getbootstrap.com, либо использовать ссылки на версию Бутстрапа, расположенную на сайте MaxCDN.

Использование MaxCDN имеет свои плюсы и минусы. Несомненным достоинством является быстрая загрузка. Однако если сеть будет недоступна, то и фреймворк не загрузится.

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

Скорость разработки

Благодаря большому количеству предустановленных компонентов верстальщику нет нужды начинать разработку проекта с нуля.

Адаптивность

Фреймворк Бутстрап включает в себя 12-тиколоночную сетку. При разработке сайта верстальщику остается только принять решение, сколько колонок отвести на тот или иной компонент в зависимости от размера экрана пользователя.

Популярность

Миллионы сайтов по всему миру созданы на Bootstrap. Соответственно, разработано несметное количество шаблонов и различных вариантов оформления компонентов.

Шаблоны на 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 раз:
Стрелки в формате png и svg

Остановимся на изменениях подробнее

Возможно, вас удивит строчка 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 может значительно упростить жизнь разработчика. Активное развитие и поддержка, следование самым последним тенденциям веб-дизайна и веб-технологий делает его самым популярным фреймворком для фронтенд разработки сайтов как за рубежом, так и в нашей стране.



Назад