Bootstrap 4 — что нового
19 августа состоялся релиз Bootstrap 4 alpha, ровно 4 года спустя появления первой версии Bootstrap (совпадение ли это?). Новая версия разрабатывалась в течении года, было сделано 1100 коммитов и написано 120000 строк кода. В этой статье рассмотрим основные изменения в новой версии.
Новый файл сброса стилей “Reboot”
Новый модуль основан на normalize.css и сейчас все стили перенесены в scss файл. Вы также можете заметить хитрый трюк, традиционный стиль box-sizing: border-box установлен для html элемента и затем глобально наследуется всеми элементами:
1 2 3 4 5 6 | html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } |
Это позволяет легко переопределить стиль box-sizing не увеличивая специфичность используя !important.
Rem и Ems
В Bootstrap 4 alpha прекращена поддержка IE8 и множества хаков CSS3. Это позволило использовать некоторые новые свойства CSS3. Одно из них rem , которое вычисляет высоту шрифта в зависимости от высоты корневого элемента html .
Используя rem мы можем создавать по-настоящему адаптивную типографику. Так как, шрифт зависит от корневого элемента, можно создавать media правила для различных разрешений и мы получим гибкое управление размером шрифта.
Пример изменения размера шрифта на маленьких экранах:
1 2 3 4 5 6 7 8 9 10 | html{ font-size:16px; } // Creates a media query for extra small devices (0 - 34em) @include media-breakpoint-up(xs) { html{ font-size:18px; } } |
Поддержка Flexbox
Из коробки, Bootstrap 4 не поддерживает Flexbox, это помогает с поддержкой IE9 +. Однако, если вы хотите использовать Flexbox, вы можете включить его в свой проект. Это делается переключением логической переменной в файле _variables.scss. Скомпилированный CSS будет содержать Flexbox стили. Flexbox используется не только в качестве сетки, но и для других элементов, например, для карточек (Cards), для input groups и media components.
Пример использования Flexbox
Давайте рассмотрим пример, где Flexbox помогает нам. Есть три колонки расположенных в ряд. У одной из колонок контент увеличивает ее высоту. Использование Flexbox позволяет выровнять высоту колонок без дополнительного CSS.
Без Flexbox
С Flexbox
Переезд с Less на Sass
Весь CSS скомпилирован с помощью Sass, причем компиляция ускорилась за счет использования Libsass.
Карточки (Cards)
Классические well , panel и thumbnail были заменены на новый компонент cards.
Наложение картинок и фоновых изображений
Вы можете наложить фоновое изображение или текст без CSS. Для этого надо добавить следующий элемент:
1 | <img class="card-img" data-src="image.jpg" alt="Card image"> |
Класс card-inverse сменить цвет заголовка на белый, для использования с темным фоном.
Группировка карточек
Дополнительно к стандартной сетке, можно сгруппировать карточки вместе, удалить промежуток между ними и выровнять по высоте. По умолчанию, используются display: table и table-layout: fixed, но если будет включен flexbox, то будет использован display: flex instead.
Сетка Masonry
В Bootstrap 4 добавлена адаптивная сетка, в которой элементы выравниваются по высоте, сохраняя вертикальное расстояние между элементами. Поддержка IE10 и выше.
Больше вспомогательных классов
В предыдущую версию были включены различные классы названные «вспомогательные классы». В основном использовались такие классы, как pull-left , pull-right , color ( .text-primary ), clearfix ( .clearfix ).
В Bootstrap v4 alpha появился целый ряд классов определяющих padding и margin элементов.
1 2 3 4 5 6 | // $spacer это переменная sass которая равна 1rem или 16px .m-a-0 { margin: 0 !important; } .m-a { margin: $spacer !important; } .m-a-md { margin: ($spacer * 1.5) !important; } .m-a-lg { margin: ($spacer * 3) !important; } |
.m-a добавляет внешние отступы со всех сторон элементов. Есть классы для каждых отдельных сторон.
Некоторые другие классы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // Добавляет padding к всем сторонам .p-a { padding: $spacer !important; } // Добавляет padding к верхней стороне .p-t { padding-top: $spacer-y !important; } // Добавляет padding справа .p-r { padding-right: $spacer-x !important; } // Добавляет padding к низу .p-b { padding-bottom: $spacer-y !important; } // Добавляет padding слева .p-l { padding-left: $spacer-x !important; } // Добавляет padding слева и справа .p-x { padding-right: $spacer-x !important; padding-left: $spacer-x !important; } // Добавляет padding сверху и снизу .p-y { padding-top: $spacer-y !important; padding-bottom: $spacer-y !important; } |
Вспомогательные классы созданы для уменьшения количества специализированных классов создаваемых пользователем.
Новая документация
Документация Bootstrap v4 была обновлена. Теперь каждый компонент имеет отдельную страницу.
Также, будет изменен дизайн. у одного из создателей на Dribbble есть часть будущего дизайна.
Иконки удалены
Иконки Glyphicons были удалены из сборки. Документация содержит инструкции как подключить иконочные шрифты Font Awesome и Octions.
JavaScript переписан
Все плагины JavaScript были переписаны на ES6 с использованием последней спецификации. Также, удалены некоторые плагины, например affix.
Что дальше?
Если вы хотите посмотреть весь список изменений, то вы можете пройти по ссылке.
Скорее всего будет еще куча изменений.
План разработки следующий:
- выпустить несколько альфа релизов;
- два бета релиза;
- два RC, чтобы убедиться, что всё готово.
Информации, когда Bootstrap 4 будет готов, пока нет.