Дата публикации:

Bootstrap - CSS Framework от Twitter.

Обзор Twitter Bootstrap

Вольный перевод официальной документации расположенной по адресу: http://twitter.github.com/bootstrap/

Twitter Bootstrap. CSS Framework

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. Конец эры.

Создаем сайт с нуля

Используйте шаблон для создания сайта, и не мучайте своих родителей, кстати об этом я писал еще тут: Мой 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

Подключить его крайне легко:

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">

Для больших задач необходимо подключать куда больше ШТУК, но не будем торопиться.

Примеры шаблонов

Взглянув на домашние заготовки можно сказать что все они схожи дизайном, и все они достаточно красивы, однако начав свой сайт, вы не получите прямо таких же скруглений, все же это заготовка с уже разукрашенным исходником. Посмотрите внутрь и увидите набор стилей, которые красят вид. Однако украшений как видите очень мало. Настолько мало что все можно написать за 5 минут из головы.

Нулевой старт

Весь HTML код нужно поместить в .container,

<div class="container"> 
... 
</div>

Основа основ - Сетки

Итак, поехали, самая основа современных 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; /* расстояние между */

Макеты

В 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>

Типография

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

Итак что изменено ?

Заголовки h1-h6 (особенно мне нравится H6)
Подзаголовок <h1>132<small>Подзаголовок</small></h1>
<strong> <em> <address> <abbr>
<blockquote> <p> <small>
различные списки ul ol dl
<code> <pre>

Пометки

В 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="#">&larr; 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 &rarr;</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 достоин бОльшего внимания, и я тупо приглашаю вас посетить офсайт.

Telegram канал о биржах ссылок
Видеочат рулетка