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

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

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

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

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

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

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

Поддержка Bootstrap v3

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

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

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

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

Темы

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

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

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

Мое мнение

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

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

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

Всем привет, друзья! В середине 2013 года вышел Bootstrap 3, который за прошедшие годы неплохо зарекомендовал себя как удобный, расширяемый CSS каркас для быстрого создания адаптивных макетов. Миллионы сайтов успешно используют этот фреймворк и мы уже порядком привыкли к нему.

Класснуть

Плюсануть

Запинить

18 января 2018 года случилось важное событие - вышла из беты долгожданная версия Bootstrap 4 , основанная на использовании модели Flexbox для разметки, которая в настоящее время уже имеет поддержку всех современных браузеров и является более удобной и гибкой для разработчиков, нежели классическая модель разметки, основанная на Float. Теперь с полной уверенностью можно сказать, что на «Флексах» не можно, а НУЖНО верстать!

Дополнительные материалы урока Bootstrap 4

1. Все примеры из данного урока вы можете потестировать самостоятельно. Архив с примерами лежит на GitHub ;
2. Более подробно ознакомиться с документацией Bootstrap 4 вы можете на оф. сайте ;
3. Стартовый шаблон, включающий Bootstrap 4: OptimizedHTML 4 .

Сегодня мы подробно разберем работу с сеткой Bootstrap 4, по ходу дела сравнивая её со старой версией. Данный урок будет полезен вам не только если вы новичок и знакомитесь с Bootstrap, но и в том случае, если вы опытный разработчик и хотите изучить все правила и нюансы верстки с использованием сетки Bootstrap 4 и Flexbox инструментов, входящих в её состав.

1. Основные параметры сетки по-умолчанию

По-умолчанию сетка Bootstrap 4 очень похожа на сетку третьей версии, однако появились некоторые важные отличия.

Из таблицы основных опций мы можем заметить явные отличия от сетки третьей версии. Теперь отсутствует префикс класса «.col-xs-», отвечающий за самые маленькие разрешения, вместо него указывается упрощенный префикс «.col-». Можно ошибочно подумать, что префикс «.col-» отвечает за минимальные разрешения мобильных устройств, однако это не совсем так. Помимо всего прочего, префикс «.col-» - это одно из важнейших новшеств Bootstrap 4. Это класс, который отвечает за автоматическую разметку колонок на любом разрешении. Но об этом позже.

За малые разрешения (small) отвечает префикс «.col-sm-» с медиа-запросом от 576 пикс. Ширина контейнера составляет 540 пикс. Средние разрешения отрабатываются от 768 пикс. Ширина контейнера - 720 пикс. Большие разрешения работают с разрешения устройств от 992 пикс. Ширина контейнера - 960 пикс. И самые большие - от 1200 пикс. Ширина контейнера фиксируется на значении 1140 пикс.

Обратите внимание, что максимальные значения медиа-запросов имеют неточные значения с дробной частью «.98» в пикселях. Это заметно при выборе Desktop First метода верстки, где максимальная ширина медиа-запроса ограничена. Например, при компиляции Sass «+media-breakpoint-down(lg)» мы получим «@media (max-width: 1199.98px)». Здесь 0.02 пикселя освобождаются для старта следующего медиа-запроса. Имейте это ввиду. В следующих выпусках «Джедай верстки 8» мы рассмотрим этот и множество других моментов из этого урока на реальном примере.

2. Автоматическая разметка колонок

2.1 Колонки одинаковой ширины

С помощью нового универсального класса «.col» можно указать до 12 колонок в ряду (родитель «.row»), ширина которых будет автоматически вычислена в зависимости от количества элементов и будет равна.

Например:

2.2 Установка ширины одной колонки

Вы также можете явно установить ширину одной колонки, а остальные оставить автоматическими.

В данном примере второй элемент в третьем ряду имеет класс «.col-6» и второй элемент во втором ряду имеет класс «.col-5», которые занимают соответствующее количество колонок на всех разрешениях экрана. Ширина остальных колонок является отзывчивой и вычисляется автоматически, занимая всё оставшееся пространство.

2.3 Контент переменной ширины

Можно использовать класс «col-{breakpoint}-auto», чтобы определить контент с переменной шириной, в зависимости от занимаемого пространства содержимым колонки. Где breakpoint - размер экрана (xl, lg, md или sm).

Здесь мы видим, что две центральные колонки занимают ширину, соответствующую ширине содержимого, однако в первом ряду благодаря классу «.justify-content-sm-center» у «.row» весь ряд центрируется и общая ширина зависит только от ширины центральной колонки, в то время, как второй ряд растягивается на всю доступную ширину, но вторая колонка остается фиксированной по ширине содержимого.

2.4 Мульти-ряд

Благодаря Bootstrap 4 вы можете сделать в одном ряду несколько строк (переносов). Реализовать это можно с помощью класса «.w-100», который очень похож на тег «br» и по-сути просто делает перенос колонок на новую строку.

Обратите внимание, что данный класс является частью дополнительных возможностей Bootstrap 4, которые подключаются к проекту отдельно в случае использования Sass версии проекта Bootstrap и находятся в папке «scss/utilities». Вы также можете подключить другие плагины из этой папки к вашему проекту по необходимости.

3. Адаптивные классы

3.1 Брейкпоинты

Очень интересная возможность Bootstrap 4 - возможность задавать универсальные колонки, которые будут отображаться на всех разрешениях. Это упомянутый ранее класс «.col». Кроме того, можно определить класс, указывающий конкретное количество колонок, занимаемое содержимым - это классы с префиксом «.col-{число колонок}», например «.col-6» говорит нам о том, что содержимое займёт 6 колонок из 12. В случае, когда конкретное количество задавать не обязательно, можно смело использовать универсальный класс «.col».

3.2 На мобильных устройствах

Вы можете использовать префикс класса «.col-sm-{количество занимаемых колонок}» для того, чтобы задать базовую сетку на всех разрешениях, кроме самых маленьких. На небольших экранах колонки такой сетки будут складываться друг под друга. На разрешениях больше - будут занимать столько места, сколько вы определили в классах.

Здесь мы видим, что первый ряд на устройствах с разрешением более «sm», то-есть больше, чем 576 пикс. разбивается на 2 колонки - шириной 8 и 4 из 12-ти соответственно. Ширина колонок во втором ряду вычисляется автоматически, но на самых малых разрешениях эти колонки также складываются друг под друга, благодаря классу «.col-sm».

3.3 Создание сложной комбинированной сетки

С помощью Bootstrap вы можете создавать любые комбинации колонок при создании сетки. Для каждой колонки можно задать любое поведение на различных разрешениях с помощью адаптивных классов. Здесь отличия от третьей версии - только в наименованиях классов.

4. Выравнивание

Bootstrap 4 основан на «флексах» и дарит нам все возможности данной модели, которые доступны в простых готовых классах. В числе возможностей - вертикальное и горизонтальное выравнивание.

4.1 Вертикальное выравнивание

Помимо управления выравниванием через родительский «.row», можно выравнивать колонки, задавая им соответствующие классы:

4.2 Горизонтальное выравнивание

Кроме того, Bootstrap 4 имеет в своём арсенале инструменты для горизонтального выравнивания колонок при помощи префикса «.justify-content-» у «.row».

4.3 Удаление полей между колонками

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

Для этого достаточно у элемента «.row» задать дополнительный класс «.no-gutters».

4.4 Перенос колонок на новую строку

Если ряд (.row) заполняется суммарным количеством колонок более 12-ти, последующая колонка переносится на новую строку.

Здесь всё также, как в 3-й версии Bootstrap.

5. Порядок элементов

5.1 Классы порядка элементов

Можно использовать специальные классы с префиксом «.order-» для определения порядка элементов. Если вы знакомы с Flex-вёрсткой, данные правила будут вам знакомы. Bootstrap 4 даёт возможность задавать порядок элементов с помощью классов. Можно задавать порядок напрямую (.order-1.order-md-2):

Или можно использовать специальные классы, которые определяют порядок первого и последнего элементов (.order-first, .order-last):

5.2 Смещение колонок

По аналогии с Bootstrap 3, в 4-й версии также есть возможность горизонтального смещения колонок, однако реализовано это несколько иначе и для этого есть специальные классы с префиксом «.offset-».

5.2.1 Классы смещения

Сдвигать колонку вправо можно, используя классы «.offset-md-*», которые увеличивают левый отступ на * количество элементов. Из примера ниже, класс «.offset-md-2» сдвинет колонку «.col-md-4» на 2 колонки вправо, остальные примеры работают по аналогии:

Можно сбрасывать отступ на всех разрешениях благодаря классу «.offset-*-0», где * - это sm, md, lg или xl.

6. Вложенность

Весьма ожидаемо, что Bootstrap 4 поддерживает вложенность элементов. Работает здесь всё также, как в третьей версии - чтобы вложить колонки в другие, необходимо создать дочерний класс «.row» и уже в него вкладывать колонки.

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

В следующем уроке мы рассмотрим настройку Bootstrap сетки под ваш конкретный проект на примере использования в стартовом шаблоне OptimizedHTML 4. А именно настройку, работу с переменными отступов, брейкпоинтов, количества колонок и прочего.

Спасибо за внимание, друзья и до встречи в следующих уроках!

От автора: 19 августа на свет божий вышла альфа версия Bootstrap 4, ровно спустя четыре года после первого официального релиза Bootstrap v1 (Совпадение, не правда ли?). Вечно популярный front-end фреймворк обрел законченные черты, и я, как большой поклонник Bootstrap, очень взволнован и жду не дождусь приложить руки к новым возможностям!

Спустя целый год разработки, 1100 коммитов и 12000 строк-правок кода; появилось так много функций, с которыми не терпится поработать. Дабы сэкономить ваше время от прочтения лога изменений, я составил список новых возможностей, которые показались мне интересными.

Новый модуль сброса «Reboot»

Начнем оттуда, откуда начинают все фреймворки, с модуля сброса. Новый модуль reboot построен на традиционном normalize.css, но все общие селекторы и стили сброса переехали в отдельный scss файл. Также вы можете заметить новую фишку, установив стандартный box-sizing: border-box для тега html – это позволит наследовать данное свойство всем дочерним элементам.

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

Такой подход позволяет лучше переопределять параметры, если это потребуется, а не использовать!important.
За трюк спасибо сказать можно Jon Neal , а за подробный разбор данного метода сайту CSS-Tricks .

Rem и Em рулят!

В угоду оптимизации Bootstrap v4 лишился поддержки IE8 и массы CSS3 полифиллов. Начиная с IE9+, теперь он поддерживает другие, более любимые всеми CSS модули. Одним из них стали rem единицы (root em), они вычисляют размер шрифта относительно корневого элемента (html).

Rem единицы помогут нам по-настоящему вникнуть в адаптивную типографику. Так как все размеры шрифта напрямую зависят от нашего корневого элемента, мы можем создавать медиа запросы для изменения размера шрифта под разные размеры экрана. Скомбинируем это с новым миксином сетки для разных размеров экрана и вуаля! Ниже пример изменения размера шрифта на нашем сайте при просмотре на очень маленьких экранах:

html{ font-size:16px; } // создаем медиа запрос для крайне малых размеров экрана (0 - 34em) @include media-breakpoint-up(xs) { html{ font-size:18px; } }

Я выбираю Flexbox

Прямо из коробки Bootstrap v4 не поддерживает Flexbox, вместо него использует стандартные обтекания или табличный метод отображения. Это сделано для поддержки IE9+, но если вы можете отказаться и поддерживать только IE10+, то можно подключить Flexbox к вашему проекту. Сделать это можно, изменив булево значение переменной в файле _variables.scss; после чего ваш скомпилированный css будет содержать Flexbox стили. Flexbox применяется не только из-за сетки, а также из-за других элементов, в том числе нового компонента карточек, групп ввода и медиа компонентов.

Пример

Перейдем к примеру, где нам может пригодиться Flexbox. Крайне часто у меня имеется набор линейных колонок (как на картинке), где контент одной колонки увеличивает высоту и остальных колонок тоже. Классическая CSS дилемма. Одно из преимуществ Flexbox в том, что мы можем заставить все колонки иметь одинаковую высоту. Не нужно писать дополнительный CSS код!

Без Flexbox

С Flexbox

SCSS «узурпировал» LESS, так же, как и препроцессор CSS был выбран в Bootstrap v4. Весь код CSS был переработан в SCSS, причем без официального LESS порта на момент написания статьи. Некоторые причины этого Марк объясняет в твиттере.

Если вы большой поклонник оригинального LESS, то Марк просил о некоторой помощи в создании и обслуживании LESS порта.

Карточки, унифицированный элемент интерфейса

Из Bootstrap v4 были удалены классические компоненты well, panel и thumbnail. На их место пришел новый компонент: карточки!

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

И еще больше:

Наложения поверх изображений и фон

Можно установить в качестве фона картинку и наложить ее поверх текста или другого контента. Все это делается без единой лишней строки CSS, нужно только добавить в карточку:

Класс card-inverse делает текст белым, позволяя задать более темный фон, если это требуется. Насчет фонов, также можно использовать и стандартные фоновые цвета. К примеру, card-primary установит первичный цвет для карточки и т.д. и т.п.

Группированные карточки

Также помимо стандартной сетки с отступами, вы найдете опцию группирования карточек без внутренних отступов между ними и как установить блокам одну высоту. По умолчанию это можно сделать с помощью display: table и table-layout: fixed, но если у вас есть Flexbox, то можно и с помощью display: flex.

Сетка – кирпичная кладка

Карточки идут в виде колонок кирпичиков, что позволяет пододвинуть блоки ближе друг к другу. Эта опция не поддерживается в IE9 – необходим IE10 и выше!

Еще больше служебных классов?!

В предыдущих версиях Bootstrap было много классов с названием «служебный класс», они использовались для быстрого и легкого изменения контента, не трогая его специфические стили. Изменения, как правило, ограничивались обтеканиями (pull-left, pull-right), цветом (text-primary и т.д.), клиарфиксами (.clearfix) и другими.

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

Служебные классы padding и margin задаются с множественным значением переменной spacer. Например:

// $spacer - sass переменная, равная 1rem или 16px .m-a-0 { margin: 0 !important; } .m-a { margin: $spacer !important; } .m-a-md { margin: ($spacer * 1.5) !important; } .m-a-lg { margin: ($spacer * 3) !important; }

В коде.m-a значит внешний отступ по всем сторонам. Для внутренних отступов также существуют классы для отдельных сторон, осей, размеров (с помощью -0, -md и -lg). Ниже пример парочки других классов:

// стандартный паддинг на все стороны.p-a { padding: $spacer !important; } // стандартный паддинг сверху.p-t { padding-top: $spacer-y !important; } // стандартный паддинг справа.p-r { padding-right: $spacer-x !important; } // стандартный паддинг снизу.p-b { padding-bottom: $spacer-y !important; } // стандартный паддинг слева.p-l { padding-left: $spacer-x !important; } // стандартный паддинг для оси Х (лево и право) .p-x { padding-right: $spacer-x !important; padding-left: $spacer-x !important; } // стандартный паддинг для оси У (верх и низ) .p-y { padding-top: $spacer-y !important; padding-bottom: $spacer-y !important; }

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

Я перекинулся парой слов с Марком Отто по поводу использования этих классов (@mdo сооснователь Bootstrap) на их сайте public Slack channel, и вот что он сказал:

«Мы поняли, что нам без них не обойтись, слишком часто переопределяются значения по умолчанию для многих компонентов. Margin и padding кажется наиболее часто меняют свое значение (вместе с цветом и шрифтов)»

Также достойно упоминания

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

Новая документация

Документация Bootstrap v4 обновилась. Немного изменилась структура, по которой функции разбивались на макеты, контент и компоненты. Что действительно круто в новой документации, так это то, что каждый компонент теперь на отдельной странице. Это облегчает их поиск, а также можно сразу проверить адаптивность, поигравшись с размером окна браузера.

Новый уровень сетки

В Bootstrap 4 добавлен новый уровень сетки для маленьких экранов (480px в ширину), этот размер экрана получил имя класса предыдущего самого маленького экрана (.col-xs-XX). При этом все уровни сетки сдвинулись на один вверх, тем самым создавая новый самый большой уровень.col-xl-XX.

Ровно 4 года спустя появления первой версии Bootstrap (совпадение ли это?). Новая версия разрабатывалась в течении года, было сделано 1100 коммитов и написано 120000 строк кода. В этой статье рассмотрим основные изменения в новой версии.

Новый файл сброса стилей “Reboot”

Новый модуль основан на normalize . css и сейчас все стили перенесены в scss файл. Вы также можете заметить хитрый трюк, традиционный стиль box - sizing : border - box установлен для html элемента и затем глобально наследуется всеми элементами:

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

Это позволяет легко переопределить стиль box - sizing не увеличивая специфичность используя ! important .

Rem и Ems

В Bootstrap 4 alpha прекращена поддержка IE8 и множества хаков CSS3. Это позволило использовать некоторые новые свойства CSS3. Одно из них rem , которое вычисляет высоту шрифта в зависимости от высоты корневого элемента html .

Используя rem мы можем создавать по-настоящему адаптивную типографику. Так как, шрифт зависит от корневого элемента, можно создавать media правила для различных разрешений и мы получим гибкое управление размером шрифта.

Пример изменения размера шрифта на маленьких экранах:

html{ font-size:16px; } // Creates a media query for extra small devices (0 - 34em) @include media-breakpoint-up(xs) { html{ font-size:18px; } }

Поддержка Flexbox

Из коробки, Bootstrap 4 не поддерживает Flexbox, это помогает с поддержкой IE9 +. Однако, если вы хотите использовать Flexbox, вы можете включить его в свой проект. Это делается переключением логической переменной в файле _variables.scss . Скомпилированный CSS будет содержать Flexbox стили. Flexbox используется не только в качестве сетки, но и для других элементов, например, для карточек (Cards), для input groups и media components.

Пример использования Flexbox

Давайте рассмотрим пример, где Flexbox помогает нам. Есть три колонки расположенных в ряд. У одной из колонок контент увеличивает ее высоту. Использование Flexbox позволяет выровнять высоту колонок без дополнительного CSS.

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

Весь CSS скомпилирован с помощью Sass, причем компиляция ускорилась за счет использования Libsass.

Карточки (Cards)

Классические well , panel и thumbnail были заменены на новый компонент cards .

Наложение картинок и фоновых изображений

Вы можете наложить фоновое изображение или текст без CSS. Для этого надо добавить следующий элемент:

Класс card - inverse сменить цвет заголовка на белый, для использования с темным фоном.

Группировка карточек

Дополнительно к стандартной сетке, можно сгруппировать карточки вместе, удалить промежуток между ними и выровнять по высоте. По умолчанию, используются display : table и table - layout : fixed , но если будет включен flexbox, то будет использован display : flex instead .

Сетка Masonry

В Bootstrap 4 добавлена адаптивная сетка, в которой элементы выравниваются по высоте, сохраняя вертикальное расстояние между элементами. Поддержка IE10 и выше.

Больше вспомогательных классов

В предыдущую версию были включены различные классы названные «вспомогательные классы». В основном использовались такие классы, как pull - left , pull - right , color (. text - primary ), clearfix (. clearfix ).
В Bootstrap v4 alpha появился целый ряд классов определяющих padding и margin элементов.

// $spacer это переменная sass которая равна 1rem или 16px .m-a-0 { margin: 0 !important; } .m-a { margin: $spacer !important; } .m-a-md { margin: ($spacer * 1.5) !important; } .m-a-lg { margin: ($spacer * 3) !important; }

M - a добавляет внешние отступы со всех сторон элементов. Есть классы для каждых отдельных сторон.
Некоторые другие классы:

// Добавляет padding к всем сторонам.p-a { padding: $spacer !important; } // Добавляет padding к верхней стороне.p-t { padding-top: $spacer-y !important; } // Добавляет padding справа.p-r { padding-right: $spacer-x !important; } // Добавляет padding к низу.p-b { padding-bottom: $spacer-y !important; } // Добавляет padding слева.p-l { padding-left: $spacer-x !important; } // Добавляет padding слева и справа.p-x { padding-right: $spacer-x !important; padding-left: $spacer-x !important; } // Добавляет padding сверху и снизу.p-y { padding-top: $spacer-y !important; padding-bottom: $spacer-y !important; }

Совсем скоро выйдет стабильная версия 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 улучшена документация и разработан удобный поиск.