Bootstrap

Bootstrap — css фреймворк для создания сайтов и веб-приложений.

Bootstrap содержит в себе HTML и CSS шаблоны оформления для типографики, блоков навигации, кнопок, веб-форм, и прочих компонентов веб-интерфейсов, а также JavaScript расширения. Ссылка на официальный сайт Bootstrap.

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

В Bootstrap 3 используются самые современные наработки в области CSS и HTML. Поэтому стоит уделить внимание поддержке старых браузеров.

На данный момент выпущено три версии Bootstrap. Первая и вторая версии считаются устаревшими, поэтому рекомендуется использовать Bootstrap 3.

Основные преимущества Twitter Bootstrap 3:

  • Адаптивная верстка — Bootstrap легко и эффективно масштабирует ваш проект с одной базой кода, от телефонов и планшетов до настольных компьютеров.
  • Экономия времени — CSS фреймворк Bootstrap 3 позволит сэкономить время и усилия, используя шаблоны дизайна и классы, и уделить больше внимания другим задачам;
  • Высокая скорость загрузки страницы — динамичные макеты Bootstrap адаптируются под разные устройства и разрешения экрана без изменений в разметке;
  • Гармоничный дизайн — все компоненты платформы Bootstrap используют единый стиль и шаблоны с помощью центральной библиотеки. Дизайн и макеты веб-страниц согласуются друг с другом;
  • Простота в использовании — фреймворк прост в использовании, любой пользователь с базовыми знаниями HTML и CSS может начать разработку макета с Twitter Bootstrap;
  • Совместимость с браузерами — Bootstrap 3 поддерживает браузеры Mozilla Firefox, Google Chrome, Safari, Internet Explorer и Opera;

Совместимость с браузерами и устройствами:

Bootstrap 3 поддерживает последние версии большинства браузеров на разных платформах. Internet Explorer версий 8–11 поддерживается только на ос Windows.

Chrome Firefox Internet Explorer Opera Safari
Android Поддерживается Не поддерживается N/A Не поддерживается N/A
iOS Поддерживается N/A Не поддерживается Поддерживается
Mac OS X Поддерживается Поддерживается Поддерживается Поддерживается
Windows Поддерживается Поддерживается Поддерживается Поддерживается Не поддерживается

Internet Explorer 8 и 9 также поддерживается фреймворком, однако эти версии браузеров не поддерживают некоторые элементы HTML 5 и CSS 3. А в Internet Explorer 8 потребуется использование Respond.js для корректной работы медиа запросов.

Функционал разметки:

Пример работы аспектов системы разметки Bootstrap 3.

Очень маленькие устройство Телефоны (<768px) Малые устройства Планшеты (≥768px) Средние устройства Настольные (≥992px) Большие устройства Настольные (≥1200px)
Поведение разметки Горизонтальный все время Терпеть неудачу при начатии, горизонтальный выше контрольной точки
Ширина контейнера Нет (автом.) 750px 970px 1170px
Класс префикса .col-xs- .col-sm- .col-md- .col-lg-
# колонок 12
Ширина колонки Авто 60px 78px 95px
Промежуточная ширина 30px(15px) на каждой стороне колонки
Вкладка Да
Отступ Да
Выравнивание колонки Да

Основные инструменты Bootstrap:

  • Сетки — заранее заданные размеры колонок, готовые к использованию (например, ширина колонки 140px относится к классу.col-md-2)
  • Шаблоны — Фиксированный или резиновый шаблон документа.
  • Типографика — Описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т. п.
  • Медиа — Некоторое управление изображениями и видео-роликами.
  • Таблицы — Средства для оформления таблиц, вплоть до добавления функциональности сортировки.
  • Формы — Классы для оформления форм и некоторых событий происходящих с ними.
  • Навигация — Классы оформления для меню, вкладок, табов.
  • Алерты — Оформление подсказок, диалоговых окон всплывающих окон.

Новая версия Bootstrap 4

19 августа 2015, вышла первая альфа версия CSS фреймворка Bootstrap 4.

Что обновили и добавили?

  1. Изменилась сетка
  2. Полностью переписаны JS компоненты
  3. Сменился прекомпилятор, LESS->SASS
  4. Переписаны и доработаны классы видимости
  5. Добавлены сервисные классы
  6. Полностью переписан normalize и вынесен в отдельный компонент
  7. Полностью прекращена поддержка IE8
  8. Добавились новые компоненты, к примеру Cards
  9. И многое другое с чем можно ознакомиться тут

Сравним с тем что используем сейчас

Я не стану разбирать все изменения и навороты, а остановлюсь только на том что сейчас режет глаз, а также на том что может вызвать проблемы.

Сетка

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

Сетка Bootstrap 4 основана на относительных единицах em и ведет себя несколько иначе. Во первых в новой сетке не четыре контрольных точки: lg, md, sm, xs; как ранее, а пять - xl, lg, md, sm, xs!
Далее еще интереснее, добавление еще одной контрольной точки было бы бесполезно, если бы не устранилась проблема с сеткой на мобильных устройствах. В Bootstrap 4 сетка ведет себя следующим образом - мобильный телефон, к примеру iPhone 5/6/6 plus в вертикальном положении будут соответствовать классу .col-xs-*, а в горизонтальном .col-sm-*! И это огромная разница, это как раз то что не давало сделать адекватно адаптивные страницы на Bootstrap 3.

Классы видимости

Bootstrap 3 имел 8 основных и 2 дополнительных классов видимости - .hidden-*, .visible-*.

В Bootstrap 4 поменялась логика работы классов видимости, их количество и синтаксис написания.
Во первых теперь нет .visible-*, в строю остался только .hidden-*.
Во вторых изменился .hidden-*, теперь помимо приставки обозначающей контрольную точку .hidden-(xl,lg,md,sm,xs), добавилась еще одна -up/-down - .hidden-xl-up/.hidden-xl-down. Грубо говоря при указании .hidden-md-up мы говорим что элемент необходимо скрыть на пространстве md и выше, а до md элемент будет виден. Наглядно можно посмотреть тут .

Сервисные классы

В Bootstrap 3 были сервисные классы, можно было управлять текстом, его стилем и направлением, но не было очень важной вещи - нельзя было управлять отступами. В Bootstrap 4 ситуация поменялась, родробнее о сервисных классах тут .

Поддержка IE8

Грубо говоря поддержка IE8 и более старших версий закончилась еще при выходе Bootstrap 3, потому что IE8 не поддерживает работу с @media query. Но в релизе альфа версии Bootstrap 4 было прямо заявлено что поддержки IE8 не будет ни в каком виде, потому что помимо @media query он не поддерживает работу с относительными единицами измерения em.
В общем если нужна поддержка IE8, апгрейд противопоказан =(.