Стиль основных часто используемых HTML элементов. Все элементы и их стили управляются дополняемыми классами.
Все шрифты и оформление основаны на двух Less-переменных в файле variables.less: @baseFontSize и @baseLineHeight. Первая - это основной шрифт и его размер, используемый в тексте, вторая - это основная высота строки (line-height).
Мы используем эти переменные и немного математики для создания отступов (margin), полей (padding), высоту строки (line-height) и еще много чего...
В конце ноября, в оттепель, часов в девять утра, поезд Петербургско-Варшавской железной дороги на всех парах подходил к Петербургу. Было так сыро и туманно, что насилу рассвело; в десяти шагах, вправо и влево от дороги, трудно было разглядеть хоть что-нибудь из окон вагона
Выделяйте параграф путем добавления .lead.
Все, как водится, устали, у всех отяжелели за ночь глаза, все назяблись, все лица были бледно-желтые, под цвет тумана.
| Элемент | Использование | Дополнительно |
|---|---|---|
<strong>
|
Используйте для выделения слов или части текста: важно | Нет |
<em>
|
Используйте для выделения части текста курсивом | Нет |
<abbr>
|
Используйте для аббревиатур и сокращений; объяснение сокращения отображается при наведении курсора |
Вложите дополнительный атрибут .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> может быть использован:
Или
Full NameАббревиатуры с использованием атрибута title имеют полупрозрачное подчеркивание точками и курсор при наведении изменяется в знак вопроса. Это дает пользователям понимание, что при наведении курсора будет отображена дополнительная информация.
Добавьте класс .initialism к тегу <abbr> для заглавных букв при использовании аббревиатуры.
HTML лучшая вещь созданная человеком, после нарезного хлеба.
Аббревиатура слова attribute - attr.
| Элемент | Использование | Дополнительно |
|---|---|---|
<blockquote>
|
Блок для цитаты из другого источника |
Добавьте атрибут .pull-left или .pull-right выравнивания текста и обтекания по левую или по правую стороны
|
<small>
|
Дополнительный элемент, в основном используемый для обозначения имени автора или названия статьи |
В тег <cite> поместите имя автора, название статьи или источника
|
Для использования цитат, поместите любой HTML-текст внутрь тега <blockquote>. Для однострочных цитат мы рекомендуем использовать тег <p>.
Используйте дополнительный тег <small> для цитирования источника или автора, автоматически будет добавлено тире — впереди форматируемого текста.
<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>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Внимание!
В горизонтальных списках описания "Термин" будет обрезан при помощи свойства text-overflow. На малых дисплеях (телефон, планшет и т.д.) размер списка будет изменяться в соотвествии с сеткой шаблона.
Поместите строковый код в тег <code>.
Для примера, <code>section</code> должен быть строкой.
При помощи функции htmlspecialchars() вы можете получить автоматическое преобразование угловых "< >" скобок в спецсимволы. И всех других символов HTML разметки.
<?php
echo htmlspecialchars("<p>Выделенный текст...</p>");
?>
<!--На выходе получаем:-->
<p>Выделенный текст...</p>
Используйте <pre> для выделения 2-х и более строк кода. Избегайте использования угловых скобок < и >, для корректного отображения фрагментов кода.
<p>Выделенный текст...</p>
<pre> <p>Выделенный текст...</p> </pre>
Замечание: Всегда используйте теги <pre> как можно левее в редакторе кода, так как внутри тега <pre> сохраняются все отступы и пробелы.
Вы можете дополнительно добавить класс .pre-scrollable , который задаст максимальную высоту (max-width) блока в 350px и добавит вертикальный скроллбар.
Используйте тот же самый тег <pre> как и в предыдущем примере с добавлением двух класссов.
<p>Выделенный текст...</p>
<pre class="prettyprint
linenums">
<p>Выделенный текст...</p>
</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 тегам |
Таблицы имеют межстроковую границу. В Bootstrap 2.0, класс .table обязателен.
<table class="table"> … </table>
| # | Имя | Фамилия | Никнейм |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Позволяет улучшить читаемость и восприятие содержимого таблицы—просто добавьте класс .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 |
Добавляет границы и закругляет углы таблицы.
<table class="table table-bordered"> … </table>
| # | Имя | Фамилия | Никнейм |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Делает Вашу таблицу более компактной. Используйте класс .table-condensed для уменьшения отступов в ячейках с 8px до 4px.
<table class="table table-condensed"> … </table>
| # | Имя | Фамилия | Никнейм |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Вы можете свободно комбинировать различные классы, относящиеся к таблицам, в поиске наилучшего дизайна.
<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 | ||
Лучшее в 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>
Справа пример использования всех возможных элементов форм. Вот список:
Посмотрите код формы ниже, обратите внимание на ассоциирование элемента 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"> для блочного отображения, после элемента формы.
Вместо того, что бы использовать отдельную картинку для каждой из иконок, мы поместили их в один файл (спрайт)—при помощи 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> Вы сможете добавить иконку.
Используйте в кнопках, группах кнопок, навигации или в пред- и пост- идущих элементах форм.