Mobile First при помощи Bootstrap 3






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

Картинка с сайта htsargentina.info

Что нового?

Первое, что вы обнаружите в новом релизе, это поддержку responsive дизайна в ядре, поскольку модуль, реализовывавший её ранее, был удалён. Теперь в самой концепции ядра фреймворка заложен принцип «Mobile First», используя который, интерфейс приложения проектируется сперва для маленьких экранов, затем бОльших (об этом чуть позже).

«Практически всё было переделано так, чтобы вы начинали проектирование c устройств с маленьким экраном.»

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

Grid System

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

Включение Grid System

Чтобы сетка имела возможность корректно функционировать и реагировать на touch zooming, необходимо в заголовок документа добавить дополнительный meta-тэг:

Ширина элементов сетки

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

  • Extra small devices ~ Phones (< 768px)
  • Small devices ~ Tablets (>= 768px)
  • Medium devices ~ Desktops (>= 992px)
  • Large devices ~ Desktops (>= 1200px)

Для каждой ширины существует свой CSS-класс:

  • col-xs- ~ Extra small devices
  • col-sm- ~ Small devices
  • col-md- ~ Medium devices
  • col-lg- ~ Large devices

Чтобы пользоваться сеткой, вам понадобится элемент-контейнер с классом "container", внутри которого необходимо использовать элементы с классом "row". Обратите внимание на то, что в отличие от Bootstrap 2, теперь не используется суффикс "fluid". Далее, уже внутри "row" необходимо размещать столбцы.

cols-xs

Как уже было замечено, третий Bootstrap следует концепции «Mobile First». Так, колонки с суффиксом "xs" всегда будут выстраиваться горизонтально, независимо от ширины экрана. Если вы воспользуетесь префиксом "md", то при ширине экрана менее 992px столбцы будут выстраиваться вертикально и становиться 100%-й ширины, как это показано в следующем примере:

При ширине экрана более 991px вы получите следующий результат:

cols-md

А вот как поведёт себя эта разметка при ширине менее 992px:

cols-md-stacked

Кроме того, вы можете комбинировать классы столбцов. Допустим, вам нужно, чтобы первые два столбца из предыдущего примера выстраивались друг за другом на Small Devices (sm), а на мобильных телефонах — вертикально, вам необходимо добавить класс col-sm-6 вдобавок к col-md-4.

Теперь на ширине экрана более 991px вы увидите три одинаковых колонки, расположенных одна за другой, в точности. как в предыдущем примере. Но при ширине от 768px до 991px вы получите следующий результат:

cols-combined

Используя комбинирование классов, вы можете создавать довольно сложные структуры. Конечно же, Grid System вмещает в себя гораздо больше, чем мы рассмотрели, однако детальное рассмотрение каждого элемента не влезет в рамки одной статьи, поэтому не ленимся и идём читать документацию.

Bootstrap CSS

Большинство классов Bootstrap CSS остались теми же, однако всё же есть несколько изменений, которые нужно иметь ввиду.

Код был полностью переписан и были изменены имена переменных. если вы заглянете в less-файлы, вы заметите, что стиль именования переменных был изменён с camelCase на использование дефисов, а также имя каждой переменной было приведено к стандарту “element-state-pseudo state”. Это означает, что классы элементов вроде:

теперь стали иметь вид:

То же самое касается и списков с классом «inline». Среди прочих изменений имён классов, присутствуют классы, влияющие на размер элементов. Например, размер кнопок в версии 2.* регулировался следующим образом:

«Размерные» суффиксы были изменены таким образом, чтобы соответствовать общей схеме именования классов в Grid System:

То же самое применимо к input-элементам и определениям видимости элементов.

Responsive-таблицы

Общий синтаксис и внешний вид таблиц остался прежним, однако следуя принципам «Mobile First», новая версия Bootstrap предлагает responsive-таблицы. Чтобы воспользоваться новой функциональностью, необходимо воспользоваться классом table-responsive"", который делает таблицу горизонтально-прокручиваемой при ширине экрана менее 768px.

responsive-tables

Формы

О существенных изменениях в формах вы можете прочесть в соответствующем разделе документации. Во первых, каждый input-элемент теперь отображается как блочный элемент 100%-й ширины. Таким образом, «размерные» классы теперь регулируют padding элемента и размер шрифта, но никак не ширину самого элемента. Для того чтобы определить ширину input-элемента, вам необходимо будет завернуть его в контейнер с нужным классом модификатором ширины.

Сама разметка форм тоже изменилась. Самый простой вариант разметки формы во втором Bootstrap выглядел так:

В новой версии добавился дополнительный элемент, а также новый класс для input-элементов:

Как видите, у тега form появился атрибут role, поскольку Bootstrap разрабатывается с учётом поддержки пользователей с ограниченными возможностями. Также обратите внимание на то, что метки и input-элементы завёрнуты в дополнительный контейнер с классом form-group, что опять-таки сделано для реализации responsive-подхода.

В новой версии поисковая форма была упразднена, а поскольку все input-элементы теперь имеют 100% ширину по умолчанию, стоит отдельно обратить внимание на создание inline-форм, которые в принципе идентичны вертикальным:

inline-forms

Обратите внимание на то, что кроме класса form-inline используется класс sr-only для меток полей. Имя этого класса является сокращением от «Screen Reader only», а  сам класс предназначен для того, чтобы метки скрывались при отображении, но могли быть считанными специальными приложениями.

В случае, когда вам нужно отобразить метку, вы можете воспользоваться классами col-* и control-label, так же как и в предыдущей версии, а затем завернуть input-элемент в отдельный колоночный контейнер:

horizontal-forms

Есть ещё несколько значительных изменений, коснувшихся форм. Среди них удаление классов “input-prepend” и “input-append” в пользу “input-group” и “input-group-addon“. Подробнее об этом вы можете узнать из документации.

Glyphicons

Следующая область изменений, которую мы рассмотрим — это пиктограммы. Во-первых библиотека иконок пополнилась сорока новыми, а также теперь вместо файлов-изображений представлена в виде набора файлов шрифтов. Таким образом, теперь вместо того, чтобы копировать два файла glyphicons-* в каталог img, вам необходимо скопировать четыре файла из fonts. Да, именно четыре, поскольку фреймворк выбирает нужный в зависимости от возможностей используемого браузера.

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

Переход на использование шрифтов вместо изображений даёт возможность простого масштабирования и изменения цвета. Более того, вы можете легко заменить стандартный набор пиктограмм на любой, какой пожелаете, воспользовавшись чем-то вроде Fontello.

Компоненты JavaScript

Хотя фреймворк и был переписан практически заново, компоненты JavaScript сохранили свои имена и методы использования. За исключением пары моментов.

Модальные диалоги

Возможно, это наиболее часто используемый компонент Bootstrap. Вы обнаружите. что в целом он остался неизменным, за исключением добавившейся обёртки из двух контейнеров modal-content и modal-dialog. таким образом, если вы раньше описывали модальный диалог так:

То теперь он должен  выглядеть так:

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

Остальные компоненты остались в том же виде. Правда, аккордеон был убран в пользу сворачивающихся панелей, которые работают так же, но при этом реализуются более простой разметкой. Имена некоторых классов немного изменились, и они всё ещё требуют transitions plugin. Плагин Typeahead был убран в пользу Typeahead от Twitter.

События

События JavaScript теперь помещены в пространства имён. Что это означает для вас? Например, во втором Bootstrap, чтобы прицепиться к событию close"" какого-то alert'а, вам нужно использовать примерно следующую конструкцию:

В новой версии фреймворка имена событий теперь разбиты по пространствам имён, таким образом предыдущий сниппет в третьем Bootstrap будет выглядеть так:

Не забудьте посетить страницу JavaScript-компонент и ознакомиться со всем набором. Также не забывайте. что jQuery всё ещё обязательна для работы их всех.

Новые компоненты

Появилась пара новых компонент в CSS-части фреймворка: группы списков и панели.

Группы списков

Согласно официальной документации, «группы списков — это гибкий и мощный вариант традиционных списков, которые могу содержать любое сложное содержимое».

Для создания такого списка используется маркированный список с классом list-group"", элементы которого имеют класс list-group-item"":

list-groups

Если вам необходимо сделать элемент списка активным, наделите его классом active"". Если же вы поместите бэйдж внутри элемента, то бейдж будет автоматически центирован вертикально и помещён вправо.

Панели

Панели предназначены для того, чтобы поместить часть контента в отдельный контейнер и определённым образом выделить его. разметка панели очень проста и может включать в себя другие компоненты фреймворка. Панели имеют заголовок, подвал и могут наделяться хорошо известными вам классами “sucess“, “error“, “warning“ и т. п. Например:

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

Конфигуратор

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

customizer

Поддержка браузеров

Много страданий всем нам принёс Internet Explorer, особенно шестая версия. Даже последующие версии всё ещё несут в себе наследие этого кошмара. Если в версиях 2.x разработчики Bootstrap ещё тратили силы на поддержку вплоть до седьмого Internet Explorer, то в третьем Bootstrap вы такого уже не увидите. То же самое касается и Mozilla Firefox версий 3.6 и ниже.

Текущая версия фреймворка рассчитана на современные версии популярных ныне бразузеров (Safari, Opera, Chrome, Firefox и IE).

Поддержка IE начинается с версии 8 и выше. Несмотря на то, что в восьмой версии нет поддержки некоторых свойств, вроде border-radius"". Фреймворк работает в полном объёме, за исключением некоторых отличий во внешнем виде. Помимо всего восьмая версия IE требует respond.js, чтобы поддерживать Media Querу.

Более подробную информацию о поддержке браузеров можно получить в официальной документации.

Итоги

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

Если бы мне можно было назвать лишь одну причину для того, чтобы использовать новый Bootstrap, я бы определённо назвал новую Grid System. В современных реалиях, когда размеры экранов клиентских устройств колеблются от самых крошечных, до огромных, способность интерфейса приложения динамически адаптироваться к размеру экрана просто незаменима. И новый Twitter Bootstrap поможет вам с этим как нельзя лучше!

Источник: NetTuts+