Новые возможности в Bootstrap 4 Alpha

Новые возможности в Bootstrap 4 Alpha

От автора: 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;
    }
}

Подробнее можете прочитать в статье Kezz Bracey Подробное руководство: Когда использовать Em, а когда Rem.

Я выбираю 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, нужно только добавить в карточку:

<img class="card-img" data-src="image.jpg" alt="Card image">

Класс 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.

Как обсуждалось выше в статье про rem и em, команда Bootstrap добавила новые миксины для быстрого создания новых размеров экрана среди существующих. Для создания используется следующий синтаксис:

// Creates a media query: @media (min-width)
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
 
// Creates a media query: @media (max-width)
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }

Больше никаких иконок

Иконки были удалены из билда; в документацию Bootstrap добавили инструкции, как подключить сторонние пакеты иконок, как Font Awesome и Octicons.

JavaScript переписан

Все плагины JavaScript были переписаны в ES6 под последнюю спецификацию. Вы могли заметить, что некоторые плагины удалены (как affix плагин), они все еще переписываются, к ним добавляются новые библиотеки.

И что дальше?

Вот такой у меня получился список новых крутых функций в Bootstrap альфе. Если захотите полностью изучить лог изменений, взгляните на ГитХаб @mdo pull request.

Уверен, еще будет куча изменений, они до сих пор делаются, команда работает на износ. Планы развития включают следующие этапы:

Еще парочка альфа релизов для решения вопросов, поднятых сообществом

Два бета релиза по завершении всех функций

Два релиз-кандидата, чтобы убедиться, что все отточено.

Не сказано, когда все это будет выпущено. Так же как и с предыдущими билдами, все выйдет, когда будет готова библиотека. А сейчас можете поизучать Bootstrap и помочь отследить проблемы, о багах можно писать на bug tracker!

Автор: Aaron Vanston

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (7)

  1. Антон

    Дайте ссылку на документацию bootstrap 4, пожалуйста.

  2. Fatima

    Добрые люди помогите пожалуйста как можно добавить карту на бутстрап. не ссылку карт а как картинка, и нужно чтоб увеличивалась и уменьшалась

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree