Стиль основных часто используемых HTML элементов. Все элементы и их стили управляются дополняемыми классами.
Все шрифты и типография основаны на двух Less-переменных в файле variables.less: @baseFontSize и @baseLineHeight. Первый это основной шрифт и его размер используемый в проекте, вотрой это основная высота строки (line-height).
Мы используем эти переменные и немного математики для создания отступов (margin), полей (padding), высоту строки (line-height) и еще много чего...
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.
| Элемент | Использование | Дополнительно |
|---|---|---|
<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> Вы сможете добавить иконку.
Используйте в кнопках, группах кнопок, навигации или в пред- и пост- идущих элементах форм.