Понимание Bootstrap: как это работает и что нового. Также достойно упоминания

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

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

В этой статье мы рассмотрим, что нового будет добавлено в четвёртой версии платформы 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!

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

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

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

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

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; } }

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. Для этого надо добавить следующий элемент:

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

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

// $spacer это переменная sass которая равна 1rem или 16px 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; }

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