7. Разработка web-приложений с применением адаптивногоcss-фреймворкаTwitterBootstrap.

   1. Общие сведения

TwitterBootstrap [1] — свободный набор инструментов для создания верстки сайтовивеб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения. Это удобный и простой css-фреймворк для создания пользовательского интерфейса[1].

TwitterBootstrap обладает встроенной поддержкой новых элементов HTML5 и его синтаксиса, прогрессивно используется CSS3 и является продуктом с открытым исходным кодом.

Данный фреймворк использует самые современные наработки в области CSS и HTML. Основными инструментами TwitterBootstrap являются[4]:

• Сетки—колонки имеют заранее заданные размеры, которые можно сразу же использовать, например ширина колонки 140px относится к классу .span2, который мы можем использовать в CSS описании документа.

• Шаблоны— фиксированный или резиновый шаблон документа.

• Типографика— описания шрифтов, определение классов для шрифтов таких как программный код, цитаты ит.п.

• Медиа — представляет управление изображениями и видео.

• Таблицы— средства оформления таблиц.

• Формы — классы для оформления не только форм, но и событий, происходящих с ними.

• Навигация — классы оформления для вкладок, переключателей страниц, меню и панели задач.

• Уведомления— оформление диалоговых окон, подсказок и всплывающих окон.

Целью использования любого css – фреймворка является повышение скорости разработки пользовательского интерфейса. Фреймворк TwitterBootstrap является подготовленной css библиотекой, которая позволяет использовать готовые элементы при верстке страниц.

2. Сравнение с аналогами

Наряду с фреймворком Twitter Bootstrap наиболее популярными фреймворками являются: Blueprint CSS Framework, 960 Grid, Skeleton.

Таблица 1. Сравнение наиболее распространенных css-фреймворков.

	TwitterBootstrap	Blueprint	960 Grid	Skeleton
Гибкость	Высокая	Высокая	Очень высокая	Низкая
Распространённость	Высокая	Средняя	Средняя	Низкая
Простота использования	Простой	Средний	Сложный	Простой
Резиновая верстка	Да	Да	Да	нет
Количество виджетов	Очень много	Много	Среднее количество	мало
Сброс стилей браузера	Normalize.css	Reset.css	Reset.css	Eric Meyer`s reset
Использование LESS	Да	Нет	нет	нет
Поддержка браузера Internet Explorer	Версия 7 и выше	Версия 8 и выше	Версия 8 и выше	Версия 7 и выше
Поддержка браузера Firefox	Да	Да	Да	Да
Поддержка браузера Safari	Да	Да	Да	Да
Поддержка браузера Opera	Да	Версия 9 и выше	Да	Да
Поддержка мобильных браузеров	Все	iOS, Android	iOS, Android	iOS, Android
Лицензия	Свободная Apache License v2.0	Свободная MIT	Свободная MIT	Свободная MIT

На основе анализа данных о наиболее популярных фреймворках можно сделать вывод:

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

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

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

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

Главным преимуществом фреймворка Twitter Bootstrap перед выделенными аналогами является то, что он построен с использованием языка стилей LESS [3]. Это открывает широкие возможности для адаптации фреймворка под требования пользователя.