Новый Bootstrap 3 с ориентацией на мобильные устройства

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

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

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

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

Поговорим немного об обновленной системе сеток. В новой версии 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 не имеет себе равных!