Многим, кому полюбился twitter bootstrap наверно известно, что на подходе 4 версия — Bootstrap 4. На текущий момент доступна Bootstrap v4.0.0-alpha.5, это говорит о том, что он все еще в альфа версии, но уже можно скачать и пощупать его.

На самом деле серьезных изменений почти нет, в основном это переделка сетки, названий классов, и усложнение структуры компонентов, за счет ухода от привязки к конкретным тегам. Но все же посмотрим, что там внутри.

После скачивания вам доступны несколько css файлов:

1. bootstrap.css - собственно сам бутстрап (классический, с float)
2. bootstrap-reboot.css - здесь находится только normalize.css (к слову, во всех остальных css он уже вшит)
3. bootstrap-grid.css - здесь находится только сетка
4. bootstrap-flex.css - версия с flex

А теперь о нововведениях:

1. Сетка

В сетке появились некоторые изменения: теперь в сетке целых 4 брекпойнта (vместо 3). Нужно упомянуть, что сетка может быть как на привычных float так и на flex, в зависимости от выбранного файла css.

Было	Стало
xs < 768px	< 576px
sm >= 768px	>= 576px
md >= 992px	>= 768px
lg >= 1200px	>= 992px
xl	>= 1200px

Кроме этого, изменились названия классов для col-%%-offset-%%, col-%%-pull-%%, col-%%-push-%%.

Теперь нужно писать так: offset-%%-%%, pull-%%-%% и push-%%-%%.

Улучшились состояния hidden: раньше — hidden-%%, теперь — hidden-%%-down и hidden-%%-up (down означает, что элемент будет скрыт на расширениях меньше чем %%, up — больше, чем %%).

2. Компоненты

Очень многие компоненты потеряли свой привычный вид (кодовый имеется ввиду).

Например, для того, чтобы вывести простую nav панель, раньше нужно было всего лишь добавить класс nav navbar-nav к элементу ul, теперь чтобы вывести меню, придется изрядно добавить классов.

Было	Стало
Меню, табы, хлебные крошки ul.nav.navbar-nav>li>a	.nav.navbar-nav>.nav-item>.nav-link
Пагинация ul.pagination>li>a	.pagination>.page-item>.page-link
Панели .panel>(.panel-header+.panel-body+.panel-footer)	.card>(.card-header+.card-block>(.card-title+.card-text+.card-link)+.card-footer)

Я привел самые важные компоненты, все их здесь перечислять не имеет смысла, вкратце, многое осталось прежним (btn, form-control).

3. Типографика

Классы для выравнивания текста (text-center, text-right, text-justify) более не работают, вместо них добавлены классы для выравнивания на различных брекпойнтах: text-%%-center, text-%%-right, text-%%-left, text-%%-justify

Подведя итог, для себя я выяснил, что 4 версия вполне жизнеспособна, к ней придется немного привыкнуть, но в целом получился приятный для использования фреймворк.