Верстаем на Twitter Bootstrap

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

Twitter Bootstrap - это CSS-фреймворк, который помогает в разработке веб-приложений. Это один из самых простых на сегодняшний день фреймворков CSS, которые используются в массовом порядке. Twitter Bootstrap уже имеет готовые списки стилей CSS, встроенную поддержку JQuery, а также располагает несколькими популярными инструментами JavaScript.
Вы получаете целую кучу полезных инструментов уже готовых к применению. Все, что вам нужно сделать, это просто вставить правильный HTML-код в нужное место.В данной статье я расскажу, как вы можете начать использовать Twitter Bootstrap. Для этого я покажу вам макет демо-страницы. А также расскажу, как вы можете настроить фреймворк под собственные потребности.
Итак приступим
1.Сначала скачиваем файл bootstrap.zip с официальной страницы Twitter Bootstrap на github. В нем содержится набор файлов с расширениями css, js и img, которые понадобятся нам, чтобы начать создавать сайт на Twitter Bootstrap.
Папка «css» содержит таблицы стилей (для адаптивного и неадаптивного дизайна), а также их упрощенные версии.Вы можете использовать минимизированные версии для быстрого создания сайта, когда дизайн уже завершен, и проект готов к запуску.
Папка «js» содержит файл bootstrap.js и его минимизированную версию.Эти файлы JavaScript содержат различные JavaScript компоненты, которые мы будем использовать в разработке дизайна нашего сайта.
Последняя папка, «img» содержит два набора иконок.
Оба набора практически идентичны, и изображения в них отличаются только цветовой гаммой.
Давайте приступим к работе. Прежде чем мы начнем, откройте текстовый редактор и создайте первый файл «main.tpl». Сохраните его в папке вашего шаблона.
Чтобы активировать Bootstrap, необходимо включить все соответствующие файлы и создать HTML структуру. Но сначала мы создадим структуру, а затем посмотрим, какие файлы нам будут нужны.
Первое, что вы должны прописать это, как того требует HTML5, объявление типа документа в самом верху:

Следующее это кодировка,для нашего движка добавляем так
После этого устанавливаем обычные теги HTML:
Это основные HTML-теги. Ваша страница main.tpl должна выглядеть так, как показано на рисунке ниже.

Теперь нам нужно подключить необходимые стили, содержащиеся в файле bootstrap.css.

Когда стили подключены, мы подключаем необходимые файлы JavaScript. Во-первых, вы должны включить файл JQuery, для этого я предлагаю подключать их из JQuery CDN, как показано ниже.
Затем включаем файл Bootstrap.
Из соображений производительности вашей веб-страницы, все эти скрипты должны располагаться прямо перед закрывающимся тегом .
Теперь все необходимые файлы включены. Вы можете начать создание различных компонентов вашего сайта. Ваш файл main.tpl должен выглядеть следующим образом.


Как это работает
Во-первых, мы должны понимать, что Twitter Bootstrap во многом зависит от 12 сеток. Что это за сетки?
Предположим, вы хотите создать два равных раздела внутри тела вашей страницы main.tpl. Вы должны задать класс «span6» каждому блоку этих элементов. Это будет означать, что Bootstrap должен создать два равных раздела, по шесть сеток в каждом.
Надеюсь, что это дает вам кое-какое представление о том, работает Bootstrap. Он имеет набор предварительно назначенных классов для каждого элемента. Если это необходимо, вы должны задать соответствующие классы каждому из них.
Составление кодов на Bootstrap

Давайте разобьем демонстрационную страницу на пять основных частей:

• Заголовок;
• Маркетинговая область;
• Левый сайд-бар;
• Область контента;
• Подвал.

Чтобы заключить в оболочку весь контент нашего сайта, мы создадим класс-контейнер, который будет располагаться по центру экрана, а также будет окружен с разных сторон другими блоками.
Для этого в Bootstrap существует специальный класс, который так и называется "container". Его мы будем использовать в качестве материнской оболочки. Итак, переходим к написанию кодов:
Теперь внутри контейнера DIV, мы пропишем заголовок сайта. Для этого мы используем тег заголовка h1.
Проверьте вашу страницу main.tpl в браузере, красиво ли расположены на ней элементы. Теперь пришло время заняться панелью навигации. Twitter Bootstrap определяет разметку для панели навигации следующим образом:
«navbar» должен быть классом, заданным в основном блоке DIV панели навигации. Вы должны придерживаться приведенной выше разметки меню навигации, чтобы она соответствовала стилям Twitter Bootstrap.

Разместите этот код немного ниже тега h1. Убедитесь, что все элементы находятся внутри нашего класса родительской оболочки, т.е. "container" Откройте страницу в браузере и проверьте, красиво ли расположено меню навигации.

Очевидно, что вы захотите, чтобы ваш заголовок отличался от стандартного. В конце этого урока, мы рассмотрим, как можно добавлять собственные стили к существующим стилям Bootstrap и добавить CSS, чтобы изменить дизайн области заголовка. А теперь переходим к созданию второй части, которую мы назвали «Область маркетинга».
В Twitter Bootstrap есть красивый предварительно назначенный класс специально для области маркетинга. Он называется "hero-unit". Скопируйте приведенный ниже код и вставьте его ниже блока меню навигации.
Проверьте вашу страницу в браузере, она должна выглядеть так:

Не написав не единого фрагмента CSS, вы получили такой красивый блок области маркетинга. Хорошо, давайте рассмотрим этот код.
В “hero-unit" имеется CSS, который предназначен для тега h1. Так что, то, что вы пишите внутри тегов h1, будет выводиться жирным шрифтом и немного отделяться от других элементов блока. Затем через тег нам нужно создать параграф, в котором будет выводиться наша реклама или описание нашего продукта.

А вот и самое интересное: ссылки и кнопки. Вы можете сделать любую ссылку в виде кнопки, добавив класс “btn", а затем подогнав ее размер, добавив еще несколько дополнительных классов, таких как btn-large/btn-small/btn-mini.
Для изменения цвета кнопок добавьте классы btn-success (зеленый), btn-info(голубой), btn-warning (желтый) иbtn-danger (красный). Более подробную информацию о кнопках и стилизации ссылок вы можете найти в разделе База CSS. Эти классы могут быть применены к элементам кнопок HTML.
Twitter Bootstrap настолько прост, что позволяет даже не делать ничего внутри таблиц стилей CSS. Вы просто пользуетесь инструментами, которые предоставляет система. Это то, что делает Bootstrap одним из самых мощных CSS-фреймворков.
Теперь переходим к следующим разделам: левой боковой панели и разделу контента. Вы увидите, как я разделил область на две неравные вертикальные части, и как можно сделать еще больше таких сегментов. Как отмечалось ранее, Twitter Bootstrap представляет собой систему из 12 сеток.
Вы должны помнить об этом всегда. Это означает, что вы можете создать не более 12 вертикальных сеток внутри любого родительского элемента.
В данный момент мы работаем внутри нашего родительского класса оболочки "container". Мы разделим его на две неравные части, используя 12 сеток. Для левой боковой панели мы используем класс «span4», а для раздела контента, который расположится правее, мы будем использовать класс «span8».
Имена классов отражают суть: левый сайд-бар будет занимать до четырех сеток, а правая сторона должна распределиться по оставшимся восьми сеткам.
Ваша страница теперь должна выглядеть вот так:

На ней должно быть два отдельных столбца, расположенных бок о бок. Теперь стоит подумать над тем, чтобы создать дополнительный блок оболочки, который я добавил выше через класс «row». Причина заключается в том, по умолчанию классы span* выравниваются по левому краю.
Чтобы разместить оба столбца ниже всего содержимого мы добавили блок «row». Он действует как обычный разделитель в таблицах. Теперь вы должны удалить элементы заглушек абзацев из вашего кода.
После чего заполним левую боковую панель списком пунктов навигации.
Список навигации должен иметь следующую разметку:
В дополнение к классу «nav», вы должны добавить класс «nav-list», с помощью которого пункты меню навигации будут выводиться списком. Если добавить класс «nav-header» к любому элементу «li» класса «nav», он будет выглядеть, как заголовок раздела ссылок. Двигаемся дальше, посмотрим, как теперь наша страница выглядит в браузере.

Переходим к области контента, мы будем просто заполнять ее, используя общие теги h3, и теги абзацев. Установка дополнительных классов здесь не потребуется. Ведь мы хотим, чтобы абзацы текста выводились один под другим. Ниже приведен код, который я разместил внутри «span8».
Обновите страницу в браузере, после чего она должна выглядеть вот так:

Как видите, мы уже очень близки к конечной точке. Нам осталось только завершить подвал страницы.

Для футера мы снова разделим «row» на три части. Как это показано в демо-версии. На этот раз мы делим область на три равные части, то есть используем «span4».
Так мы создадим еще один блок «row», прямо под «row», который мы создавали ранее для сайдбара и области контента.
Запишите себе следующий код:
Достаточно просто! Мы разделили строку на три равные части с помощью класса «span4», а затем заполнили каждый из сегментов, используя теги h4, теги абзацев и ссылки, которые выглядят как кнопки. Проверьте, что у нас получилось, в браузере.
У вас должны быть маленькие изображения клиентов и сотрудников внутри кнопок. Воспользуйтесь тегом , чтобы добавить соответствующие классы изображений, такие как icon-user, icon-star, icon-glass и т.д.
Чтобы иконки стали белыми, используйте класс icon-white с классами icon-user и icon-star. Полный список классов иконок вы можете найти в документации Bootstrap, которая находится здесь.
Чтобы немного отделить подвал страницы от области контента, мы добавим тег между блоками «row». После того, как мы добавили тег , посмотрим, что у нас получилось.
Далее, чтобы создать область копирайта, мы добавляем следующий код:
Вот, теперь мы полностью создали простую, но вполне презентабельную целевую страницу. И при этом мы пользовались исключительно инструментами фреймворка Twitter Bootstrap.
Добавляем собственные стили в Twitter Bootstrap
Если у вас есть некоторые знания о CSS и вы хотите изменить стили Twitter Bootstrap, используемые по умолчанию, то лучше всего создать свою собственную таблицу стилей, импортировать стили Bootstrap, а затем переписать их в своем собственном файле CSS. Убедитесь, чтобы ссылка обращалась к вашим стилям, а не к файлам CSS Bootstrap.
Если же стилей Twitter Bootstrap по умолчанию вам вполне достаточно, то, очевидно, необходимости создавать таблицу стилей нет. Но, так как многие веб-сайты используют ту же основу, то эти стили станут общими, и их можно будет увидеть на многих других сайтах, созданных на Bootstrap. Поэтому лучше будет, если вы добавите собственные стили поверх CSS Twitter Bootstrap.
Еще несколько важных компонентов Twitter Bootstrap
Выделенные пункты
Чтобы выделить некоторые фрагменты в теле длинного документа, можно добавить к ним класс «lead». Это сделает шрифты этого конкретного пункта немного больше, чем в остальной части документа.
Теги выделения
Вы также можете использовать на вашей странице базовые теги выделения HTML: такие как , . Также можно использовать теги .
Выравнивание текста
Выравнивание текста внутри любого абзаца или блока div можно задать с помощью классов: «text-left», «text-center» и «text-right».
Цвет текста
Вы можете установить для текста абзацев цвета по умолчанию, для этого используются различные классы выделения цветом, такие как «muted» - серый, «text-warning» - красный, «text-error» - темно-бордовый, «text-info» - светло-голубой и «text-success» - зеленый цвет.
Стили таблиц
Twitter Bootstrap также по умолчанию поддерживает разметку таблиц. Для этого используется следующий код:
Работа с изображениями
Вы можете добавлять изображения, используя обычный тег . Чтобы ваши проекты выглядели интереснее, вы можете добавить классы «img-rounded» для картинок с заокругленными углами, «img-circle» для прокрутки изображений и «img-polaroid», чтобы создать тень и рамку по периметру изображения.
Выпадающие меню
Чтобы добавить выпадающее меню в существующую панель навигации (как это показано на демонстрационной странице), вам нужно добавить следующую разметку внутри элемента «li».
Чтобы создать выпадающий список вы должны запаковать родительский элемент с помощью класса «dropdown», а затем использовать для вставки разметку «а». После чего поместить пункт списка в данный элемент.
Я показал вам основные принципы использования Twitter Bootstrap, как начать работу с системой. Теперь, когда вы узнали, как это работает, я надеюсь, вам будет намного проще работать с описанием элементов фреймворка из оригинальной документации и изучив его, вы обязательно найдете для себя множество новых возможностей для применения.
Ну а теперь о «адаптивной» верстке
Первая вещь, о которой мы задумываемся, когда используем слово «адаптивный» в отношении веб-сайтов это то, что данный сайт должен быть совместим со всеми видами и форматами устройств.

В отрасли существует обязательное требование: каждый сайт должен делаться адаптивным, что способствует наилучшей читабельности его содержания в различных условиях.
При помощи средств CSS3, а конкретно - применению HTML5, данная тенденция с каждым днем растет. Но что делать, если вы являетесь девелопером, а не дизайнером? Тогда у вас проблема!
Вам больше не нужно волноваться, поскольку, Twitter Bootstrap является самым настоящим подарком в области вёрстки формата CSS Frameworks. И это безусловно так, если речь идет о создании адаптивных веб-сайтов.
Для активации адаптивных свойств Twitter Bootstrap, существуют еще несколько предварительных процедур, которые вы должны выполнить, помимо тех, которые мы обсудили в нашей предыдущей статье.

Чтобы настроить отзывчивую область, вам необходимо проставить правильные мета-теги в заголовке веб-страницы:

Приведенный выше мета-тег достаточно очевиден по своему назначению. Мы задаем ширину страницы по ширине устройства и изначально масштабируем её как 1, то есть, теперь мы имеем размер по умолчанию.
Затем мы должны также применить нужный CSS-файл из набора CSS-файлов Bootstrap. В прошлый раз, мы применяли только css/bootstrap.css, но на сей раз, мы также будем использовать css/bootstrap-responsive.css.
Таким образом, мы добавляем на нашу веб-страницу дополнительную таблицу адаптивных стилей.
Теперь, у нас все готово для того, чтобы начать создавать наш первый адаптивный веб-сайт при помощи Twitter Bootstrap. Прежде чем приступать, взгляните на нашу демо-страницу.
Убедитесь, что вы, изменяя размер окна браузера, можете видеть, как демо-страница реагирует на различные размеры.
Давайте начнем
Я разделил вышеупомянутые отзывчивые веб-страницы на несколько категорий, и мы рассмотрим, как создавать каждую из них более подробно:

1. Отзывчивая навигация;
2. Область маркетинга;
3. Раздел контента;
4. Правые боковые панели;
5. Нижняя часть страницы (нижний колонтитул).

Вышеуказанные разделы выглядят так же, как и те, что мы использовали ранее при построении обычного (неотзывчивого) веб-сайта. На самом деле, для того чтобы произвести существенные изменения в разметке, чтобы сделать сайт отзывчивым, обычно нужна лишь минута.
Эти тонкости Вам нужно понять и применять очень аккуратно.
Адаптивная навигация
Теперь нам предстоит построить навигационную панель веб-сайта. В нее будут включены заголовок веб-сайта и некоторые, выровненные по правому краю меню, элементы ссылок.
Эту панель мы должны закрепить в верхней части сайта, как вы уже могли видеть на демо-странице. Итак, вот разметка для этого элемента:
С классом navbar мы уже знакомы – он предназначен для отображения раздела навигации. Дополнительное значение navbar-fixed-top делает ее прилегающей к верхней части страницы.
Давайте двигаться дальше и вставим еще несколько элементов кода в навигационную панель:
Строка с кодом navbar-inner нужна для Bootstrap, это даёт понять, что вы собираетесь поместить некоторые материалы внутрь панели навигации.
container, как мы видим, используется в качестве оболочки, чтобы хранить все элементы внутри него.
Все, что мы добавили до сих пор, является базовой конструкцией нашей навигационной панели. Давайте посмотрим на действительно волшебные инструменты, которые делают навигацию адаптивной.
Названия пунктов меню тут говорят сами за себя. Должно быть понятно, что добавляя класс brand, мы обеспечиваем заглавию чистый вид, это применяется для названия сайта.

nav элементы заключены в дополнительных разделах с классом nav-collapse collapse, которые используются для того, чтобы меню отображалось стопкой, если сайт открывается на устройстве с узким экраном.
Чуть выше, над брендингом, вы можете видеть дополнительную ссылку к классам btn btn-navbar, которая надстроена над интервалом icon-th-list. Эта ссылка отображается только на небольших экранах со списком иконок.
Обратите внимание, также мы использовали элемент data-toggle=collapse, его Bootstrap использует для того, чтобы скрыть/отобразить пункты меню в небольших окнах.
data-target используется для определения того, какие меню должны быть скрыты/отображены.


Область маркетинга
Маркетинговая область строится точно так же, как и при создании обычных (неадаптивных) веб-страниц. Мы создадим раздел (div) с классом hero-unit.
Затем, поместим обёртку container внутри него, а после добавим h1, p и ссылку с классом btn btn-primary. Код должен выглядеть так, как показано ниже:
Добавление класса lead к элементам параграфа выделит их, по сравнению с другими элементами p. Также убедитесь в том, что hero-unit div находится полностью снаружи навигационного раздела.
Раздел контента
Ранее мы изучили принцип, в соответствии с которым классифицируются элементы ROW в неотзывчивых веб-страницах. Здесь же, мы будем использовать похожую, но немного изменённую версию элементов row. На этот раз мы будем использовать элемент row-fluid внутри класса row.
Это позволит ряду элементов в точности соответствовать веб-странице и, перетекать вниз, если или когда это будет необходимо.
Поэтому начальная разметка будет выглядеть так:
Теперь, поскольку у нас уже готова структура, давайте двигаться дальше, наполним её каким-нибудь контентом. Перед этим, мы должны разделить всю площадь на две части: одна для контента и другая для правой боковой панели.
Чтобы этого добиться, мы будем использовать классы вроде span* - это поможет нам разделить область.
Для разделения областей контента и правой боковой панели мы будем использовать span8 и span4. Как отмечалось в предыдущей статье, Twitter Bootstrap это система, состоящая из 12 колонок.
Суммарное значение класса span в итоге должно быть равно 12.
То есть, вы можете сделать столько разделов, сколько пожелаете, но общая их сумма должна составлять 12. Например: span4, span4 и span4 (три колонки) или span3, span7 и span2 (три не одинаковые колонки) и т. д.
Таким образом, окончательная структура нашей области контента должна будет выглядеть так:
Здесь, span8 будет нашим разделом контента, а span4 будет нашей правой боковой панелью. Теперь, в span8 мы попробуем добавить некоторые случайные тексты, используя теги p.
После всех тегов p, мы снова разделим область span8 на три одинаковых колонки, чтобы детализировать некоторые разделы нашего сайта.
Мы можем отложить много row-fluid, но необходимо помнить, что окончательная сумма разделов span* должна быть равна 12, иначе ваш сайт работать не будет.Идем дальше и поместим следующие строки непосредственно под всеми вышеперечисленными тегами p, но в пределах span8:
Иконки в кнопках, которые мы использовали здесь, взяты из подраздела glyphicons-halflings, в папке изображений. Используйте элементы с соответствующими пиктограммами со страницы Bootstrap.
Заполняем нижнюю часть страницы (нижний колонтитул)
Нашим нижним колонтитулом будет простой контейнер с тремя одинаковыми по размеру span* элементами. Как вы можете увидеть на демо-странице, горизонтальная линия, отделяющая нижний колонтитул, создана при помощи элемента

---

.
Поэтому, код для нижнего колонтитула такой:

Теги text-center, text-right и text-left являются классами выравнивания. Вы можете использовать их по мере необходимости.
Заключение
Возможно, вы еще этого не осознали, но мы как раз подошли к концу статьи. Поздравляем вас с созданием вашего первого адаптивного сайта.
Попробуйте изменить размер окна или откройте демо-страницу на экранах различных гаджетов, чтобы на практике опробовать новые способности своей веб-страницы.
Но на самом деле, нет конца тому, что вы можете сделать при помощи Bootstrap. Вы можете даже попробовать настроить его полностью под себя, чтобы он был персонализирован.
Также, например, можно добавить пользовательские таблицы стилей как «customstyle.css» или любые другие CSS-файлы.
Ипортируйте все CSS-файлы Bootstrap при помощи команды @import в «customstyle.css», после чего нужно будет ссылку на этот CSS-файл указать на вашей веб-странице.
Одно из изменений, которое я сделал в моем customstyle.css - это заменил фоновое изображение и цвет в разделе маркетинга.

Можешь почитать и вот эту статейку "Подсветка синтаксиса в статьях от google-code-prettify"