CSS

Стиль основных часто используемых HTML элементов. Все элементы и их стили управляются дополняемыми классами.

Заголовки & body copy

Размеры

Все шрифты и типография основаны на двух Less-переменных в файле variables.less: @baseFontSize и @baseLineHeight. Первый это основной шрифт и его размер используемый в проекте, вотрой это основная высота строки (line-height).

Мы используем эти переменные и немного математики для создания отступов (margin), полей (padding), высоту строки (line-height) и еще много чего...

Пример body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

h1. Заголовок 1

h2. Заголовок 2

h3. Заголовок 3

h4. Заголовок 4

h5. Заголовок 5
h6. Заголовок 6

Выделение, адрес и аббревиатура

Элемент Использование Дополнительно
<strong> Используйте для выделения слов или части текста: важно Нет
<em> Используйте для выделения части текста курсивом Нет
<abbr> Используйте для аббревиатур и сокращений, объяснение сокращения отображается при наведении курсора

Вложите дополнительный атрибут title к тегу <abbr title="..."> для объяснительного текста

Добавьте класс .initialism для выделения аббревиатуры заглавными буквами.
<address> Используйте для выделения контактной информации и адресов Для корректного форматирования заканчивайте строку тегом <br>

Использование выделений текста

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Примечание: Вы можете использовать теги <b> и <i> без каких либо проблем, но в HTML5 их назначение было немного изменено. Тег <b> означает просто выделение текста без присвоения специального назначения, а тег <i> используется для выделения разговорной речи, технических терминов и т.д.

Пример адреса

Ниже два примера как тег <address> может быть использован:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Или

Full Name
first.last@gmail.com

Использование аббревиатур

Аббревиатуры с использованием атрибута title имеют полупрозрачное подчеркивание точками и курсор при наведении изменяется в знак вопроса. Это дает пользователям понимание что при наведении курсором будет отображена дополнительная информация.

Добавьте класс .initialism к тегу <abbr> для заглавных букв при использовании аббревиатуры.

HTML лучшая вещь созданная селовеком, после нарезного хлеба.

Аббревиатура слова attribute - attr.

Цитаты

Элемент Использование Дополнительно
<blockquote> Блок для цитаты из другого источника

Добавьте атрибут cite для обозначения URL-источника текста

Используйте класс .pull-left или .pull-right выравнивания текста и обтекания по левую или по правую стороны
<small> Дополнительный элемент, в основном используемый для обозначения имени автора или названия статьи В тег <cite> поместите имя автора, название статьи или источника

Для использования цитат, поместите любой HTML-текст внутрь тега <blockquote>. Для однострочных цитат мы рекомендуем использовать тег <p>.

Используйте дополнительный тег <small> для цитирования источника или автора, автоматически будет добавлено тире &mdash; впереди форматируемого текста.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
  <small>Someone famous <cite title="">Body of work</cite></small>
</blockquote>

Пример цитирования

По умолчанию цитаты выглядят так:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

Для выравнивания текста по правую сторону, добавьте класс class="pull-right" к тегу <blockquote>:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

Списки

Неупорядоченный

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Не стилизованный

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Упорядоченный

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Списки описания

<dl>

Списки описаний
Списки описаний идеально подходят для определения терминов.
Термин
Описание термина.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Горизонтальные списки описания

<dl class="dl-horizontal">

Списки описаний
Списки описаний идеально подходят для определения терминов.
Термин
Описание термина.
Donec id elit non mi porta gravida at eget metus.
Очень длинный термин обрезается в соответствии с шириной
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Внимание! В горизонтальных списках описания "Термин" будет обрезан при помощи свойства text-overflow. На малых дисплеях (телефон, планшет и т.д.) размер списка будет изменяться в соотвествии с сеткой шаблона.

Строковое выделение кода

Поместите строковый код в тег <code>.

Для примера, <code>section</code> должен быть строкой.

Форматирование кода при помощи PHP

При помощи функции htmlspecialchars() вы можете получить автоматическое преобразование угловых "< >" скобок в спецсимволы. И всех других символов HTML разметки.

<?php  
echo htmlspecialchars("<p>Выделенный текст...</p>");
?>

<!--На выходе получаем:-->
&lt;p&gt;Выделенный текст...&lt;/p&gt;

Блочное выделение кода

Используйте <pre> для выделения 2-х и более строк кода. Избегайте использования угловых скобок < и >, для корректного отображения фрагментов кода.

<p>Выделенный текст...</p>
<pre>
  &lt;p&gt;Выделенный текст...&lt;/p&gt;
</pre>

Замечание: Всегда используйте теги <pre> как можно левее в редакторе кода, так как внутри тега <pre> сохраняются все отступы и пробелы.

Вы можете дополнительно добавить класс .pre-scrollable Который задаст максимальную высоту (max-width) блока в 350px и добавит вертикальный скроллбар.

Google Prettify

Используйте тот же самый тег <pre> как и в предыдущем примере с добавлением двух класссов.

<p>Выделенный текст...</p>
<pre class="prettyprint
     linenums">
  &lt;p&gt;Выделенный текст...&lt;/p&gt;
</pre>

Скачать скрипт google-code-prettify. Документация и дополнительная информация здесь.

Структура и разметка таблицы

Тег Описание
<table> Родительский тег таблиц
<thead> Родительский тег строк заголовка таблицы (<tr>)
<tbody> Родительский тег тела и строк таблицы (<tr>)
<tr> Родительский тег (строка) для ячеек (колонок) таблицы (<td> или <th>)
<td> Ячейка таблицы
<th> Ячейка заголовка таблицы
Должен использоваться внутри тега <thead>
<caption> Описание или краткое содержание таблицы
<table>
  <thead>
    <tr>
      <th>…</th>
      <th>…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
</table>

Опции таблицы

Имя Класс Описание
По умолчанию Нет Без стилей, просто строки и колонки
Простой .table Только горизонтальные линии между строками
Границы .table-bordered Закругленные углы и внешняя граница вокруг таблицы
Полосы .table-striped Добавляет светло-серый фон к нечетным строкам (1, 3, 5, etc)
Без отступов .table-condensed Уменьшает верхний и нижний отступы, вместо 8px до 4px, применяется к td и th тегам

Примеры таблиц

1. Таблица по умолчанию

Таблицы имеют межстроковую границу. В Bootstrap 2.0, класс .table обязателен.

<table class="table">
  …
</table>
# Имя Фамилия Никнейм
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

2. Полосы

Позволяет улучшить читаемость и восприяте содержимого таблицы—просто добавьте класс .table-striped.

Замечание: Полосы в таблице используют CSS-селектор :nth-child, который не работает в IE7-IE8.

<table class="table table-striped">
  …
</table>
# Имя Фамилия Никнейм
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

3. Границы

Добавляет границы и закругляет углы таблицы.

<table class="table table-bordered">
  …
</table>
# Имя Фамилия Никнейм
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

4. Без отступов

Делает Вашу таблицу более компактной используйте класс .table-condensed для уменьшения отступов в ячейках с 8px до 4px.

<table class="table table-condensed">
  …
</table>
# Имя Фамилия Никнейм
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

5. Совместим все классы вместе!

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

<table class="table table-striped table-bordered table-condensed">
<thead>
  <tr>
    <th></th>
    <th colspan="2">ФИО</th>
    <th></th>
  </tr> 
  ...
</table>
ФИО
# Имя Фамилия Никнейм
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Легко настраиваемый HTML и CSS

Лучшее в Bootstrap формах это то что все составляющие форм, например как <input /> <select></select> <textarea></textarea> выглядят превосходно и оформлены в едином стиле, вне зависимости как они обозначены в HTML-разметке. Но мы предоставляем удобные шаблоны форм, для использования при необходимости.

Более сложные макеты форм могут быть использованы путем добавления и комбинирования расширяемых классов для максимального покрытия требуемого функционала.

Четыре стиля

Bootstrap включает в себя четыре стиля форм:

  • Вертикальный (по умолчанию)
  • Поиск
  • Строковый (линейный)
  • Горизонтальный

Различные типы форм требуют разных изменений в HTML-разметке.

Контроль состояния и еще..

Формы Bootstrap'а включают в себя стили всех основных элементов таких как input, textarea и select. Но так же мы включили дополнительные стили для для пред-идущих и пост-идущих элементов для элемента input.

Состояния полей такие как error (ошибка), warning (предупреждение) и success (успех) включены для каждого из элементов форм. Так же включены стили для отключенных (недоступных) элементов.

Четыре типа форм

Bootstrap предоставляет легкую HTML-разметку для всех четырех типов веб-форм .

Имя Класс Описание
Вертикальный (по умолчанию) .form-vertical (Не обязателен) Выровненная по левому краю
Строковый (линейный) .form-inline Выровненная по левому краю,с правилом inline-block для элементов форм
Поиск .form-search Текстовый input с закругленными углами
Горизонтальный .form-horizontal Плавающий по левую сторону родительского элемента, описание формы, элементы формы и кнопки выровнены по правому краю

Примеры форм

Форма по умолчанию

Легкая, удобная и без специальной HTML-разметки.

Пример вспомогающего текста.

<form class="well">
  <label>Название</label>
  <input type="text" class="span3" placeholder="Вспомогающий текст…">
  <span class="help-block">Пример вспомогающего текста</span>
  <label class="checkbox">
    <input type="checkbox"> Отметь мен
  </label>
  <button type="submit" class="btn">Отправить</button>
</form>

Форма поиска

Добавьте класс .form-search к форме и .search-query к элементу input.

<form class="well form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Поиск</button>
</form>

Линейная форма

Добавьте класс .form-inline для улучшения вида формы в горизонтальном положении и оптимизации отступов между элементами формы.

<form class="well form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Пароль">
  <label class="checkbox">
    <input type="checkbox"> Запомнить меня
  </label>
  <button type="submit" class="btn">Войти</button>
</form>

Горизонтальные формы

Справа все пример использования всех возможных элементов форм. Вот список:

  • Текстовое поле (text, password, email, search и т.д.)
  • Флажок (чек-бокс)
  • Радио-кнопка (radio button)
  • Выпадающий список (select)
  • Множественный выбор (multiple select)
  • Файл (file input)
  • Многострочный текст (textarea)

Любой элемент текстового поля с атрибутами HTML и HTML5 появляется в таком виде.

Разбор примера

Посмотрите код формы ниже, обратите внимание на ассоциирование элемента input с элементом control group. Классы .control-group, .control-label и .controls необходимы для корректного отображения формы.

<form class="form-horizontal">
  <fieldset>
    <legend>Название</legend>
    <div class="control-group">
      <label class="control-label" for="input01">Текстовое поле</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">Вспомогательный текст</p>
      </div>
    </div>
  </fieldset>
</form>

Контроль состояний элементов формы

Bootstrap предоставляет стили для активных элементов форм и disabled (отключенные элементы). Мы отключили стандартные стили форм в Webkit такие как outline, взамен добавив box-shadow для селектора :focus.


Состояния элементов формы

Так же добавлены состояния для errors (ошибок), warnings (предупреждений) и success (успешных). Например для отображения ошибки в заполнении поля добавьте класс .error к родительскому элементу носящему класс .control-group.

<fieldset
  class="control-group error">
  …
</fieldset>
Какой-либо текст
Что-то здесь не так
Пожалуйста исправьте ошибку в этом поле
Здесь все правильно!
Правильно!

Дополнения к формам

Пред-идущие и Пост-идущие элементы

Добавление информации при помощи Пред-идущих или Пост-идущих элементов—позволяет пользователям более легкое и приятно ориентирование на Вашем сайте. Например добавление по умолчанию символа @ для Twitter-аккаунтов или знака $ для денежных исчислений.


Флажки и радио-кнопки

Просто поместите <input type="checkbox"> внутрь элемента <label class="checkbox">.

Так же поддерживаются линейные (строковые) Флажки и Радио-кнопки. Добавьте класс .inline к любому .checkbox или .radio.


Строковые формы и пред-/пост- идущие элементы

Для использования пред- и пост- идущих элементов с inputs в строковой (линейной) форме, убедитесь в использовании класса .add-on для пред- или пост- идущего элемента и input на одной строке кода без пробелов или переносов строк.


Вспомогающий текст форм

Для добавления вспомогающего текста к элементам формы, поместите текст в <span class="help-inline"> для линейного отображения или в <p class="help-block"> для блочного отображения, после элемента формы.

Используйте классы .span(х) для элементов форм для использования динамического размера в соответствии с основным шаблоном

@

Здесь блочный вспомогающий текст

.00
Здесь линейный вспомогающий текст
$.00

Заметка: Элемент (тег) label являющийся родительским для флажка автоматически расширяет поле для клика. Такой подход положительно сказывается на общении пользователя с Вашим сайтом/проектом.

Кнопка Класс Описание
btn Стандартная серая кнопка
btn btn-primary Синяя сильно заметная и выделяющаяся кнопка, используется для обозначения основного действия
btn btn-info Используйте как альтернативу кнопке по умолчанию
btn btn-success Обозначает позитивное-действие или успешное выполнение
btn btn-warning Обозначает что какое-либо предупреждение может быть связанно с этой кнопкой
btn btn-danger Обозначает негативное-действие или что какая-либо ошибка может быть связанна с этой кнопкой
btn btn-inverse Альтернативная темно-серая кнопка

Кнопки для действий

По соглашению кнопки должны быть использованы для действий, когда как ссылки для объектов. Для примера, "Скачать" должно быть кнопкой, когда "Последние Действия" должно быть ссылкой.

Стили кнопок применяются для всего где добавлен класс .btn. Обычно Вы будете использовать его для элементов <a> и <button>.

Совместимость с браузерами

IE9 не подгоняет градиенты к элементам и закругленным углам, так что мы убрали их. Еще IE9 делает недоступным применение стилей к элементам button, текст становится серым и добавляется отстойная тень, которую мы не смогли исправить.

Различные размеры

Нужны большие и маленькие кнопки? Добавьте классы .btn-large, .btn-small, или .btn-mini для дополнительных размеров.


Отключенное состояние

Для отключения кнопок добавьте класс .disabled к ссылкам и атрибут disabled для элементов <button>.

Основная ссылка Это Ссылка

Внимание! Мы используем класс .disabled как дополнительный, так же как класс .active.

Один класс, несколько тегов

Используйте класс .btn для элементов <a>, <button>, или <input>.

Ссылка
<a class="btn" href="">Ссылка</a>
<button class="btn" type="submit">
  Кнопка
</button>
<input class="btn" type="button"
         value="Это Input Button кнопка">
<input class="btn" type="submit"
         value="Это Input Submit кнопка">

Для наилучшей совместимости с браузерами, используйте элементы корректно обрабатываемые во всех браузерах. Например input, используйте как кнопку <input type="submit">.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Все в едином файле (спрайт)

Вместо того что бы использовать отдельную картинку для каждой из иконок, мы поместили их в один файл (спрайт)—при помощи CSS и background-position мы устанавливаем выбор на конкретной иконке. Такой же метод мы применили на Twitter.com и это отлично работает, так как браузеру достаточно один раз загрузить единый файл и закешировать его.

Все классы иконок начинаются с .icon-*. Это поможет Вам избежать ошибки.

Glyphicons позволили нам использовать набор иконок Halflings который является частью open-source проекта, по соглашению мы приводим ссылку на оригинал их проекта и на автора работы. Пожалуйста не забудьте и вы отдать честь разместив ссылки на Вашем проекте.

Как использовать?

Bootstrap использует тег <i> для всех иконок, они не имеют единого класса—только единый префикс класса .icon-*. Для использования поместите код с примера ниже, куда Вам необходимо:

<i class="icon-search"></i>

Так же иконки доступны в белом виде (inverted), и доступны при дополнительном классе:

<i class="icon-search icon-white"></i>

У нас имеется 120 классов для каждой иконки. Просто добавьте тег <i> с необходимым классом нужной Вам иконки. Полный список классов доступен в sprites.less. А так же полный список классов доступен здесь, смотрите выше.

Внимание! При использовании с текстом, кнопками, ссылками или навигацией не забудьте оставить пробел после тега <i> для корректного расположения элемента.

Идеи для использования

Иконки это хорошо, но когда их стоит использовать? Вот вам идеи:

  • Визуальное обозначение пунктов меню (сайдбар)
  • Для навигации иконками
  • Для кнопок, визуально отображая их непосредственное действие
  • Для ссылок, визуально показывая куда попадет пользователь

Вообще везде где уместен тег <i> Вы сможете добавить иконку.

Примеры

Используйте в кнопках, группах кнопок, навигации или в пред- и пост- идущих элементах форм.