Bootstrap — CSS Framework от Twitter.

20.11.2011 - 7195 просмотров ;)

Обзор Twitter Bootstrap

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

Twitter Bootstrap. CSS Framework

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

14 января 2012 обновление:

Некий Martin Bean выпустил генератор для CSS Bootstrap, где можно визуально кастомизировать CSS, и потом его скачать, а точнее сгенерировать. Вещь обалденная, которая позволит избавится от шаблонных сайтов. Кстати я пользуюсь Bootstrap — вещь просто с огромной силой экономит время.

Генератор Twitter 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/.

Статьи из раздела, Видеочат рулетка