Новый Bootstrap 3 с ориентацией на мобильные устройства
Новая версия Bootstrap 3 ориентирована на мобильные устройства, что делает разработку интерфейсов более гибкой и удобной на всех экранах. Система сеток и обновленные компоненты теперь поддерживают адаптивность и кроссбраузерность, что облегчает создание современных веб-страниц.
Вы узнаете о ключевых нововведениях, включая модальные окна, обновленные иконки и расширенные возможности кастомизации. Вы освоите приемы, которые позволяют создавать интерфейсы, идеально подходящие для мобильных устройств, и обеспечивать пользователю комфортный и современный опыт взаимодействия.
Система сеток
Поговорим немного об обновленной системе сеток. В новой версии Bootstrap имеется четыре системы сеток, работающие похожим образом и отличающиеся, размерами экранов с которыми они работают.
Активация сетки
Для того, чтобы сетка правильно работала и выводилась на экран, добавьте мета-тег viewport в ваш документ:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Различия систем сеток по ширине
Как уже было сказано выше, в новой версии фреймворка имеется четыре системы сеток. Они активируются с помощью задания параметров в мета-теге viewport. Имеются следующие соотношения между устройствами и шириной:
- Очень маленькие устройства ~ Телефоны (< 768px);
- Маленькие устройства ~ Планшеты (>= 768px);
- Средние устройства ~ Ноутбуки (>= 992px);
- Большие устройства ~ Настольные компьютеры (>= 1200px).
Каждому поддерживаемому виду соответствует свой класс:
- col-xs- ~ Очень маленькие устройства;
- col-sm- ~ Маленькие устройства;
- col-md- ~ Средние устройства;
- col-lg- ~ Большие устройства.
Чтобы использовать систему сеток, вам понадобится контейнер с классом «container». Внутри должен быть еще один контейнер с классом «row». Заметьте, что в отличие от Bootstrap 2, суффикс «fluid» не используется. Внутри этого контейнера вы можете поместить свои столбцы.
<div class="container">
<div class="row">
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
</div>
</div>
Итак, новая версия придерживается подхода «Mobile First». Это означает, что столбцы с суффиксом класса «xs» всегда будут плавающими по горизонтали, вне зависимости от выбранного размера экрана.
Если вы, скажем, используете столбцы с префиксом «md», а размер экрана выбран меньшим, чем 992px (например, 991px), то колонки будут располагаться друг под другом со 100%-ной шириной, как показано в примере ниже:
<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>Когда данная страница будет просматриваться на экране, размер которого 992px или более, это будет выглядеть так:
Если же вы просмотрите этот документ на экране размером 991px или менее, то выглядеть это будет уже иначе:
Вы также можете комбинировать классы, чтобы адаптировать дизайн сразу к нескольким типам устройств. Например, в следующем примере разметка создана таким образом, что первые две колонки являются плавающими и прилегают друг к другу по горизонтали на маленьких устройствах (sm), а на средних по размеру устройствах (md) располагаются друг под другом:
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
<div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
<div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
</div>
</div>В этом случае, открыв страницу на экране размером больше 991px, вы увидите три равных колонки, одну под другой, как в примере выше. Однако, если документ будет просматриваться на устройстве, с размером экрана между 768px и 991px, то результат будет следующим:
Как в примере выше, вы можете сочетать столбцы в самых различных комбинациях, чтобы создать сложную разметку. О системе колонок в Bootstrap можно говорить очень много. Если вам необходима подробная информация по данному вопросу, обратитесь к документации.
Bootstrap CSS
Большинство основных классов Bootstrap в новой версии фреймворка не претерпели изменений, однако, все же есть некоторые нововведения, о которых стоит упомянуть.
В целом, код был изменен, включая некоторые имена. Если вы взглянете на .less-файлы, то обнаружите, что все переменные фреймворка перешли с так называемого верблюжьего регистра (camelCase) – то есть, когда несколько слов пишется слитно, но каждое начинается с заглавной буквы – на использование для разделения слов символа тире.
Также, имя каждой переменной было стандартизировано в соответствии с правилом «element-state-pseudo state». Это значит, что стили для элементов наподобие:
<ul class="unstyled">...</ul>теперь имеют префикс элемента, к которому они применяются. Поэтому в новой версии Bootstrap определение предыдущего списка будет таким:
<ul class="list-unstyled">...</ul>То же самое правило применяется и к спискам с inline-стилями.
Другие изменения в именах переменных касаются классов, которые соотнесены с различными размерами. Например, разметка для кнопок в версии 2.* выглядела так:
<button class="btn btn-mini"></button>
<button class="btn btn-small"></button>
<button class="btn btn-large"></button>Старые суффиксы размеров для кнопок были изменены в соответствии с принятым в новой версии соглашением об именах, по аналогии с системами сеток. Поэтому пример, приведенный выше, в Bootstrap 3 будет выглядеть следующим образом:
<button class="btn btn-xs"></button>
<button class="btn btn-sm"></button>
<button class="btn btn-lg"></button>То же самое применимо и для элементов ввода.
Адаптивные таблицы
Общий синтаксис и разметка для таблиц не изменилась, но, следуя новой парадигме «Mobile First», они также стали адаптивными. Чтобы использовать это новшество, просто оберните таблицу контейнером с классом «responsive-table». Это сделает таблицы прокручиваемыми по горизонтали на маленьких устройствах (< 768px).
<div class="table-responsive">
<table class="table">...</div>
</div>Результат будет следующим:
Формы
В разделе CSS, посвященном формам, вы можете ознакомиться с основными отличиями работы с ними в новой версии Bootstrap. Каждый элемент ввода в Bootstrap 3 теперь отображается как блочный элемент с шириной 100%. Атрибут «size» может быть изменен с помощью классов, зависящих от атрибутов padding и font-size данного элемента, а не от значения width.
Разметка для форм также изменилась. Простейшая форма в версии 2.* выглядела вот так:
<form>
<fieldset>
<legend>...</legend>
<label for="input">...</label>
<input type="text" name="input" placeholder="..." >
</fieldset>
</form>В новой версии разметка той же формы имеет дополнительные элементы и, в частности, класс для самого элемента ввода:
<form role="form">
<fieldset>
<legend>...</legend>
<div class="form-group">
<label for="input">...</label>
<input type="text" name="input" class="form-control" placeholder="..." >
</div>
</fieldset>
</form>Bootstrap использует технологии приспособления сайтов для использования людьми с ограниченными способностями. По этой причине, в коде выше имеется атрибут «role». Также заметьте, что тандем label/input обернут снаружи контейнером с классом «form-group». Это, как и все остальное в новой версии фреймворка, сделано для достижения максимальной адаптивности.
Формы поиска в новой версии убрали. Так как все элементы input и textarea по умолчанию теперь имеют ширину 100%, то горизонтальным inline-формам необходимо уделить особое внимание. Однако сама разметка практически идентична предыдущей версии.
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" placeholder="Введите email">
</div>
<div class="form-group">
<label class="sr-only" for="pass">Пароль</label>
<input type="password" class="form-control" placeholder="Пароль">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Запомнить меня
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
Обратите внимание, что к тегу был добавлен класс «form-inline», а к тегу <label> – класс «sr-only», являющийся частью Bootstrap, служащей цели приспособления сайта для людей с ограниченными возможностями. Использование тега <label> не обязательно для inline-форм, однако настоятельно рекомендуется его добавлять – это никому не повредит.
Кстати, класс «sr-only» предназначен специально для программ чтения с экрана. Благодаря ему, такие программы будут знать, что метку следует прочитать вслух.
Наконец, для создания горизонтальной формы, вы просто устанавливаете ширину тега <label> с помощью комбинации классов: “col-md-” (конкретный класс выбирается из доступных вариантов исходя из ваших целей) и «control-label». Затем, оборачиваете тег <input> в контейнер с присвоенными ему классами для спецификации столбцов.
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label" for="email">Email</label>
<div class="col-md-3">
<input type="email" class="form-control" placeholder="Введите email">
</div>
</div>
</form>Результирующая форма выглядит так:
Имеются еще некоторые изменения, касающиеся форм, например, удаление классов «input-prepend» и «input-append», и добавление вместо них «input-group» и «input-group-addon». Чтобы узнать обо всех изменениях, пожалуйста, обратитесь к документации.
Иконки-глифы (Glyphicons)
Это еще один аспект новой версии Bootstrap, который претерпел изменения. Библиотека иконок включает в себя 40 новых глифов, которые переведены из растрового формата в векторный. Проще говоря, иконки теперь стали шрифтовыми символами.
Поэтому теперь, вместо добавления классов в формате «glyphicons-*» из папки «img», где раньше находилось два графических файла, содержащих библиотеку, вам нужно добавлять глиф-иконки, содержащиеся в файлах из папки «fonts». Файлы шрифтов с глифами представлены в четырех форматах, что сделано для кроссбраузерной совместимости.
Из соображений производительности, каждая иконка требует наличия базового класса и класса иконки. Так что теперь, вместо добавления привычных пользовательских растровых иконок, используется следующая конструкция:
<span class="glyphicon glyphicon-user"></span>Переход от растрового формата к векторному дал больший контроль над цветом и размером, а также предоставил возможность заменять стандартные иконки сторонними по желанию. Если вам интересно, где можно найти такие иконки, могу посоветовать ресурс Fontello.
Компоненты JavaScript
Несмотря на изменения, компоненты JavaScript в Bootstrap 3.0 имеют те же имена и используются так же, как и раньше, но с несколькими небольшими отличиями.
Модальные окна
Возможно, одним из наиболее часто используемых в Bootstrap компонентов является плагин Modals. Различие состоит в том, что контейнеры «modal-header», «modal-content» и «modal-footer», теперь обернуты контейнером «modal-dialog», который, в свою очередь, вложен в контейнер «modal-content». Привычная разметка:
<div class="modal hide fade">
<div class="modal-header"></div>
<div class="modal-content"></div>
<div class="modal-footer"></div>
</div>изменилась на:
<div class="modal fade">
<div class="modal-content">
<div class="modal-dialog">
<div class="modal-header"></div>
<div class="modal-content"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>Новая разметка более объемная, однако, она делает компонент более адаптивным, а также позволяет прокручивать область просмотра вместо использования параметра «max-height».
Чтобы запустить модальное окно из JavaScript, используется тот же метод, что и раньше:
$( '#my-modal' ).modal('show');Большинство плагинов остались прежними. Отдельно стоит заметить, что такой элемент навигации, как «аккордеон» был заменен сжимающимися панелями (Collapsible Panels), которые работают аналогично и имеют практически такой же синтаксис.
Классы были немного изменены, но по-прежнему требуется использование плагина переходов (Transition Plugin) без нужды создавать дополнительные контейнеры.
Плагин Typeahead также был исключен из состава Bootstrap в пользу плагина Twitter`s Typeahead.
События
События JavaScript теперь находятся в пространстве имен. Что это означает для вас? В Bootstrap 2, чтобы поймать момент закрытия какого-либо окна, вам нужно было добавлять следующий код:
$( '#my-alert' ).bind( 'close', function() {});Теперь, в третьей версии, имена событий изменились и стали привязанными к фреймворку. Поэтому пример, приведенный выше, теперь будет выглядеть так:
$( '#my-alert' ).bind( 'close.bs.alert', function() {});Вы можете ознакомиться с остальными имеющимися в Bootstrap компонентами JavaScript (все они основаны на jQuery).
Новые компоненты
В новой версии фреймворка появились новые компоненты в CSS-части. Это групповые списки (list groups) и панели (panels).
Групповые списки
Вот выдержка из официальной документации по групповым спискам (list groups):
… это гибкий и мощный компонент не только для отображения простых списков элементов, но и сложного контента.
Чтобы добавить групповой список, просто создайте неупорядоченный список с классом «list-group» и припишите класс «list-group-item» к каждому элементу этого списка.
<ul class="list-group">
<li class="list-group-item">Lorem ipsum...</li>
<li class="list-group-item">Dolor sit...</li>
</ul>
Вы можете добавить класс «active» к любому элементу списка, чтобы выделить его. Также, если вы поместите внутри него значок, он будет отцентрирован по вертикали и прижат к правому краю внутри элемента. Попробуйте сами.
Панели
Панели предназначены для того, чтобы выделять и группировать внутри них несколько элементов вашего сайта или приложения. Разметка для создания панели очень проста, а содержимое может быть практически любым.
Панели могут содержать шапку (header) и подвал (footer), а также иметь специальное назначение с применением классов «sucess», «error», «warning» и так далее. Например:
<div class="panel panel-success">
<div class="panel-heading">Заголовок панели</div>
<div class="panel-body"><p>Здесь некоторый контент</p></div>
<ul class="list-group">
<li class="list-group-item">Lorem ipsum...</li>
<li class="list-group-item">Dolor sit...</li>
</ul>
</div>
Как видите, панели отлично работают как с групповыми списками, так и с таблицами без границ.
Customizer – тонкая настройка Bootstrap
В третьей версии фреймворка обновился Customizer. Изменился не только внешний вид – инструмент стал лучше структурирован и теперь дает отличный контроль над максимальным количеством параметров.
Можно, к примеру, задать все стили шрифтов и цветов. Но кастомайзер это отдельная и очень большая тема, так что, думаю, вы найдете интересующую информацию в других источниках и разберетесь в этом самостоятельно.
Кроссбраузерность
Долгое время Internet Explorer 6 наводил ужас на веб-разработчиков. Bootstrap 2.* все еще поддерживал седьмую версию детища Microsoft. Но в третьей версии разработчики фреймворка убрали поддержку IE7 и Mozilla Firefox 3.6 и ниже.
Bootstrap имеет поддержку всех последних версий основных браузеров (Safari, Opera, Chrome, Firefox и IE) под Windows и Mac.
Если говорить об IE, то поддерживаются версии 8 и выше. И хотя имеются некоторые свойства, которые браузер от Microsoft не обрабатывает (к примеру «border-radius»), фреймворк остается полностью функциональным, но с небольшими недочетами. Также IE 8 требует respond.js для поддержки адаптивности.
Чтобы узнать обо всех обходных путях и подводных камнях поддержки CSS-свойств различными браузерами, обратитесь к официальной документации.
Заключение
С самого своего появления, Bootstrap зарекомендовал себя как отличный инструмент для быстрой разработки профессионально выглядящих сайтов и веб-приложений. Третья версия не стала исключением. Хотите знать, почему вам стоит использовать Bootstrap?
Данный фреймворк имеет продуманную и гибкую систему сеток с поддержкой мобильных устройств, использование которых становится все более популярным с каждым днем, и поддерживает адаптивный дизайн, что сейчас актуально, как никогда раньше. В этих аспектах Bootstrap не имеет себе равных!
Комментарии