Понимание Bootstrap: как это работает и что нового. И в завершении. Пример использования Flexbox

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

На этапе верстки всегда важно иметь под рукой хороший инструмент, который значительно ускорит процесс разработки, будет гибким, легко настраиваемым и позволит с легкостью создать макет. Он должен дать возможности легко создавать страницы, которые хорошо отображаются на десктопах и мобильных устройствах. Что же, нам повезло, ведь у нас есть 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!

В этой статье мы рассмотрим, что нового будет добавлено в четвёртой версии платформы 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 4, так как на момент написания статьи этап альфа-тестирования закончен, и доступна уже вторая бета-версия. Это означает, что в стабильную версию могут быть внесены какие-то небольшие доработки, а время кардинальных изменений закончено, можно начинать тестировать и использовать Bootstrap 4 в реальных проектах.

Прошло два года с выпуска первой альфа-версии четвертого бутстрапа, за это время были произведены тысячи коммитов и заменены десятки тысяч строк кода. Изменений и обновлений по сравнению с Bootstrap 3 произошло много. Давайте разберем, что нового появилось в четвертой версии фреймворка и в чем отличие Bootstrap 4 от Bootstrap 3.

Новая сетка, поддержка FlexBox и компонент card

В сетку добавлен еще один брейкпоинт col-xl- , при этом все остальные брейкпоинты остались, но сдвинулись на уровень ниже. Таким образом, самый маленький из них - col-xs- , в третьем бутстрапе срабатывал при ширине экрана 767px , а теперь срабатывает при 575px . Это позволяет точнее осуществлять адаптацию web-страниц под мобильные устройства. Стоит отметить, что в Bootstrap 4 постфикс -xs- не указывается и пишется просто col-? .

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

Использование «FlexBox » позволяет делать все блоки одинаковой высоты, при этом нет необходимости в написании дополнительного CSS-кода.

Появился совершенно новый компонент «Card » (карточка), который заменяет удаленные: wells, thumbnails, panels. Это достаточно гибкий и мощный инструмент, включающий в себя возможности всех трех удаленных компонентов. Также карточки можно группировать и даже реализовать сетку, так называемую кирпичную кладку.

Поддержка IE, переход на Sass, модуль Reboot, отказ от Glypicons и цвет элементов

Bootstrap 4 поддерживает IE 10 и выше, более ранние версии Internet Explorer не поддерживаются. Если необходима поддержка: IE8/IE9 , Safari 8- , iOS 8- и т.д., то сами разработчики фреймворка рекомендуют использовать Bootstrap 3.

Произошел полный отказ от «Less », теперь компиляция исходников фреймворка производится только на «Sass », для ускорения компиляции используется «Libsass ».

Для кроссбраузерности был разработан модуль «Reboot », включающий в себя ядро «Normalize.css » и расширяющий его. Все настройки для сброса стандартных стилей HTML-тегов у браузеров находятся в одном «Sass » файле.

В Bootstrap 4 был полностью удален иконочный шрифт «Glypicons », который присутствует в третьем бутстрапе. Разработчики фреймворка рекомендуют использовать сторонние библиотеки иконок поддерживающие формат SVG.

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

Другие изменения фреймворка

• Пиксели (px) заменены на «em » и «rem ».
• Переписаны все JavaScript плагины под стандарты ECMAScript 6.
• Обновлен дизайн всех компонентов (форм, таблиц, кнопок и т.д.).
• Появилось гораздо больше служебных классов.
• Улучшен функционал всплывающих подсказок и popover элементов.
• Для Bootstrap 4 улучшена документация и разработан удобный поиск.

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