В этой статье мы рассмотрим, что нового будет добавлено в четвёртой версии платформы Twitter Bootstrap.

В настоящее время Twitter Bootstrap является очень популярной платформой для создания пользовательского интерфейса веб-сайтов и веб-приложений. Она предоставляет веб-разработчику общие классы, компоненты и плагины, с помощью которых разработка интерфейсов значительно упрощается. Кроме этого, платформа Twitter Bootstrap поддерживает большинство браузеров и операционных систем, т.е. веб-разработчику нет необходимости проверять работоспособность того или иного класса, компонента или плагина в конкретном браузере, за Вас всё это уже сделали разработчики Twitter Bootstrap.

Чего же нам ждать от следующей версии данной платформы?

Разработчики в Twitter Bootstrap 4 планируют внести следующие изменения:

Добавить новый класс в систему сеток. В четвёртой версии платформы Twitter Bootstrap не планируется кардинальных изменений в системе сеток. По словам разработчиков, мы увидим один дополнительный класс для портативных устройств.

Разработать полностью новый navbar (навигационное меню). В Twitter Bootstrap 4 компонент navbar будет полностью переработан. В основном это связано с тем, что его текущая реализация находит много нареканий со стороны веб-разработчиков. Одним пользователям не хватает гибкости, другим пользователям он сложен в реализации, так что будем надеяться, что новый компонент в Twitter Bootstrap 4 будет лучше предыдущего.

Новая система документации. С выходом Twitter Bootstrap 4 разработчики планируют переделать систему документации таким образом, чтобы в ней было проще ориентироваться и находить нужную информацию.

Добавить к некоторым компонентам эффектов CSS 3 (анимации и переходов). Платформа Twitter Bootstrap 3 никогда не была богата на анимации. В Twitter Bootstrap 4 постараются исправить эту возможность посредством добавления к различным компонентам возможностей CSS3, таких как анимации и переходы.

Разработать новый подход для изменения глобальной темы. Для большинства пользователей возможность простой настройки компонентов и других элементов Twitter Bootstrap является первостепенной необходимостью, которой нет в Twitter Bootstrap 3.

Интересно, как они собираются это сделать в Twitter Bootstrap 4? Может с помощью создания специального файла, в котором будут храниться настройки внешнего вида компонентов или каким-то другим способом?

В настоящее время настраивать внешний вид компонентов для большинства веб-разработчиков является очень сложной задачей, которая обычно выполняется одним из следующих способов:

1. Кроме этого ещё планируется:
   • выполнить различные обновления для форм, в том числе и для пользовательских элементов управления;
   • выполнить изменения в JavaScript коде для улучшения позиционирования всплывающих подсказок (tooltips),всплывающих панелей (popovers) и выпадающих списков (dropdowns).
   • создать абсолютно новый компонент для замены панелей (panels), миниатюр (thumbnails) и вдавленных панелей (well) и многое другое.

Как можно заметить, улучшений в Twitter Bootstrap 4 запланировано много и конечно хочется увидеть, как это будет всё реализовано. Так что с нетерпением будем ждать новый релиз платформы.

19.08.2015 состоялся релиз альфа версии платформы Twitter Bootstrap 4. Более подробно ознакомиться с этим выпуском можно в этой статье.

На этапе верстки всегда важно иметь под рукой хороший инструмент, который значительно ускорит процесс разработки, будет гибким, легко настраиваемым и позволит с легкостью создать макет. Он должен дать возможности легко создавать страницы, которые хорошо отображаются на десктопах и мобильных устройствах. Что же, нам повезло, ведь у нас есть Bootstrap. Вот только на данный момент существует 2 актуальные версии - Bootstrap 3 и Bootstrap 4. В чем же разница и какую версию использовать? Это мы сейчас и выясним. Английскую версия статьи .

Обе версии представляют собой мощный для создания адаптивных страниц, который включает себя:
-многоколоночную адаптивную сетку;
-готовые элементы по типу навигации, кнопок, дропдаунов и т.д;
-набор служебных классов для управления поведением элементов;
-reset или normalize;
-настройки типографии в шаблоне;
-медиаобъекты;
-некоторые JS-плагины (Carousel, Modal и так далее);
-и многое другое.

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

Первое, что бросается в глаза, это то, что исходный код Bootstrap 4 написан не на Less, а на Sass. И это огромный плюс, как по мне. Ведь не зря Sass признан самым используемым СSS-препроцессором (лично для меня код, написанный на нем, более читаем и понятен, да и функционал немного выигрывает у конкурентов).

Также стоит отметить, что сетка Bootstrap 3 построена только на float’aх, в то время как Bootstap 4 предлагает нам выбрать между float….и Flexbox! Да, это свершилось. Представьте себе, что в 4-ой версии у вас отпадает проблема выравнивание по вертикали и проблема колонок одинаковой высоты. Это лишь мизер, который может нам предложить разметка, построенная на Flexbox’ах.

Изменяйте вертикальное и горизонтальное выравнивание на различных девайсах с помощью служебных утилит и классов, таких как: align-item-center, align-items-md-center, align-items-lg-start и так далее. Меняйте порядок ваших колонок, используя flex-unordered, flex-last, flex-first! Используйте mr-auto, ml-auto, которые прижмут ваш элемент вправо или влево, соответственно.

А как на счет колонок одинаковой ширины без указания явно обозначенных номеров классов? Очень легко! Внутри вашего row просто разместите столько div c классом col, сколько колонок одинаковой ширины вам нужно. Предположим, ваша сетка имеет следующий вид:

Результатом будет 3 колонки одинаковой ширины на абсолютно всех устройствах.

Такой возможности в третьей версии не было. Впечатляет, не так ли? Кроме этого есть возможность создания колонок, изменяющих свою ширину по ширине содержимого. Для этого нужно воспользоваться следующим классом - col-md-auto (вместо md подставить нужный брейкпоинт).

Что же касается медиа запросов, то и здесь берет верх новая версия. Ведь теперь у нас есть возможность более гибко подойти к стилизации страницы на различных девайсах. А все потому, что теперь в системе сеток присутствуют следующие брейкпоинты:

extra large (>= 1200px)

large (>= 992px)

medium (>= 768px)

В bootstrap 3 этих брейкпоинтов было всего 4 и это порой создавало некоторые проблемы при разметке на маленьких планшетах и телефонах с огромным экраном.

Стоит отметить, что не все элементы в Bootstrap 4 имеют свойство display: flex. Если есть необходимость сделать элемент flex, то следует воспользоваться утилитой display. К примеру, добавить класс.d-flex, .d-inline-flex, или же.d-sm-flex, когда нужно применить утилиту только для девайсов категории sm и выше. Для элемента с классом.d-flex существует свой набор flex-утилит, с помощью которых можно менять ось контейнера, менять порядок на обратный, выравнивать элементы внутри контейнера и т.д. . К ним принадлежат: flex-row, flex-row-reverse, .flex-column, .flex-column-reverse , .flex-sm-row, .justify-content-start, .justify-content-start, .justify-content-sm-start и другие вариации на основе всех свойств.

Что же, я привел лишь основные различия и в очень краткой форме. Но их гораздо больше: чего стоит только раздел типографии с улучшенной системой отступов для различных элементов (p, ul и т.д). Чтобы полностью ознакомиться со всеми нововведениями, я советую открыть официальную документацию, с помощью которой вы тут же найдете ответы на все интересующие вас вопросы. После этого качайте Bootstrap 4 себе и пробуйте на личном опыте. Возможно вы спросите: а как же поддержка Flexbox браузерами? Я могу использовать новую версию фреймворка в продакшене? И ответ - конечно же да! Поддержка замечательная, все современные браузеры поддерживают данную технологию, только не стоит забывать о вендорных префиксах. Bootstrap 4 хорошо подходит для разработки как маленьких сайтов, так и .

Подводя итог, можно сказать, что 4-ая версия гораздо опережает предшественника. Именно её я советую использовать на ваших проектах, ведь очень важно идти в ногу со временем и при разработке вашего продукта использовать только новейшие, качественные и актуальные инструменты. На данный момент Bootstrap 4 перешел в стадию бета-тестирования, а официальный релиз запланирован на 2018 год. Ждем с нетерпением! Создавайте современные и адаптивные макеты вместе с Bootstrap!

В конце лета на официальном сайте Bootstrap , появилась запись о выходе альфа версия Botstrap 4 . Рассмотрим какие нововведения подарит нам данный релиз.

• Вместо Less, в Bootstrap 4 теперь поддерживается Sass
• Улучшена система сеток
• Появилась поддержка FlexBox
• Новый компонент в Bootstrap 4 — карточки (cards)
• Появился сброс стилей Reboot
• Больше возможностей для кастомизации тем Bootstrap
• Прекращена поддержка IE8
• Вместо пикселей EM и REM
• Все плагины переписаны с помощью новой версии JavaScript
• Улучшены подсказки и popover элементы
• Обновлена структура документации в Bootstrap 4

Less Sass Bootstrap

Разработка и компиляция модулей Bootstrap 4 теперь осуществляется на Sass, раньше Bootstrap создавался на Less. Компиляция происходит с помощью библиотеки Libsass , которая работает в несколько раз быстрее своих аналогов.

Система сеток Bootstrap

Bootstrap 4 стал еще более дружелюбен к мобильным пользователям (смартфоны, планшеты). Миксины в Bootstrap 4 стали более мобильно-ориентированными. Появилась возможность настраивать и управлять миксинами.

Поддержка FlexBox

В Bootstrap 4 есть возможность включать поддержку FlexBox , благодаря которму можно управлять элементами на странице более гибко. Чтобы включить поддержку FlexBox в Bootstrap, нужно выставить определённые параметры, и скомпилировать фреймворк заново, это делается на официальном сайте.

Компонент карточки (cards)

В Bootstrap 4 были удалены компоненты (wells, thumbnails и panels) вместо них создали компонент cards (карточки), который делает все тоже самое только лучше и удобней.

Сброс HTML Reboot

Появился новый модуль, который сбрасывает стандартные стили HTML-тегов (у каждого браузера свои стили по-умолчанию), предназначенный для кроссбраузерности. Данный модуль теперь хранится в Sass файле и имеет название Reboot . Все эти стили сброса, собираются в файл normalize.css

Больше возможностей для кастомизации тем

В Bootstrap 4 , праметры различных элементов страницы сайта (цвета, градиенты, скругления и т.д.) собраны в отдельные файлы, что облегчает перенастройку темы под свой дизайн.

IE8 не поддерживается

Браузер Internet Explorer восьмой версии , в Bootstrap 4 больше не поддерживается. Это необходимо было сделать для того чтобы иметь возможность использовать все новые технологии из CSS3, без использования дополнительного кода, что несомненно благотворно скажется на быстродействии фреймворка.

Размеры в em и rem

В Bootstrap 4 вместо пикселей теперь используются размеры в em и rem , благодаря этому элементы страницы, шрифты и модули стали более гибкими и адаптивными.

JavaScript ES6

Все существующие плагины Botstrap 4, были переписаны с ES5 (JavaScript 5) на более новую версию JavaScript ES6. Код написанный на ES6 (JavaScript 6) более структурирован надёжен и быстр.

Подсказки и popover элементы

Подсказки и popover (всплывающие) элементы, в Bootstrap 4 теперь работают более слаженно и ожидаемо.

Документация Bootstrap 4

Документация Bootstrap 4 стала более полной и переписана с помощью Markdown (облегчённый язык разметки), также улучшен поиск по документации.

Поддержка Bootstrap 3

Когда Bootstrap обновлялся со второй (2) версии на третью (3), то поддержка Bootstrap 2 прекратилась. Это вызвало много нареканий со стороны сообщества. На этот раз с выходом Bootstrap 4 , третья версия фреймворка будет также поддерживаться и исправляться при обнаружении багов.

Те кто так или иначе связан с веб разработкой скорее всего знает что такое Bootstrap.
Лично я познакомился с фреймворком Bootstrap версии 2.x и он на меня произвел неизгладимое впечатление. Можно было без участия дизайнера получить вполне сносный интерфейс. Встроенный перфекционист ликовал. Можно ругаться, что интернет стал очень уж бутстраповым, но нужно отдать должное, парни, работающие над ним в целом молодцы и делают нужное, а то, что народ ленивый – проблема другая.

Сегодня день рождения этого замечательного фреймворка. В свой день рождения был объявлен Bootstrap 4.

Bootstrap 4 – что нового?

Как пишут сами разработчики нового много и сложно описать все изменения в не большом обзоре. И я не буду. Основные моменты:

Переезд с Less на Sass

Bootstrap теперь компилируется быстрее обычного за счет использования Libsass.

Улучшения системы сеточной верстки

Больший упор на мобильных пользователей. Были полностью переработаны миксины.
Теперь, судя по документации, можно из коробки получить нужные примеси в любом месте. Например вы хотите, чтоб в вашем проекте был класс.line вместо прежного.row:

Line { @include make-row(); }

Поддержка Flexbox

Как пишут сами разработчики: «Будущее наступило...». Легким движением переменной и перекомпилированием можно получить Bootstrap основанный на

Пока там 3 внушительные темы по $99 (dashboard, application, marketing). В каждой можно найти всё из Bootstrap + примеры из реального мира, компоненты, плагины, документация и удобные утилиты. Все темы можно использовать сколько угодно раз, для любых проектов, но не продавать саму тему или производные от нее.

Недавно в свет вышла новая, 4-я версия Bootstrap. Я хочу рассказать, что нового есть в этой версии, чем она отличается от третьей и как она повлияет на процесс разработки сайтов.

Если вы не знали…

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

Кстати, подписывайтесь на мой твиттер , чтобы получать там свежие уроки по Bootstrap.

Развитие проекта

С растущим количеством пользователей и компонентов, которые нужно поддерживать, растет и количество багов, с которыми нужно бороться. Разработчики проекта приглашают всех желающих принимать активное участие в его развитии.

Поэтому в репозитории проекта с нетерпением ждут ваших коммитов:).

Поддержка Bootstrap v3

Самый важный вопрос, за которым сюда пришли большинство читателей: будет ли сайт, сверстанный при помощи Bootstrap 3, работать хорошо, если обновить версию фреймворка?

Нужно заметить, что с выходом третьей версии была прекращена поддержка бутстрапа версии 2, о чем разработчики жалеют до сих пор. Бутстрап будет дорабатываться и дальше. Критические баги и ошибки будут лататься, но не так активно, как раньше. Само собой, документация для третьей версии останется доступной наравне с четвертой.

Код, написанный на BS3, будет поддерживаться в новой версии, и ваши элементы продолжат работать как надо. К ним добавятся новые классы и возможности, например:

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

Темы

В новой версии появятся официальные темы от разработчиков Bootstrap. На них я смотрю весьма скептично. Во всяком случае, на данный момент: тем пока всего только три, стоят он по 99$, а толку от них я наблюдаю мало.

Отказавшись от отдельных тем, разработчики предлагают нам эти темы купить:).

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

Мое мнение

Очень радуют дополнения в блочной верстке, Sass-переменные и более структурированная система фреймворка. Основной повод для радости - фреймворк живет и развивается, ошибки исправляются и с завидной регулярностью добавляются новые.

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

Тисни «Лайк», щоб читати нас у Фейсбуці