Bootstrap — CSS Framework от Twitter.
Обзор Twitter Bootstrap
Вольный перевод официальной документации расположенной по адресу: http://twitter.github.com/bootstrap/
[ADS]
Bootstrap — это прекрасно укомплектованных инструментов, с помощью которых можно офигенно быстро создавать сайты. Альтернативы танцуют в сторонке (BluePrint, 960 и т.п.). Танцуют они по причине того что Bootstrap связали с LESS. Ну а те кто вообще не понимает о чем речь, то скажу что это очень симпатичный и порядочный себе CSS Framework. Кто знает русскую поделку CSS-Framework.ru, тот может смело уяснить, что это всего навсего 5% от Bootstrap.
Bootstrap сключает в себя заранее созданные стили, и скрипты для Web типографики, форм, кнопок, таблиц, и многого другого.
Новичкам о CSS Framework.
CSS Framework — издревле зародился в виде ресетов для IE. т.е. некоторые настройки стилей Internet Explorer сбрасывались с НОРМАЛЬНЫЕ. Например убиралась рамка у картинок. Затем стали конечно же дефолтить для красоты. Это заголовки, ширинки для столбцов, полоски и отступы. До той степени дефолтили что подключив стиль любая говностраница становилась человеком белым. Затем бородатые обезьяны перебросились на формы. Инпуты разные, красивые элементы, стали подключать графику легонько, но слава богу выродился CSS3 и графика стала принципиально выбрасываться. Затем кто-то из толпы крикнул: Долой гриды! И придумали span16. Другие захотели span24. Стали уходить от резины и наконец с приходом HTML5 одним взмахом руки, стало можно лепить сайт небывалой четкости буквально взмахом пятки над клавиатурой. Самая свежая историческая тенденция выражается именно в Bootstrap, CSS3 стал сильно менять в ногах пытливых умов и придумали LESS. Конец эры.
Создаем сайт с нуля
[ADS]
Используйте шаблон для создания сайта, и не мучайте своих родителей, кстати об этом я писал еще тут: Мой HTML5 базовый шаблон для любого проекта
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8?>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<title></title>
<style>
</style>
</head>
<body>
<script>
$(document).ready(function(){
});
</script>
</body>
</html>
Подключаем Bootstrap
[ADS]
Подключить его крайне легко:
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
Для больших задач необходимо подключать куда больше ШТУК, но не будем торопиться.
Примеры шаблонов
[ADS]
Взглянув на домашние заготовки можно сказать что все они схожи дизайном, и все они достаточно красивы, однако начав свой сайт, вы не получите прямо таких же скруглений, все же это заготовка с уже разукрашенным исходником. Посмотрите внутрь и увидите набор стилей, которые красят вид. Однако украшений как видите очень мало. Настолько мало что все можно написать за 5 минут из головы.
Нулевой старт
[ADS]
Весь HTML код нужно поместить в .container,
<div class="container">
...
</div>
Основа основ — Сетки
[ADS]
Итак, поехали, самая основа современных CSS Фреймворков — это сетки. В Twitter Bootstrap — ширина сетки равна 16 колонкам. т.е. Условно экран шириной в 940px разбит на 16 одинаковых колонок. Теперь Представьте что на HTML странице есть строки, Строка — шапка, строка — контент, и строка футер. Это условно. В каждой такой строке есть уникальный набор колонок. В шапке одна колонка, в Сонтентной части есть контент который будет занимать 10 из 16 колонок, и сайдбар который занимает 6 из 16. Футер тоже одна колонка , т.е. 16 из 16. Тогда разметка нашего HTML документа будет:
<div class="row">
<div class="span16"></div>
</div>
<div class="row">
<div class="span10"></div>
<div class="span6"></div>
</div>
<div class="row">
<div class="span16"></div>
</div>
Можно оставлять пустые колонки, где вообще не будет контента, запишется это так:
<div class="span4 offset4">Ширина в 4 колонки со смещением в 4 колонки</div>
Так же можно создавать строки внутри строк.
<div class="row">
<div class="span10">
<div class="row">
<div class="span5">
<div class="span5">
</div>
</div>
<div class="span6"></div>
</div>
Вот как красиво и здорово придумано. Ну и конечно же нельзя сказать что 940 пикселей это железные рамки.
Что можно кастомизировать
- Количество колонок
- Ширина одной колонки
- Расстояние между колонками
Пример на LESS (о чем мы еще поговорим)
@gridColumns: 24; /* 24 колонки */
@gridColumnWidth: 20px; /* Ширина колонки */
@gridGutterWidth: 20px; /* расстояние между */
Макеты
[ADS]
В Twitter Bootstrap базовым макетом является такой: Центрованный блок шириной 940 пикселей <div.container>. Есть в копилке резиновый, пригодный для документов или приложений.
Фиксирвоанный макет создаем вот так:
<body>
<div class="container">
...
</div>
</body>
Резиновый пример:
<body>
<div class="container-fluid">
<div class="sidebar">
...
</div>
<div class="content">
...
</div>
</div>
</body>
Типография
[ADS]
Bootstrap предлагает симпатичные ресеты для шрифтов. Заголовки, параграфы, списки и т.п.
Сброшены не только размеры шрифтов и сами шрифты, но различные отступы, что делает вид страницы просто прекрасной.
Итак что изменено ?
- Заголовки h1-h6 (особенно мне нравится H6)
- Подзаголовок <h1>132<small>Подзаголовок</small></h1>
- <strong> <em> <address> <abbr>
- <blockquote> <p> <small>
- различные списки ul ol dl
- <code> <pre>
Пометки
[ADS]
В Twitter Bootstrap встроены стили для меток. Это замечательная вещь пригодиться вам для выделения отдельных фраз в предложении.
default — по умолчанию
new — новое
warning — предупреждение
important — важно
notice — заметить
Все заметки яркие и красивые, глаз радуется душа поет. Очень полезный и простой стиль.
Офоормление так же простое:
<span class="label">Default</span>
<span class="label success">New</span>
<span class="label warning">Warning</span>
<span class="label important">Important</span>
<span class="label notice">Notice</span>
Медиа — отображение медийных элементов. Картинки и Видео
Тумбы в элементе .media-grid могут быть любого размера, однако они масштабируются в таблицах Bootstrap, вам просто это надо попробовать. Картинки размеров типа 90, 210 и 330 подходят для классов .span2 .span4 и .span6 соответственно.
Посмотрим на пример:
<ul class="media-grid">
<li>
<a href="#">
<img class="thumbnail" src="http://placehold.it/330x230" alt="">
</a>
</li>
<li>
<a href="#">
<img class="thumbnail" src="http://placehold.it/330x230" alt="">
</a>
</li>
</ul>
Изображения автоматически подгоняются под ширину колонки отображаясь тумбой, вам не нужно думать о том впишется оно или нет, все произойдет само. 😉
Таблицы
Как и все в Bootstrap Twitter CSS framework сделано блестяще, так и таблицы выполнены в отличной манере. По умолчанию таблица вылядит более чем просто и прерасно. Причем не нужно приписывать никаких дополнительных классов. Все выглядит просто отлично:
Ну а если мы воспользуемся возможностями Bootstrap классов то можем дополнительно напрмер сделать более плотные таблицы: .condensed-table
Класс для таблиц полностью с границами: .bordered-table
Вот пример:
<table class="bordered-table">
...
</table>
Еще один класс .zebra-striped , он предназначен для таблички разлинованной зеброй, это просто потрясно, руками такое делать — можно застрелиться, тем более неопытному. Кроме того когда курсор находится над строчкой таблицы, та подсвечивается еще более другим оттенком цвета серого.
Ну и некоторое расширение с использованием JavaScript библиотеки jquery.tablesorter.min.js в сочетании с зеброй помогут легко реализовать разные сортировки (сортировки по любым столбцам) в HTML таблице.
Вот пример кода таблицы:
<script src="js/jquery/jquery.tablesorter.min.js"></script>
<script >
$(function() {
$("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
});
</script>
<table class="zebra-striped">
...
</table>
Да надо вызвать одну команду инициализации, но это нетрудно.
Формы
Формы являются одними из наиважнейших элементов интерактивных HTML страниц. Даже Русский CSS-Framework определял стили для форм. В Bootstrap формы отлично сброшены, вот классы которые поддерживает Bootstrap Twitter:
тэг legend — подпись для формы или элементов форм
.xlarge — широкий, большой input для ввода
Кстати надо заметить как делать подписи для инпутов чтобы все инпуты были роно и красиво расставлены:
<label for="xlInput">X-Large input</label>
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text">
Заметьте где использован #xlInput
- .medium — небольшие по размерам инпуты
- .uneditable-input — недоступное поле ввода
- .disabled — отключенное поле ввода
Естественно можно применять сразу несколько классов вот так:
class=»xlarge disabled» — значит боьлшое поле и отключенное
.xxlarge — гиганское поле ввода
.error — поле ввода с ошибкой
.success — правильное поле ввода, т.е. с правильными введенными данными наверное, просто зелененькое
.warning — ораньжевое предупреждение для поля ввода (кстати для сообщений разных есть отдельная песня, так что не стоит воспринимать эти классы как готовые классы для результатов ввода, они просто для пометки правильных и неправильных полей)
.help-block — Подпись ниже поля ввода
.input-prepend — текст находящийся перед текстом ввода, довольно странная штука, непонятно зачем
.mini — миниатюрный инпут
.input-append дополнительный текст или чекбокс после текста, пример:
<div class="input-append">
<input class="mini" id="appendedInput" name="appendedInput" size="16" type="text">
<label class="add-on active"><input type="checkbox" name="" id="" value="" checked="checked"></label>
</div>
.input-file — класс для выбора файла
.inputs-list спиочек инпутов (чекбоксов например)
.inline-inputs много инпутов в одной строке
Специально для Textarea классов нет, используются все те из перечисленных, конечно мечтать не вредно и можно было бы например сделать классы для разного рода редактирования текстов, с использованием например bbcode или html, но что-то мне подсказывает что это перебор, и правильно что не засунули такое.
.btn — кнопка
.primary — первичный элемент, например кнопка (выделяется чисто по Twitter стилю — синенькая красивая). Вообще надо сказать что все эти CSS ухищрения сделаны по подобию того что используется в Twitter, иначе бы смысл делать Twitter такой фреймворк.. 😉
.form-stacked — класс определяющий label тэги не слева от инпутов, а сверху, а по мне дак это более логично. Хотя как пишут авторы данный класс полезен для коротких небольших форм.
Как я упомянул есть .mini и .small классы, которые можно применять к формам, что будет определять их ширину, дак вот авторы рекомендуют использовать все же не их, а специальные классы .span
.span2-.span12 они определяют ширину более универсально и более правильно с точки зрения Twitter.
Ну и последнее в формах — кнопочки.
Кнопочки по умолчанию в BootStrap — серые, но можно применить один из нижеперечисленных классов чтобы раскрасить их в разные красивые цвета, носящие разные мотивирющие цели. О некоторых классах я уже упомянал.
.primary — голубой, главная кнопочка говорящая что ее надо бы нажать
.info — светлоголубой я бы сказал цвета морской волны, информационный
.success — Удачно завершенное нажатие на кнопку, показывает результат как бы на себе наверное, зеленая
.danger — Красная, а это поди та самая кнопка для запуска ядерной ракеты. А говорили что ее Горбачев в чемоданчике носил
.large — большая кнопка с большими буквами
.small — маленький текст в кнопках
ну вот пример:
<a href="#" class="btn small primary">Primary action</a>
Как видно вовсе не обязательно чтобы классы давались именно инпутам.
.disabled — класс для отключенных ссылок
:disabled — класс для отключенных инпутов, чувствуете разницу, нет ?
Навигация
Навигация, это менюшки, разные линки, вообщем внутренняя перелинковка. Bootstrap предлагает некоторые возможности для создания красивых элементов типа меню, страниц и тулбара.
Начнем с самого интересного — Тулбар.
Тулбар располагается вверху сайта и обозначает основную навигацию по вашему сайту. Тублар включает в себя Название блога, менюшку и форму поиска. Менюшки могут быть сложные.
А вот код для этого тулбара:
<div class="topbar-inner">
<div class="container">
<h3><a href="#">Project Name</a></h3>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
<form class="pull-left" action="">
<input type="text" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
</div>
</div>
Как видно из кода все довольно просто и приятно. Теперь сложные телбары могут делаться с полпинка.
Табы и Вкладки — по сути являются одним и тем же, отличаются только дизайном, поэтому для них придумали все же разные названия .tabs и .pills
Вот простой таб:
<ul class="tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Contact</a></li>
</ul>
Код черезвычайно прост, зато результат хорош. Как говориться, лучше быть здоровым и богатым, чем больным и бедным.
Еще один типа навигации — БредКрамп (это текущее положение в дереве сайта. Например мы в папке
Home / Middle page / Another one / You are here
Код получается простым как 3 копейки:
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">Middle page</a> <span class="divider">/</span></li>
<li><a href="#">Another one</a> <span class="divider">/</span></li>
<li class="active">You are here</li>
</ul>
Ну и последний класс .pagination , предназначен для постраничной навигации, т.е. для циферок, типа:
< Previous 1 2 3 4 5 Next >
<div class="pagination">
<ul>
<li class="prev disabled"><a href="#">← Previous</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="next"><a href="#">Next →</a></li>
</ul>
</div>
Как видно навигация тоже крайне интересная штуковина, мы сократили время для стилизации навигации.
Ошибки и Предупреждения
Классы для однострочных сообщений:
- .alert-message .warning
- .alert-message .error
- .alert-message .success
- .alert-message .info
Как я указывал выше они отличаются только цветами. Bootstrap предлагает кроме самих сообщений еще реализвать возможность закрытия этих сообщения при помощи своего скрипта
Вот пример сообщения
<div class="alert-message warning">
<a class="close" href="#">x</a>
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
</div>
Вот этот скрипт надо подключить:
http://twitter.github.com/bootstrap/1.4.0/bootstrap-alerts.js
Более детально о подключении написано тут
.block-message
Есть еще один класс блокировочных сообщений, их удобно применять к параграфам, в сообщении удобно спрашивать, уверен ли человек что хочет совершить что-то необдуманное или нет и рассказать о последствиях. Например запустить ядерный реактор.
Пример кода:
<div class="alert-message block-message warning">
<a class="close" href="#">?</a>
<p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<div class="alert-actions">
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
</div>
</div>
Всплывающие подсказки
Да ! Bootstrap умеет показывать всплывающие подсказки, причем нескольких типов.
Страшные модальные окна, тултипы и попапы.
Я с детства не люблю модальные окна, но видимо кому-то это бывает нужно. Впрочем так же возможность создания окон — это начало GUI любой операционной системы. Я не имею ввиду что Bootstrap хочет стать Операционной системой, я хочу довести что создавать окна можно и тут, в HTML и очень просто.
Правда без JavaScript тут не обойтись и Twitter предлагает нам скачать это
Пример кода модального окна:
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
<div class="modal-header">
<a href="#" class="close">?</a>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn primary">Primary</a>
<a href="#" class="btn secondary">Secondary</a>
</div>
</div>
Но этого конечно маловато, надо инициализировать окно, для этого лучше поглядеть сюда:
http://twitter.github.com/bootstrap/javascript.html#modal
Тултипсы намного полезнее и прятнее на ощупь.
Любая потенциально непонятная надпись — претендент для тултипа.
Вот пример кода:
<a href="http://jkeks.ru" data-placement="below" rel='twipsy' title='Автор блога jkeksjkekshttp://jkeks.ru'>jkeks</a>
Однако немного одидно что для таких вещщей не был использован CSS на всю катушку, ибо это несложно, и необходимо прибегнуть к использованию JS скрипта: http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js
И Инициализировать наш тултип:
$("a[rel=twipsy]").twipsy({
live: true
})
Попап отличается незначительно, вот пример кода:
<input type="checkbox" name="rule" id="rule" value="" />
С
<a href="#" rel="popover" data-content="<li>Данные
о сканировани вашего сайта являются общедоступными.
</li><li>Данные о зарегистрированных сайтах являются
общедоступными.</li><li>Мы не несем ответственности
за накопленную информацию о вашем сайте.</li><li>Мы
можем использовать результаты сканирования и факт
наличия вашего сайта в нашей системе в любых целях.
</li><li>Если вы не хотите чтобы любая информация
о вашем ресурсе, полученная нами, была раскрыта - не
добавляйте сайт в нашу систему.</li>"
data-original-title="Правила">правилами</a>
Недостаток конечно тут тот что текст попапа лежит в атрибуте. Это конечно позор на их головы.
Инициализация попапа:
$("a[rel=popover]")
.popover({offset: 10, html: true})
.click(function(e) {e.preventDefault()})
Вообщем работа попапов меня не очень порадовала, но она есть и реализуется все же прощще чем делать это руками и ногами.
JavaScript и bootstrap
Как вы догадались, Bootstrap умеет жить без JavaScript, но не очень у него это получается, хотя по моему мнению, это вполне реально. А Twitter пошел иным путем, они начали писать свои скрипты, которые в свою очередь основаны на jQuery а так же использован Ender.
Вот что предлагает Bootstrap из JS ?
bootstrap-modal.js Плагин модальных окон, сделан на основе какого-то другого, откуда выкинули все лишнее.
bootstrap-alerts.js Сверх простой класс для закрывания окошек алертов.
bootstrap-dropdown.js Этот плагин позволяет добавить функциональность выпадающего списка к bootstrap topbar или tab навигации.
bootstrap-scrollspy.js Какой-то скроллер умный для bootstrap topbar.
bootstrap-buttons.js Расширенные возможности для кнопок.
bootstrap-tabs.js Дополнительный Функционал для Табов и Пилов
bootstrap-twipsy.js хитрые эффекты без картинок на CSS3
bootstrap-popover.js Дополнительная функциональность для Попапов
Дак является ли JavaScript обязательным в Twitter BootStrap CSS FrameWork ?
В первую очередь Bootstrap — это CSS ресеты, JS — является лишь дополнением для добавления интерактивности. Ничего сложного в JS дополнениях нет, но все же подробные описания есть на официальной странице плагинов
Bootstrap + LESS
LESS это такой расширенный CSS. Или говоря по другому это CSS с переменными, хотя на самом деле там все несколько шире и глубже ;). Вообще LESS это такой препроцессор, который позволяет ускорить разработку. Этот самый LESS конечно достоин внимания, но описать его в виде аппендикса к этой статье — было бы глуппо, ведь эта штука может быть достойна не меньшего внимания чем сам Bootstrap, поэтому коснемся только связки самого Bootstrap и LESS.
Подключим LESS:
<link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
<script src="js/less-1.1.4.min.js"></script>
Примеры которые теперь можно использовать в CSS:
// Ссылки
@linkColor: #8b59c2;
@linkColorHover: darken(@linkColor, 10);
// Яркость
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@grayLight: lighten(@black, 70%);
@grayLighter: lighten(@black, 90%);
@white: #fff;
// Определение цветов
@blue: #08b5fb;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// другие буквы и цифры, и вообще все что душа пожелает
@basefont: 13px;
@baseline: 18px;
LESS позволяет писать C++, PHP и т.п. комменты
// Коммент
Расширенный Фонт стэк — предназначен для выбора шрифта, подходящего для данной платформы например.
Немногие об этом заморачиваются, однако если уметь пользовать шрифтовой сеткой, то можно приукрасить сайт.
Операции над переменными:
@gridColumns: 16;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
Можно написанный .less файл скомпилировать до начала использования, а можно использовать компилятор на JS уже на стороне клиента. Но на этом мне хотелось бы остановиться, ибо LESS достоин бОльшего внимания, и я тупо приглашаю вас посетить офсайт.
14 января 2012 обновление:
Некий Martin Bean выпустил генератор для CSS Bootstrap, где можно визуально кастомизировать CSS, и потом его скачать, а точнее сгенерировать. Вещь обалденная, которая позволит избавится от шаблонных сайтов. Кстати я пользуюсь Bootstrap — вещь просто с огромной силой экономит время.
21 января 2012:
Отличная Альтернатива Bootstrap YAML: http://www.yaml.de/docs/index.html — шикарная штука, только закругления для кнопок не сделали =) , о YAML на Хабре тут: http://habrahabr.ru/blogs/internet/136615/ там же есть отличный Билдер шаблона для YAML: http://builder.yaml.de/#drop1, этого сильно не хватает Бутстрапу
11 февраля 2012:
Вышел TwitterBootstrap 2.0, все по той же ссылке и там же доступен, стал умнее, красивееи функциональнее. Так же появился сайт с готовыми темами на базе Twiter Bootstrap: http://wrapbootstrap.com/.
