Многим, кому полюбился twitter bootstrap наверно известно, что на подходе 4 версия — Bootstrap 4. На текущий момент доступна Bootstrap v4.0.0-alpha.5, это говорит о том, что он все еще в альфа версии, но уже можно скачать и пощупать его.
На самом деле серьезных изменений почти нет, в основном это переделка сетки, названий классов, и усложнение структуры компонентов, за счет ухода от привязки к конкретным тегам. Но все же посмотрим, что там внутри.
После скачивания вам доступны несколько css файлов:
- bootstrap.css - собственно сам бутстрап (классический, с float)
- bootstrap-reboot.css - здесь находится только normalize.css (к слову, во всех остальных css он уже вшит)
- bootstrap-grid.css - здесь находится только сетка
- 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 версия вполне жизнеспособна, к ней придется немного привыкнуть, но в целом получился приятный для использования фреймворк
В 4м бутстрапе больше гибкости, но если нужен ie8, то лучше использовать 3ю версию.Ну и те у кого в MODX PdoTools придется все оформление собирать самим)
Боже упаси от восьмого IE. Тут и на десятый-то нет желания ориентироваться.
Это редкие случаи. И лучше смотреть в будущее и ориентироваться на новинки. А то так и до старости табличной версткой все будем делать.
В дополнение темы — Bootstrap 4 прекращает поддержку IE9 и полностью переходит на Flexbox:
tproger.ru/news/bootstrap-4-is-flexbox/
IE — все равно отстой)