Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Сначала мобильные с Bootstrap 3

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

Хорошо, пару недель назад, на свое двухлетие Mark Otto и остальные ребята ответственные за разработку и поддержку Bootstrap, анонсировали официальный релиз третьей версии фреймворка, и тут есть на что посмотреть, давайте разберёмся с чем нам предстоит иметь дело.


Что нового?

Первое и пожалуй самое важное изменение, которое вы обнаружите в новом Bootstrap - поддержка адаптивных веб-сайтов, был полностью убран адаптивный модуль, с которым нам приходилось иметь дело до этого. Теперь Bootstrap полностью адаптивный в своей основе, даже больше, новая версию следует подходу "Mobile First" (сначала мобильные), это значит что весь дизайн был изменён и будет работать начиная от самых малых экранов и будет меняться по мере изменения размеров экрана (скоро об этом поговорим подробнее).

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

Что касается того как выглядят компоненты фреймворка, тут также всё поменялось, стало заметно, что весь стиль стал более плоским (flat), также есть опциональная версия с визуальной частью, которая выглядит подобно версии 2.0. В дополнение иконки теперь представляют из себя шрифты вместо изображений, что довольно удобно, в случае если нужны различные размеры и цвета.


Система сеток

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

Активируем сетку

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

Сетки разной ширины

Фреймворк обладает четырьмя системами сеток в новой версии, которые переключаются в зависимости от ширины области просмотра (viewport). Ширина, устанавливающая границы между ними:

  • Очень маленькие устройства ~ телефоны (< 768px)
  • Маленькие устройства ~ планшеты (>= 768px)
  • Устройства со средними размерами экрана ~ настольные компьютеры (>= 992px)
  • Большие устройства ~ настольные компьютеры (>= 1200px)

И каждая ширина области просмотра обладает соответствующими классами, которые отвечают за неё:

  • col-xs ~ очень маленькие устройства (Extra small)
  • col-sm ~ маленькие устройства (Small)
  • col-md ~ средние устройства (Medium)
  • col-lg ~ большие устройства (Large)

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

cols-xs

Как я упоминал ранее, новая версия бутстрап использует подход - сначала мобильные, это значит, что колонки с классом суффиксом "xs" всегда будут располагаться горизонтально, не важно какова область просмотра. Если вам угодно, используйте колонки с префиксом "md", в случае если область просмотра будет меньше 992px шириной (даже если это 991px), колонки будут располагаться друг под другом с шириной 100%, как в следующем примере.

Когда данная страница просматривается в области просмотра 992px или больше, выглядит это следующим образом:

cols-md

В случае если документ просматривается в области просмотра 991px или меньше, выглядит это так:

cols-md-stacked

Также у вас есть возможность комбинировать классы для обращение к вашим элементам согласно разным областям просмотра. Допустим, если в примере ниже вам нужно расположить одну колонку рядом с другой для маленьких устройств (sm), а для телефонов поместить их друг под другом, можно добавить col-sm-6 вместе с классом col-md-4.

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

cols-combined

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


Bootstrap CSS

Большинство основных классов Bootstrap (Base) остались практически не тронутыми, тем не менее мы должны не забывать о некоторых изменениях, используя новую версию.

Весь код был переписан, также как и имена переменных изменились. Если посмотреть на файлы .less, вы обнаружите все переменные данного фреймворка больше не используют верблюжью нотацию, вместо этого используется тире для разделения слов, также каждое имя переменной было стандартизированно согласно подходу "элемент-состояние-псевдосостояние". Это значит что стили элементам добавляются следующим образом:

Теперь к ним добавляется префикс элемента, к которому применяются классы, тем самым в новой версии список из предыдущего примера станет.

Тоже самое относится к спискам со встроенными стилями, применяемым к ним. Другие изменения имён переменных можно увидеть в классах, которые мы знали до этого, относящиеся к размерам, к примеру кнопки, в версии 2.* выглядели бы так:

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

Тоже самое с размерами полей ввода и классами отвечающим за видимость элементов.

Адаптивные таблицы

В этой версии фреймворка синтаксис и структура таблиц осталась без изменений, но, преданные парадигме "Сначала мобильные", в этом Bootstrap мы можем создавать адаптивные таблицы. Чтобы их использовать, просто оберните всю таблицу в контейнер с классом "responsive-table", тем самым на маленьких устройства у этих таблиц появится прокрутка.

В результате получится следующая таблица:

responsive-tables

Формы

Большинство изменений CSS вы увидите в разделе посвящённом формам. Для начала, каждое поле ввода в форме, в Bootstrap три отображается как блочный (block) элемент с шириной 100%. Размеры можно модифицировать применив класс для контроля форм, они отвечают за padding и font-size, но не ширину элемента, чтобы иметь контроль над шириной поместите их в контейнер нужной ширины.

Разметка для форм также изменилась, самая простая форма в версии 2.* выглядела бы следующим образом.

Разметка форм в новой версии включает дополнительный класс и класс для самих полей ввода, выглядит это так.

Во время работы над Bootstrap разработчики не забыли о доступности (accessibility), поэтому вы можете увидеть аттрибуты "role" в разметке, также стоит отметить, что комбинация input/label обёрнуты в класс "form-group" и также как и всё, это связано с адаптивной природой фреймворка.

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

inline-forms

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

Последнее что стоит отметить, для создания горизонтальной формы, просто укажите ширину label с помощью классов "col-md-" или "_sm" и так далее, а также соответствующий класс "control-label", также как и в версии два, и после этого оберните поле ввода в контейнер с необходимой шириной.

Форма, которую мы получим в результате.

horizontal-forms

Другие изменения коснулись форм, к примеру убрали классы "input-prepend" и "input-append", в пользу "input-group" и "input-group-addon". Однако есть ещё много чего, что можно рассказать, для деталей почитайте документацию.

Glyphicons

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

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

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


JavaScript компоненты

Несмотря на то что дизайн был изменён, JavaScript компоненты в Boostrap 3.0 обладают теми же именами и методами использования. С парой небольших, незначительных отличий.

Всплывающие окна

Пожалуй самый часто используемый плагин Bootstrap - всплывающий окна (Modals). Вы найдёте их довольно похожими, с разницой в том, что контейнеры "modal-header", "modal-body" и "modal-footer" не оборачиваются в "modal-content", обёрнутый в "modal-dialog". Что размечалось так:

Изменилось и будет выглядеть так:

Да здесь немного больше разметки, но сделано это в целях адаптивности компонента, также есть возможность прокручивать всю область видимости, вместо параметра "max-height".

Чтобы активировать это JavaScript'ом, вы будете использовать такой же метод как раньше.

Остальные плагины остались практически без изменений. Так же стоит упомянуть, отказались от аккордеона вместо collapsible panels, они работают практически идентично и обладают очень похожим синтаксисом. Некоторые классы немного изменились, но они также требуют плагина для плавных переходов (transitions plugin) и им не требуется дополнительный контейнер.

Убрали плагин Typeahead из Bootstrap, в пользу Twitter Typeahead plugin.

События

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

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

Не стесняйтесь изучить остальные JavaScript компоненты Bootstrap (они всё также зависят от jQuery).


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

Есть пара новых CSS компонентов в данной версии фреймворка, list groups и panels.

List Groups

List groups в официальной документации.

Гибкие и мощные компоненты для отображения не только обычных элементов списка, но также сложных с кастомным контентом.

Для создания list group просто сделайте неупорядоченный список с классом "list-group" и добавьте "list-group-item" к каждому пункту списка.

list-groups

Вы можете добавить класс "active" к любому пункту в списке, чтобы выделить его цветом, помимо этого если вы добавите значок (badge) внутрь данного пункта, он будет центрирован вертикально и сдвинут вправо. Попробуйте это в действии.

Панели

Панели способ упаковать какой-либо контент вашего сайта или приложения, выделить это и придать этому чувство целостности. Разметка для панели довольно простая и её контент может быть комбинирован с различными элементами, чтобы получить уникальный внешний вид.

Панели могут обладать шапкой и подвалом и придать специальное значение с помощью классов "sucess", "error", "warning" и так далее. К примеру.

panels

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


Customizer

Ещё в этой версии есть Customizer, в котором изменился не только внешний вид, но также он лучше организован и даёт вам контроль над такими вещами, как ширина области просмотра на которой работает определённая система сеток.

Как и прежде, вы можете задать все стили шрифтов и цвета. Это довольно большая тема сама по себе и я советую вам испробовать Customizer лично.

customizer

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

Мы долго страдали от необходимости поддерживать Internet Explorer, версия шесть была настоящим кошмаром и его предшественники всё ещё доставляют порой нам неудобства. В версии 2.* команда Bootstrap всё ещё поддерживала версию семь браузера от Microsoft. В новой итерации фреймворка нет больше поддержки IE семь, также как и Mozilla Firefox 3.6 и ниже.

Если быть точным, Bootstrap поддерживает последнии версии всех основных браузеров (Safari, Opera, Chrome, Firefox и IE), как в Windows, так и на Mac.

Что касается IE, есть поддержка версии восемь и выше, не смотря на то что есть свойства, которые браузер не будет отображать, такие как "border-radius", фреймворк отлично функционирует с небольшими внешними отличиями. IE восемь необходим respond.js для поддержки медиа запросов.

Чтобы получить полный список несостыковок и обходных путей для разных браузеров (кх кх, кашель, Internet Explorer, снова кашель, кх кх) изучите официальную документацию.


Заключение

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.