Верстка на Twitter Bootstrap. С чего начать?

Верстка на Twitter Bootstrap. С чего начать?

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

Bootstrap – это фреймворк от разработчиков Twitter — Марка Отто и Якоба Торнтона, изначально планировавшийся как внутренний продукт, предназначенный для поддержки единообразия внутренних инструментов. Спустя какое-то время, в августе 2011 года фреймворк был выпущен для общего пользования. Сегодня Twitter Bootstrap является одним из самых популярных html/css фреймворков.

Этот инструмент позволяет легко и быстро сверстать несложный сайт, обладая минимальными знаниями в области верстки html-страниц.

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

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

Огромный плюс к скорости – это способ построения страниц, сама структура сайта, основанная на 12-колоночной grid системе, иначе говоря — модульной сетке. Дизайн-макет должен быть расчерчен на 12 вертикальных полосок, каждая их которых традиционно занимает 60px и обладает отступом слева в  20px. Блоки на дизайн-макете, соответственно, ориентируются на эти колонки – то есть занимают расстояние от начала одной колонки до конца одной из последующих. Соответственно, один блок может занимать от одной до 12-ти колонок. По факту, в css возможны 4 варианта размера колонок, в зависимости от того, какой сайт необходимо получить – фиксированный, резиновый, или адаптивный. Файл bootstrap.css отвечает за разметку страницы под мониторы компьютера. Здесь содержатся стили для фиксированных и резиновых блоков. Файл bootstrap-responsive.css позволяет сделать верстку адаптивной, здесь также есть возможность создания резиновых и фиксированных блоков.

Для того чтобы начать работу, вам достаточно скачать файлы Bootstrap на официальном сайте http://twitter.github.com/bootstrap/index.html, создать html-страницу, импортировать туда css и javascript файлы фреймворка и подключить свой стилевой файл, который будет размещаться ниже файла bootstrap.css в списке подключений – так ваши стили будет иметь больший вес, чем стили Twitter  Bootstrap, и вы сможете в вашем файле редактировать детали, которые нужно будет изменить. Бутстрап как бы создает базис, просчитывает все варианты, после чего вы меняете, или добавляете то, что нужно. В любом случае, если вы что-то забудете – Twitter Bootstrap это поправит.

После того, как вы создали свой стилевой файл, просмотрите файл bootstrap.css, чтобы приблизительно понимать, что он может делать и какие классы нужно задействовать при верстке.

Теперь можно приступать к работе. Главное – разобраться со структурой построения блоков. Она будет приблизительно такой: 

где .container – это общий блок, .row – один ряд блоков, а .span* – сами блоки, занимающие количество колонок, соответствующее указанной после .span цифре. Так как колонок всего 12, классов .span* тоже 12. .span1 равен ширине одной колонки, т.е. 60px, .span2 равен двум колонкам, т.е.140px (60px+60px+20px(отступ слева)), .span3 = 220px (60px +60px +60px +20px +20px) и т.д. до .span12 – 940px(60*12+20*11).   

Блоки можно вкладывать друг в друга, но нельзя забывать о том, что каждый новый ряд нужно обворачивать в div .row:

Так как количество колонок равно 12-ти, сумма цифр внутри одного ряда (первого уровня) не может превышать этого числа. Например, в одном div.row могут быть span10 и span2 (10+2=12), или span6 и span4 (6+4=10, соответственно расстояние в 2 колонки (140px) останется свободным) и т.д. Если вы вкладываете в div.span8 внутренние блоки, то сумма колонок не может превышать уже не 12, а 8-ми. Например, вы не можете вложить в .span5 (равный 380px) элементы с классами .span4 (300px) и .span3 (220px), так как они просто не поместятся в родительском блоке.

Если же вам нужен резиновый блок, диву прописывается  не .row, а .row-fluid, задающий всем находящимся внутри него .span* ширину не в пикселях, а в процентах. Здесь отступ каждой колонки равен 2.127659574468085%,  .span1 равен 6.382978723404255%, соответственно, .span2 = 14.893617021276595% и т.д. В случае вложения в тот же div.span8 внутренних блоков можете смело дописывать .span* любые числа до 12-ти (и не более 12 в сумме), так как внутренние блоки будут воспринимать ширину внешнего как 100% и свою ширину формировать относительно него. Например, в div.span5 могут быть .span3 и .span4, и в сумме они займут всего половину (~55%) ширины от блока span5.

Отступы задаются с помощью добавления классов .offset1 — .offset11. Добавление этого класса диву задает ему отступ слева, равный количеству колонок, предшествующих этому диву. Т.е. если блок, который необходимо отодвинуть, отделяют от предыдущего блока или от начала контейнера 4 колонки, то этому блоку необходимо прописать class=” offset4”.

Нигде не нужно обнулять обтекание – Twitter Bootstrap это уже предусмотрел.

Фреймворк Bootstrap использует самые новые технологии верстки, самые последние разработки. Поэтому обратите внимание на то, что в head вашего документа обязательно должен быть указан доктайп html5 — <!DOCTYPE html>. Twitter Bootstrap поддерживается Internet Explorer, начиная с 7-й версии. Хотя иногда и здесь бывают промахи, но их легко исправить. Не забудьте также подключить файл html5.js, обеспечивающий поддержку html5 браузерами Internet Explorer.

Это основное, что нужно нажать перед тем, как начать верстку с Twitter Bootstrap.

Если же вы не обладаете необходимыми знаниями в области верстки, или ваших знаний недостаточно для создания полноценного сайта, обращайтесь к нам – с нашей помощью вы за короткий промежуток времени обретете качественный сайт, отвечающий всем современным требованиям верстки html-страниц.

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