CSS

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

Заголовки & основной текст

Размеры

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

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

Пример основного текста

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

Класс Lead

Выделяйте параграф путем добавления .lead.

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

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
[email protected]

Пример аббревиатур

Аббревиатуры с использованием атрибута 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> Вы сможете добавить иконку.

Примеры

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