Швейцарский нож для UI: знакомимся с Twitter Bootstrap

Прошло чуть больше года с момента первого релиза Twitter Bootstrap. За год этому проекту удалось стать настоящей рок-звездой: он взорвал сердца веб-разработчиков по всему миру, собрал вокруг себя нешуточного размера сообщество, вдохновил единомышленников на создание форков и занял почетное место на олимпе инструментов веб-разработки.

Статья опубликована в журнале «Хакер» №1 (168), январь 2013. Соавтор — Илья Курченко.

Кто такой, чем знаменит?

Twitter Bootstrap — бесплатный и свободный набор инструментов для создания веб-приложений (сайтов) любого масштаба. Весь Bootstrap по большому счету — это набор HTML/CSS/JS-файлов, код которых решает самые разнообразные задачи, возникающие перед разработчиком. Например, в Twitter Bootstrap из коробки доступны HTML/CSS-шаблоны оформления для веб-форм, кнопок, главного меню и так далее.

Зачем пользоваться CSS-фреймворками?

Вполне резонный вопрос. Действительно, зачем заморачиваться изучением каких-то «гламурных» инструментов, если у тебя проблем с версткой/разработкой и так нет? Аргумент вроде «там есть куча готовых кусков кода» звучит не совсем убедительно, поскольку у любого девелопера с опытом работы явно имеется свой набор проверенных временем заготовок. Так в чем же тогда профит от применения Twitter Bootstrap и ему подобных? Отвечаю по пунктам.

Во-первых, заготовка заготовке рознь. Не хочу кого-то обидеть, но по опыту скажу, что на каждое правильное решение обязательно найдется еще более правильное. Так уж устроен человек: потратив время и найдя рабочий вариант, в большинстве случаев он не захочет искать и рассматривать альтернативные точки зрения. Пусть даже найденный первоначальный вариант не идеален — главное, он работает, а остальное никого не касается. Сам понимаешь, что такой подход не самый верный и по-хорошему нужно всегда стремиться к совершенству.

Фреймворки не обходят этот вопрос стороной. «Но ведь их код тоже может быть далек от идеала!» — справедливо возразишь ты. Популярные фреймворки (например, тот же Bootstrap от Twitter) имеют развитые сообщества, состоящие из опытных разработчиков, которые следят за качеством кода и не скупятся вносить свои предложения. Если предложенный кем-то вариант решения определенной задачи круче, то его обязательно внесут в новую версию дистрибутива, и он станет доступен всем девелоперам. Таким образом, код твоих проектов будет всегда свежим и отфильтрованным от всяких архаизмов. Ведь даже сейчас, несмотря на богатые возможности HTML5/CSS3, многие веб-разработчики продолжают делать красивые кнопочки в виде картинок.

Быстрое прототипирование интерфейса будущего приложения. Ни для кого не секрет, что в большинстве случаев программисты рьяно берутся за написание кода нового проекта, а потом долго и мучительно пытаются сделать удобный и приятный для восприятия интерфейс. И если еще продумать его концепцию по силам многим кодерам, то с отрисовкой элементов у большинства возникают проблемы. Вот в таких случаях помощь фреймворка будет просто незаменимой, поскольку в нем имеется все необходимое, чтобы создать нормальный интерфейс без лишних усилий. Тут тебе и симпатичные кнопки, и оформленные элементы ввода, и много чего еще. Поверь, результат ты получишь лучше (а главное — быстрей), чем если ты начнешь все делать самостоятельно (особенно если напрочь отсутствуют навыки рисования).

Стандартизация интерфейса. Верстальщики и дизайнеры нередко орут благим матом и возмущаются, что все разработанные на фреймворках сайты выглядят одинаково. Мол, нефиг заполонять Сеть кучей проектов со схожим внешним видом. Отчасти это утверждение справедливо, но почему-то эти ярые противники забывают, что применение в проекте фреймворка не мешает дизайнеру создать уникальный шедевр. Все элементы могут быть перерисованы и выполнены в таком стиле, который только может придумать извращенный мозг художника. При детальном изучении предмета внести изменения — дело нескольких часов (я имею в виду полную перерисовку базового оформления). Разработчики фреймворка этого не запрещают, а даже, наоборот, поощряют.

Кроме возможности создавать простые и стильные интерфейсы для веб-приложений, Twitter Bootstrap предлагает нам еще одно очень важное и неоспоримое преимущество — возможность быстро и без лишних хлопот создать полностью адаптивный дизайн для твоего сайта. Можно сколько угодно спорить о том, что лучше — отзывчивая верстка, специально разработанная статичная мобильная версия или вообще нативное приложение для платформы, но факт остается фактом: зачастую у разработчиков просто нет ни времени, ни ресурсов для того чтобы делать отдельную версию сайта для смартов, не говоря уже о нативном приложении. В этих случаях Bootstrap — это идеальное решение, позволяющее верстать практически без лишней работы и одновременно получить сайт, оптимизированный подо все разрешения экранов и даже подстраивающийся в реальном времени под ресайз окна браузера. Немного путано? Просто открой главную страницу проекта на гитхабе (bit.ly/q2G9Mm) и постепенно уменьшай ширину браузера. Выглядит здорово, не правда ли? Тогда перейдем от слов к делу и попробуем сделать свой проект на Bootstrap.

Ready? Set? Go!

Загрузив сам архив с фреймворком, первым делом необходимо подключить нужные файлы к проекту. Содержание архива Bootstrap в текущей версии 2.2.2 такое:

/
|—css/
|   |——bootstrap[.min].css
|   |——bootstrap-responsive[.min].css
|—js/
|   |——bootstrap[.min].js
|—img/
    |——glyphicons-halflings.png
    |——glyphicons-halflings-white.png

Тут все просто: в CSS лежат сами стили, которые необходимо подключать к проекту (обычный и minified), в JS — скрипты, в img — специальный пакет иконок от Glyphicons. Подключаешь, естественно, только по одному файлу (иконки цепляют сами стили). Кстати, многие верстальщики часто работают с девелоперской версией кода, внося некоторые правки на горячую прямо туда, а потом просто используют минифаеры. Строго говоря, это неправильный подход. Правильный алгоритм будет таким:

1. подключаешь bootstrap.min.css;
2. подключаешь bootstrap-responsive.min.css;
3. подключаешь bootstrap.min.js;
4. указываешь нужные стили оверрайдом в отдельном css (я обычно называю его custom.css).

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

Кстати, важный момент — не забудь правильно задать правила масштабирования страницы:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Эта строка не позволит мобильным браузерам масштабировать страницу по своим правилам (например, весь сайт в одну колонку с вырвиглазным масштабом, как это любит делать Opera Mobile), предоставляя эти привилегии разработчику. Если вдруг возникнут какие-то трудности с базовыми вещами, настоятельно советую глянуть оригинальные getting started примеры от разработчиков: bit.ly/NZOiOy.

Скаффолдинг, настало твое время!

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

Чтобы сразу же верстать адаптивно, необходимо для начала разобраться с назначением одного из главных элементов Bootstrap — сетки. Grid (а именно так называется эта штука в терминологии фреймворка). Это некое подобие адаптивной сетки, сверстанной на дивах, в ячейки которой можно размещать элементы интерфейса. Фишкой грида является то, что в нем уже заданы правила поведения при уменьшении размеров страницы (естественно, только позиционные, сами стили для изменения, например, размеров шрифтов прописываются отдельно).

Оформления на основе Twitter Bootstrap для популярных CMS

• goo.gl/5lK9K — пример темы для популярного блогового движка WordPress;
• goo.gl/VhXXs — альтернативная тема для WordPress на Bootstrap;
• goo.gl/TgW47 — шаблон оформления, созданный на Twitter Bootstrap для Drupal;
• goo.gl/a7RSH — альтернативный вариант Bootstrap для Drupal;
• goo.gl/EFpDr — шаблон для популярной сегодня системы ModX;
• goo.gl/GkXTB — Bootstrap в связке Typo3;
• goo.gl/8x8Q1 — пример для фреймворка Yii.

По дефолту вся рабочая область делится на 12 ячеек по ширине. Ширина ячейки вычисляется в процентах от текущей ширины окна браузера. Кстати, количество ячеек в строке (а соответственно, и ширину отдельной ячейки) и другие важные переменные, исползуемые во время верстки, ты всегда можешь изменить штатными средставами Bootstrap, получив специально кастомизированный файл стилей. Давай создадим грид из одного ряда с тремя ячейками.

<div class="row">
    <div class="span4">Первая ячейка</div>
    <div class="span4">Вторая ячейка</div>
    <div class="span4">Третья ячейка</div>
</div>

Класс .row у дивов задает ряд-контейнер, в котором размещаются сами ячейки. Сами ячейки задаются классами spanN, где N — количество ячеек, на которое простирается ячейка. Важно помнить, что сумма ячеек в row должна равняться общему возможному количеству ячеек в row — в нашем случае это 12. То есть ты можешь задать span4, span2, span4 и span2, но никак не три span6 в одном row, иначе верстка просто «разъедется». Кстати, если хочешь поставить «спэн» не с начала ряда, юзай дополнительный класс offsetN (работает по схожему принципу), где N — длина отступа в span’ах.

Если взглянуть на официальный getting started, можно заметить, что контент обычно оборачивается в блок .container. Тут надо понимать что контейнеров, как и гридов существует два вида — с ограниченной максимальной шириной (container) и полностью резиновый (containter-fluid). В зависимости от того, какой тип контейнера нужен, юзай соответствующие row или row-fluid.

С адаптивностью связан еще один важный момент. Bootstrap реагирует на изменение размера не по каждому событию ресайза, а только при переходе через определенные пограничные точки. То есть реально верстка поменяется (изменится ширина ячеек и их позиционирование), например, при изменении ширины окна от 980 к 979 пикселей, но не при переходе с 979 к 978. Таких контрольных точек может быть несколько, а их значения ты можешь менять через директиву

@media (min-width: 768px) and (max-width: 979px) {
    ...
}

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

Время кодить!

С размещением элементов разобрались. Теперь пришло время наполнить нашу страницу смыслом.

Один из самых узнаваемых элементов Bootstrap — это, конечно же, navbar, горизонтальная черная топ-панель с элементами меню. Сразу оговорюсь, что навбар может содержать не только линки на разделы, но и формы ввода, кнопки, дропдауны, дивайдеры и еще кучу всего. Возникает вопрос: как все это богатство будет реагировать на изменения ширины страницы? Очень просто! При переходе через очередную контрольную точку все содержимое навбара, кроме логотипа (который опционален, как и любой другой элемент в Bootstrap’е), будет прятаться под кат, а на навбаре останется лишь кнопка, позволяющая по необходимости развернуть все многообразие навигационных элементов. Кстати, учитывай, что, несмотря на то, что базовые стили бутстрэпа прекрасно обходятся и без JS, большинство фишек, связанных с адаптивностью, будет работать только при наличии подключенной библиотеки jQuery и bootstrap.js, содержащих в себе все многообразие поведения элементов Bootstrap. Если все это тебе нужно не целиком, а только частями (например, у тебя нет модальных окон), ты можешь подключить только необходимые модули. Например, чтобы сработала вышеописанная фишка с катом для навбара, подключи скромную библиотеку bootstrap-collapse.js (в стандартном пакете не поставляется, нужно отдельно скачать на странице кастомизации), ну и jQuery, естественно. Такой подход позволяет юзать только то, что реально нужно, не обвешивая страницу здоровенным bootstrap.min.js с примочками на все случаи жизни. Полный список модулей доступен на странице кастомайзера (bit.ly/TYGsat).

Но довольно теории, делаем навбар! Пишем в body:

<!--Класс navbar-fixed-top фиксирует положение элемента
    наверху страницы-->
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">

    <!--По всей ширине страницы-->
    <div class="container-fluid">

      <!--Кнопка показа ката при уменьшении размеров-->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!--Логотип. Опционально, но бывает нужно-->
      <a class="brand" href="#">Хакер</a>

      <!-- Закидываем pull-right'ом дропдаун вправо-->
      <ul class="nav pull-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">User</a>
          <ul class="dropdown-menu">

            <!--Перечисляем элементы дропдауна-->
            <li><a href="/">Настройки</a></li>
            <li><a href="/">Выход</a></li>
          </ul>
        </li>
      </ul>
      <div class="nav-collapse">
        <ul class="nav">

          <!--Сами страницы навигации-->
          <li><a href="#">Взлом</a></li>
          <li><a href="#">Malware</a></li>

          <!--Активный эелмент меню-->
          <li class="active"><a href="#">Кодинг</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Главное меню средствами Bootstrap

Ratchet — «Bootstrap» для iOS-разработчиков

Если ты занимаешься разработкой программ для iOS, то фреймворк Ratchet (goo.gl/zqF7g) однозначно должен обосноваться в твоем девелоперском чемоданчике. С его помощью построить прототип интерфейса будущего приложения — дело десяти минут. За счет чего достигается такая скорость?

Дело в том, что в коробке с Ratchet поставляются готовые прототипы большинства элементов управления, применяемых в iOS. Тут тебе и пимпы, переключалки, формы списков и многое другое.

Помимо графических финтифлюшек, в пакет Ratchet входит специальный JS-сценарий, позволяющий объединить с помощью Ajax все страницы прототипа. Таким образом, болванка становится похожей на реальное приложение. Реалистичности также добавляет картинка с изображением iPhonе, на фоне которой идет тестирование заготовки.

Для быстрого знакомства с Ratchet я рекомендую посетить официальный сайт проекта и пробежаться по документации. Создатели проекта постарались и сделали ее по-настоящему интерактивной.

Кстати, по умолчанию навбар будет белым. Чтобы сделать его классическим черным, добавь класс navbar-inverse.

С навбаром связан еще один любопытный модуль — Scrollspy. Ты наверняка видел этот эффект на множестве сайтов, когда в зависимости от того, докуда ты доскроллил, меняется активный элемент навбара (бывает полезно при длинных страницах с логически разделенными блоками). Так вот, перед тобой реализация этой фичи в Bootstrap. Подключай модуль со страницы Javascript (bit.ly/o363LD) и простейшими навигационными линками управляй навигацией на странице. Больше инфы по приведенной ссылке — там все достаточно просто. Только не забудь зафиксировать сам навбар наверху страницы, а то фишка-то будет, но пользователь ее, увы, не увидит.

С навбаром разобрались, погнали дальше :).

Формируем формы

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

<button class="btn btn-large" type="button">Large button</button>

Стилями btn-large, btn-small и так далее ты можешь управлять размерами кнопок (они высчитываются динамически). А их внешний вид можно легко изменить классами вроде btn-primary, btn-success. Кстати, если тебе чем-то не угодили стандартные цвета в предопределенных стилях, можешь использовать множество генераторов цветовых стилей, доступных в Cети, или просто поменять значения переменных при генерации кастомного стиля (bit.ly/o363LD). И кстати, использовать обычные input’ы вместо button’ов также не возбраняется — вышеобозначенные стили отлично сработают и на input’ах типа submit.

Симпатичный ProgressBar

Кстати, с кнопками связана еще одна особенность. Легким движением руки ты можешь сделать очень удобную группу переключателей, используя JavaScript-плагин bootstrap-button.js. Делается это примерно так:

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>
  <button type="button" class="btn btn-primary">3</button>
</div>

Аргументы за

1. Универсальность. Twitter Bootstrap подходит для проектов любой сложности и масштаба.
2. Прозрачность и дружественность к разработчику. Bootstrap — свободный и бесплатный продукт. Его исходный код всегда доступен на GitHub, а разработчики рады новым форкам. Использование фреймворка также не вызывает сложностей и все в большей мере зависит от имеющегося объема знаний.
3. Поддержка LESS. Для многих современных проектов возможностей стандартного CSS не хватает. Дизайнерам тоже стали нужны «переменные» и другие кодерские штучки вроде вложенности функций и операторов . Эту проблему успешно решает технология LESS. Разработчики Twitter Bootstrap не могли обойти этот факт стороной, поэтому возможность применять LESS заложена в фреймворке из коробки.
4. Подробная документация. На сайте проекта и GitHub’е представлена хорошая документация, позволяющая взять быстрый старт и найти ответы на возникшие вопросы. Вся теория разбавлена примерами, которые тут же можно оценить в действии.
5. Поддержка jQuery-плагинов. С Bootstrap поставляется специально разработанный набор плагинов, позволяющих за считаные минуты добавить динамичности.
6. Кроссбраузерность. Созданные с помощью Bootstrap приложения хорошо отображаются не только последними версиями популярных браузеров, но и их предками. Конечно, добиться совместимости по отображению с такими древними монстрами, как IE5/6, разработчикам не удалось (а нужна ли она?). Порядок начинается с IE7 и выше, что на сегодняшний день просто замечательно.
7. Поддержка HTML5/CSS3. Ко всем новым фишкам HTML5 фреймворк относится положительно и поощряет их применение в очередном проекте.

WWW

• bootsnipp.com — многие вещи, которые элегантно делаются с помощью Bootstrap, уже сделаны и выложены в виде сниппетов на проекте BootSnipp. Перед тем как ломать голову и разбираться в классах — обязательно воспользуйся этим ресурсом;
• goo.gl/hQU8m — официальный сайт проекта Twitter Bootstrap.

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

<div class="btn-group" data-toggle="buttons-checkbox">
...

Текстовые формы создаются тоже очень просто, для этого достаточно специального стиля. Ничего сложного:

<input type="text" class="input-small" placeholder="Email">

Класс .input-small работает по такому же принципу, как и с кнопками. Полный список стилей ты можешь посмотреть на странице bit.ly/Z4X1HB.

А теперь давай попробуем совместить полученные знания и сделать классную стилизованную форму ввода с кнопкой отправки:

<div class="input-append">
  <input class="span4" id="appendedInputButton" type="text">
  <button class="btn" type="button">Создать</button>
</div>

Конечно, это не все трюки, которые можно проворачивать со стандартными элементами ввода на формах. Так, я не рассказал о возможностях prepend-подсказок в текстовых полях, выпадающих прямо из кнопок списках (требует наличия соответствующего плагина bit.ly/HB1eph) и многом другом, но я думаю, что, посмотрев соответствующую документацию, ты без труда разберешься и сделаешь все по аналогии. Главное — понять принцип, по которому происходит стилизация элементов формы в Bootstrap. Дальше поговорим о таком архаичном инструменте веба, как таблицы.

Таблицы? Не, не слышал

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

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Рубрика</th>
      <th>Количество статей</th>
      <th>Количество авторов</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td><td>PC_ZONE</td><td>4</td><td>6</td>
    </tr>
    <tr>
      <td>2</td> <td>КОДИНГ</td><td>4</td><td>7</td>
    </tr>
  </tbody>
</table>

Тут ничего необычного. Bootstrap поддерживает стилизацию таблиц классами вроде .table-striped (зебра-стайл) или .table-condensed (делает таблицу более компактной). Но ты думаешь, я бы стал писать о таком примитиве, если бы тут не было чего-то более важного?

Дело в том, что при верстке через grid зачастую возникает необходимость задать ряды неравнозначной «высоты». Например, когда в левой части страницы у тебя форма ввода с пятью полями (каждое, естественно, в своем ряду), а в правой должна быть сплошная картинка, подсказка или просто даже баннер, который должен простираться на все эти пять рядов по высоте и при этом технически представлять собой один-единственный row. Одним из решений подобной проблемы и является использование таблиц. Они в Bootstrap точно такие же, как и grid’ы, и поддерживают динамическое изменение размеров классами spanN. Просто оперируй атрибутами rowspan, и ты сможешь сверстать практически любую композицию :).

Графика by Glyphicons

Важным пунктом в графической составляющей Bootstrap является возможность буквально одной строкой кода вносить легкие штрихи в элементы дизайна стильными и вебдванольными иконками от Glyphicons (bit.ly/zqtkSt). Иконки подцепляются самими стилями и могут быть использованы практически везде. Так, для создания кнопки-линка (именно линка, с инпутами именно такой метод не прокатит!) просто создай элемент <i> и укажи ему соответствующий класс:

<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> Хакер</a>

Стиль icon-white указывает на то, что иконку надо брать из «белого» пакета графики (нужно для кнопок «темных» стилей типа primary, warning, inverse и так далее).

Маленькие приятности

Бутстрэп поражает своей продуманностью. Почти на каждую мелочь, которая может понадобиться в повседневной верстке, у разработчиков найдется великолепное решение. Среди таких мелочей (естественно, не все):

• Алерты. Просто задай div’у класс alert с alert-error или alert-success, etc. и получишь симпатичный и стильный информационный бокс, отлично подходящий для всяческих уведомлений. Не забудь добавить ему close button со страницы JS-плагинов.

• Аббревиатуры. Простой и понятный способ показа пояснений или уточнений.

  <abbr title="IT-мурзилка">Хакер</abbr>

• Адреса. Здесь без комментариев — works like a charm. О формате можешь справиться на bit.ly/SqSMPI.

  <address>
    <strong>Хакер</strong><br>
    Ленинская слобода, 19<br>
    Москва, Россия<br>
    <abbr title="Телефон">Т:</abbr> (495) 123-4567
  </address>

• Цитаты. Простые и стильные.

  <blockquote>
    <p>Отличный журнал!</p>
  </blockquote>

• Информационные лейблы:

  <span class="label label-success">Готово</span>

• Симпатичные значки:

  <span class="badge badge-info">Новый</span>

• Всплывающие подсказки. Думаю, нет нужды объяснять, для чего они могут понадобиться. Разметка, как обычно, чрезвычайно проста:

  <a href="#" id="tooltip1" rel="tooltip" data-placement="top" data-original-title="Создатель ProcMon">Марк Руссинович</a>

  Для активации тултипа через jQuery используй функцию:

  $('#tooltip1').tooltip(options)

  В качестве options может задаваться набор параметров отсюда: bit.ly/zJbTZW

• Модальные окна. Герой нашей статьи позволяет с удивительной легкостью реализовывать и сложные диалоговые окна несколькими строками кода. Нужно только не забыть подключить плагин bootstrap-modal.js — если, конечно, он уже не включен в твой bootstrap.min.js (что, впрочем, относится и ко всем остальным JS-плагинам). С целью экономии места в журнале не буду приводить полный код, скажу только, что существуют два способа работы с модальными окнами — c помощью атрибутов и через JS. За подробной информацией отправляйся сюда: bit.ly/AwrAdk.

Опять-таки, я перечислил далеко не все плагины и приятные мелочи фреймворка, а специально пробежался только по некоторым фичам Bootstrap для того, чтобы представить тебе хотя бы часть из того гигантского инструментария верстальщика, который дает нам Twitter Bootstrap.

5 примеров использования Twitter Bootstrap

Подключаем Bootstrap к своему проекту

<html>
<head>
  <link rel="stylesheet" href="/assets/css/bootstrap.css">
</head>

Разноцветные ProgressBar

<!-- Не анимированный полосатый progress bar -->
<div class="progress progress-info progress-striped" style="margin-bottom: 30px;">
  <div class="bar" style="width: 30%"></div>
</div>
<!-- Активный (анимированный) полосатый progress bar -->
<div class="progress progress-danger progress-striped active">
  <div class="bar" style="width: 50%"></div>
</div>

Хлебные крошки

<ul class="breadcrumb">
  <li><a href="#">Главная</a> <span class="divider">&gt;</span></li>
  <li><a href="#">О проекте</a> <span class="divider">&gt;</span></li>
  <li class="active">Тест</li>
</ul>

Основное меню сайта в стиле Twitter

<ul class="nav">
  <li class="active"><a class="brand" href="#">VR-ONLINE</a></li>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Статьи</a></li>
  <li><a href="#">Блоги</a></li>
</ul>
<ul class="nav">
  <li class="dropdown open">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Старые версии сайтов <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">2001-2002</a></li>
      <li><a href="#">2003-2004</a></li>
    </ul>
  </li>
</ul>
<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Поиск">
</form>

Информационные сообщения

<div class="alert alert-error">
  <a class="close" data-dismiss="alert">×</a>
  <strong>Ошибка!</strong> Заготовка для сообщений об ошибках
</div>
<div class="alert alert-success">
  <a class="close" data-dismiss="alert">×</a>
  <strong>Операция выполнена!</strong> Заготовка для сообщений об успешно выполненных операциях
</div>
<div class="alert alert-info">
  <a class="close" data-dismiss="alert">×</a>
  <strong>Информация!</strong> Информационное сообщение
</div>

Форки и твики Twitter Bootstrap

Успех проекта вдохновил многих разработчиков на создание форков — альтернативных реализаций продукта. Всем понравилась идея использовать фреймворк для быстрого создания интерфейсов в определенном стиле. Таких форков много, и каждый из них доказывает, что Twitter Bootstrap способен не только на оформление в стиле Twitter, но и на многое другое.

Например, если новый интерфейс сервисов Google вызывает у тебя приятные эмоции, то обязательно попробуй форк Plusstrap (xbreaker.github.com/plusstrap). Это тот же Bootstrap с одним лишь отличием — внешний вид всех элементов сделан в стиле обновленного дизайна приложений «корпорации добра».

Аналогичная ситуация с любителями стиля интерфейса Metro, принятого на вооружение в новоиспеченной Windows 8. Им обязательно стоит попробовать форк Bootmetro (aozora.github.com/bootmetro). Ну а фанатов социальной сети Facebook явно тронет FBootstrap (ckrack.github.com/fbootstrapp).

Казалось бы, куда уже проще? Хорошая документация, понятный код позволяют успешно применять этот фреймворк вебмастерам с разным уровнем знаний, но, оказывается, упрощению нет предела. «А что тут еще упрощать? Вроде все и так прозрачно!» Я тоже так считаю, однако яростные фанаты другого мнения. Ведь только так можно объяснить появление различных вспомогательных сервисов, делающих работу с Twitter Bootstrap еще проще.

Вот взять хотя бы проект BootSwatchr (bootswatchr.com). Его услуги пригодятся, если ты вдруг решишь внести изменения в стандартный дистрибутив Twitter Bootstrap. Говоря другими словами — «стилизовать фреймворк под себя».

Я понимаю, что ты парень не промах и готов все сделать ручками в CSS-файлах, но в BootSwatchr те же самые операции делаются на порядок быстрей. А все потому, что сервис предоставляет удобный интерфейс для внесения изменений. Например, если ты захотел иначе оформить типовые кнопки, то просто выбираешь раздел Buttons и сразу приступаешь к правке нужных свойств (например, изменению цвета фона). Процесс напоминает использование объектного инспектора в различных средах разработки. Такой подход действует для изменения всех элементов интерфейса. В общем, запутаться и потеряться однозначно не получится.

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

При создании своего оформления вся работа по выбору цветов ложится на твои плечи. На первый взгляд может показаться, что сложного здесь ничего нет, но это только на первый. Подбирать цвета нужно с умом, и если здесь нет опыта, то первый блин обязательно выйдет комом. Чтобы как-то упростить эту задачу, и был создан сервис Lavish (www.lavishbootstrap.com).

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

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

В них тебе лишь требуется кидать на формочки нужные элементы управления (примерно так же, как это делается в Visual Studio или Delphi) и устанавливать необходимые свойства. После завершения проектирования весь созданный проект помещается в архив, который впоследствии сохраняется на компьютер для дальнейшей разработки. Одним из таких сервисов является Jetstrap (jetstrap.com). Пока авторы проекта не взимают плату, поэтому пользоваться этим сервисом можно в любых объемах, не отдавая ни копейки.

Выбор за тобой

Есть такая старая шутка о том, что люди после смерти попадают в чистилище, а верстальщики — в версталище. Так вот, используя Bootstrap, ты сможешь избежать подобной радости благодаря чистому, прозрачному и валидному коду. :) Конечно, невозможно вместить даже беглый обзор всех основых фишек Bootstrap в шестистраничный формат, да и нашей целью было не это. Главное — это дать первичное понимания о настоящих возможностях этого мощнейшего фреймворка и заострить твое внимание на ключевых направлениях, в сторону которых нужно копать. Всегда помни, что Bootstrap — это не просто набор стилей, а настоящий функциональный фреймворк для UI, который в некоторых случаях полноправно определяет бизнес-логику самого приложения. И если что-то тебе кажется нелогичным и нереализуемым, просто загляни в документацию — уверяю тебя, ты найдешь решение своей проблемы.

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

Сканы статьи