Стиль основных часто используемых 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>
Вы сможете добавить иконку.
Используйте в кнопках, группах кнопок, навигации или в пред- и пост- идущих элементах форм.