Eo_Narique 31 декабря 2016 45 6

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

6 комментариев
w
web-revenue 31 декабря 2016г в 23:48 #
В 4м бутстрапе больше гибкости, но если нужен ie8, то лучше использовать 3ю версию.Ну и те у кого в MODX PdoTools придется все оформление собирать самим)
pocoZ1
pocoZ 01 января 2017г в 21:50 #
Боже упаси от восьмого IE. Тут и на десятый-то нет желания ориентироваться.
w
web-revenue 01 января 2017г в 21:58 #
Тем немением, им пользуются и ориентироваться из-за этого все равно стоит)
pocoZ1
pocoZ 01 января 2017г в 22:01 #
Это редкие случаи. И лучше смотреть в будущее и ориентироваться на новинки. А то так и до старости табличной версткой все будем делать.
Tramp13571
Tramp1357 03 января 2017г в 13:39 #
В дополнение темы — Bootstrap 4 прекращает поддержку IE9 и полностью переходит на Flexbox:
tproger.ru/news/bootstrap-4-is-flexbox/
Fi1osof1
Fi1osof 03 января 2017г в 13:41 #
IE — все равно отстой)
Авторизуйтесь или зарегистрируйтесь (можно через соцсети ), чтобы оставлять комментарии.