Основные элементы HTML. Улучшенное управление стилями с помощью классов.
Доступны все HTML заголовки, от <h1>
до <h6>
.
В Bootstrap основной размер шрифта font-size
по умолчанию 14px, с высотой строки line-height
в 20px. Это применимо к <body>
и всем остальным абзацам. Дополнительно <p>
(абзац) имеет нижний отступ, равный половине высоты его строки (по умолчанию 10px).
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.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Выделяйте абзац путем добавления .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
Все шрифты и размеры основаны на двух переменных LESS в variables.less: @baseFontSize
и @baseLineHeight
. Первая — это основной размер шрифта, используемый во всем документе, вторая — это основная высота строки. Мы используем эти переменные и немного вычислений, чтобы создать отступы, поля, высоту строк разного типа и многое другое. Настраивайте Bootstrap для себя.
Используя простые стили Bootstrap, применяйте HTML теги для выделения.
<small>
Для выделения блоков текста мелким шрифтом используйте тег small.
Эта строка текста предназначена для того, чтобы показать, как выглядит мелкий шрифт
<p> <small>Эта строка текста предназначена для того, чтобы показать, как выглядит мелкий шрифт.</small> </p>
Выделение фрагмента текста с помощью important
Следующий фрагмент текста набран полужирным шрифтом.
<strong>набран полужирным шрифтом</strong>
Выделение фрагмента текста с помощью stress
Следующий фрагмент текста выделен курсивом.
<em>выделен курсивом</em>
Внимание! Смело используйте <b>
и <i>
в HTML5. Но <b>
предназначен для выделения слова или фразы, которое не выражает особой важности, в то время как <i>
используется для выделения разговорной речи, технических терминов и т.д.
Выделение цветом с помощью нескольких вспомогательных классов.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
- <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
- <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
- <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
- <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
Используйте элемент HTML <abbr>
для аббревиатур. При этом наведите курсор на аббревиатуру, чтобы увидеть ее расшифровку. Аббревиатуры с атрибутом title
выделены полупрозрачным подчеркиванием точками, а при длительном наведении курсора вы увидите знак вопроса и расшифровку аббревиатуры.
<abbr>
Чтобы показать расшифровку аббревиатуры при длительном наведении курсора, добавьте атрибут title
.
Аббревиатура слова «attribute» — attr.
<abbr title="attribute">attr</abbr>
<abbr class="initialism">
Добавьте .initialism
, чтобы немного уменьшить размер шрифта.
HTML — это круче вареного яйца.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Представьте или только основную или полную контактную информацию.
<address>
Сохраните форматирование, ставя в конце всех строк тег <br>
.
- <address>
- <strong>Twitter, Inc.</strong><br>
- 795 Folsom Ave, Suite 600<br>
- San Francisco, CA 94107<br>
- <abbr title="Phone">P:</abbr> (123) 456-7890
- </address>
- <address>
- <strong>Full Name</strong><br>
- <a href="mailto:#">first.last@gmail.com</a>
- </address>
Цитирование фрагментов текста из других источников.
Цитата HTML ставится внутрь тега <blockquote>
. Для однострочных цитат используйте тег <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
- </blockquote>
Простые изменения стиля и содержания в стандартных цитатах.
Добавьте тег <small>
для указания на источник. Поместите название источника внутрь тега <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Кто-то очень известный в Названии источника
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
- <small>Кто-то очень известный в <cite title="Source Title">Названии источника</cite></small>
- </blockquote>
Используйте .pull-right
для выравнивания текста по правую сторону.
- <blockquote class="pull-right">
- ...
- </blockquote>
Список, в котором порядок явно не обозначен.
- <ul>
- <li>...</li>
- </ul>
Список, в котором порядок четко определен.
- <ol>
- <li>...</li>
- </ol>
Список без стиля
или без дополнительного левого поля.
- <ul class="unstyled">
- <li>...</li>
- </ul>
Список терминов с их сопутствующими описаниями.
- <dl>
- <dt>...</dt>
- <dd>...</dd>
- </dl>
Выстраивает термины и описания <dl>
в одну линию.
- <dl class="dl-horizontal">
- <dt>...</dt>
- <dd>...</dd>
- </dl>
Внимание! В горизонтальных списках описания слишком длинные термины будут обрезаться с помощью text-overflow
. На малых дисплеях размеры списков будут изменяться в соответствии с сеткой шаблона.
Поместите строковый код внутрь тега <code>
.
<section>
следует поместить внутрь как строковый.
- Для примера,<code><section></код> следует поместить внутрь как строковый.
Используйте <pre>
для выделения многих строк кода. Избегайте угловых скобок в коде для его корректного отображения.
<p>Sample text here...</p>
- <pre>
- <p>Sample text here...</p>
- </pre>
Внимание! Всегда используйте теги <pre>
как можно левее; это сохранит все отступы. Дополнительно вы можете использовать класс .pre-scrollable
, который имеет максимальную высоту в 350px и добавляет вертикальную прокрутку.
Для основного форматирования и только горизонтальной разметки добавьте класс .table
в любой тег <table>
.
# | Имя | Фамилия | Имя пользователя |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
- <table class="table">
- …
- </table>
Добавьте любой из следующих классов к основному классу .table
.
.table-striped
Добавить светло-серый фон к нечетным строкам внутри <tbody>
можно посредством CSS селектора :nth-child
(в IE7-IE8 не поддерживается).
# | Имя | Фамилия | Имя пользователя |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
- <table class="table table-striped">
- …
- </table>
.table-bordered
Добавляет рамки и закругляет углы таблицы.
# | Имя | Фамилия | Имя пользователя |
---|---|---|---|
1 | Mark | Otto | @mdo |
Mark | Otto | @TwBootstrap | |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
- <table class="table table-bordered">
- …
- </table>
.table-hover
Делает активным наведение курсора внутри.
# | Имя | Фамилия | Имя пользователя |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
- <table class="table table-hover">
- …
- </table>
.table-condensed
Делает таблицы более компактными, наполовину сокращая отступы.
# | Имя | Фамилия | Имя пользователя |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
- <table class="table table-condensed">
- …
- </table>
Используйте контекстные классы, чтобы выделить цветом строки таблицы.
Класс | Описание |
---|---|
.success
|
Указывает на успешно выполненное действие. |
.error
|
Указывает на опасное или негативное действие.. |
.warning
|
Указывает на предупреждение, на которое следует обратить внимание. |
.info
|
Используется как альтернатива стилям по умолчанию. |
# | Продукт | Платеж | Статус |
---|---|---|---|
1 | TB — Ежемесячно | 01/04/2012 | Подтвержден |
2 | TB — Ежемесячно | 02/04/2012 | Отклонен |
3 | TB — Ежемесячно | 03/04/2012 | Задержка |
4 | TB — Ежемесячно | 04/04/2012 | Позвонить для подтверждения |
- ...
- <tr class="success">
- <td>1</td>
- <td>TB - Monthly</td>
- <td>01/04/2012</td>
- <td>Approved</td>
- </tr>
- ...
Список поддерживаемых элементов HTML и указания для их использования.
Тег | Описание |
---|---|
<table>
|
Вставляет элемент для отображения данных в табличной форме. |
<thead>
|
Элемент контейнера предназначен для хранения одной или нескольких строк таблицы. (<tr> ) Озаглавливает колонки таблицы.
|
<tbody>
|
Элемент контейнера для создания строк в теле таблицы (<tr> )
|
<tr>
|
Элемент контейнера для настройки ячеек таблицы. (<td> or <th> ) Создает отдельную строку.
|
<td>
|
Ячейка таблицы по умолчанию |
<th>
|
Специальная ячейка для названий столбцов таблицы (или строк — зависит от расположения). Следует использовать с кодом <thead>
|
<caption>
|
Краткое описание в таблице, которое очень удобно для мобильных устройств. |
- <table>
- <caption>...</caption>
- <thead>
- <tr>
- <th>...</th>
- <th>...</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>...</td>
- <td>...</td>
- </tr>
- </tbody>
- </table>
Отдельные элементы формы имеют свой стиль, но без обязательного класса <form>
или каких-либо особых изменений в разметке. В результате получаются упорядоченный, выровненный по левому краю текст в элементах формы.
- <form>
- <legend>Условные обозначения</legend>
- <label>Название</label>
- <input type="text" placeholder="Type something…">
- <span class="help-block">Это пример вспомогательного текста.</span>
- <label class="checkbox">
- <input type="checkbox"> Проверить
- </label>
- <button type="submit" class="btn">Подтвердить</button>
- </form>
В Bootstrap есть три дополнительных шаблона форм для общего пользования.
Добавьте .form-search
в форму и .search-query
в элемент <input>
для построения закругленной рамки.
- <form class="form-search">
- <input type="text" class="input-medium search-query">
- <button type="submit" class="btn">Search</button>
- </form>
Добавьте класс .form-inline
для компактного расположения выровненного по левому краю текста и строк.
- <form class="form-inline">
- <input type="text" class="input-small" placeholder="Email">
- <input type="password" class="input-small" placeholder="Password">
- <label class="checkbox">
- <input type="checkbox"> Запомнить
- </label>
- <button type="submit" class="btn">Отправить</button>
- </form>
Выровняйте текст по правой стороне, ставя обтекание слева, чтобы он находился на одной линии с элементами формы:
.form-horizontal
в форму.control-group
.control-label
в текст.controls
для точной настройки
- <form class="form-horizontal">
- <div class="control-group">
- <label class="control-label" for="inputEmail">Email</label>
- <div class="controls">
- <input type="text" id="inputEmail" placeholder="Email">
- </div>
- </div>
- <div class="control-group">
- <label class="control-label" for="inputPassword">Password</label>
- <div class="controls">
- <input type="password" id="inputPassword" placeholder="Password">
- </div>
- </div>
- <div class="control-group">
- <div class="controls">
- <label class="checkbox">
- <input type="checkbox"> Remember me
- </label>
- <button type="submit" class="btn">Sign in</button>
- </div>
- </div>
- </form>
Примеры стандартных поддерживаемых элементов формы.
Самый простой элемент формы с текстовыми полями ввода. Поддерживает все типы HTML5: текст, пароль, text, password, время и дата, региональные настройки времени и даты, дата, месяц, время, неделя, номер, электронная почта, URL, поиск, номер телефона и цвет.
Всякий раз обязательно используйте нужный тип type
.
- <input type="text" placeholder="Text input">
Для элементов формы, которые позволяют использовать многострочный текст. Измените атрибут rows
в случае необходимости.
- <textarea rows="3"></textarea>
Элементы «флажки» (чек-боксы) используются для выбора одной или нескольких опций в списке, а радио-кнопки предназначены только для выбора одной опции из нескольких.
- <label class="checkbox">
- <input type="checkbox" value="">
- А вот вам опция номер один - очень крутая штука.
- </label>
- <label class="radio">
- <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
- А вот вам опция номер один - очень крутая штука.
- </label>
- <label class="radio">
- <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
- Опция два - это нечто другое. Выбрав ее, отменяете первую.
- </label>
Добавьте класс .inline
к нескольким флажкам или радио-кнопкам, чтобы разместить их на одной линии.
- <label class="checkbox inline">
- <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
- </label>
- <label class="checkbox inline">
- <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
- </label>
- <label class="checkbox inline">
- <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
- </label>
Используйте опцию по умолчанию или укажите multiple="multiple"
, чтобы отобразить сразу несколько опций.
- <select>
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
- <select multiple="multiple">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
В Bootstrap имеются также другие полезные компоненты формы, которые могут встраиваться в панель браузера.
Добавьте текст или кнопки до или после поля текстового ввода. Обратите внимание, что элементы select
при этом не поддерживаются.
Добавьте один или два класса внутрь тегов .add-on
и input
, чтобы отобразить текст до или после поля ввода.
- <div class="input-prepend">
- <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
- </div>
- <div class="input-append">
- <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
- </div>
Используйте оба класса и дважды — .add-on
, чтобы отобразить текст впереди или позади.
- <div class="input-prepend input-append">
- <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
- </div>
Используйте с текстом вместо <span>
класс .btn
, чтобы к вводу подключить кнопку.
- <div class="input-append">
- <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
- </div>
- <div class="input-append">
- <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
- </div>
- <form class="form-search">
- <div class="input-append">
- <input type="text" class="span2 search-query">
- <button type="submit" class="btn">Search</button>
- </div>
- <div class="input-prepend">
- <button type="submit" class="btn">Search</button>
- <input type="text" class="span2 search-query">
- </div>
- </form>
Используйте соответствующие классы, такие как .input-large
или согласуйте ваше поле ввода с сеткой размеров, используя классы .span*
.
- <input class="input-mini" type="text" placeholder=".input-mini">
- <input class="input-small" type="text" placeholder=".input-small">
- <input class="input-medium" type="text" placeholder=".input-medium">
- <input class="input-large" type="text" placeholder=".input-large">
- <input class="input-xlarge" type="text" placeholder=".input-xlarge">
- <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
Внимание! В дальнейших версиях мы изменим использование этих взаимосвязанных классов ввода, чтобы согласовать размер кнопок. Например, .input-large
будет увеличивать отступ и размер шрифта в поле ввода.
Используйте от .span1
до .span12
, чтобы задать одинаковые размеры в поле ввода и в сетке столбцов.
- <input class="span1" type="text" placeholder=".span1">
- <input class="span2" type="text" placeholder=".span2">
- <input class="span3" type="text" placeholder=".span3">
- <select class="span1">
- ...
- </select>
- <select class="span2">
- ...
- </select>
- <select class="span3">
- ...
- </select>
Для множественного ввода используйте класс модификатора .controls-row
для корректного отображения пробелов. Это позволяет убрать лишние пробелы при обтекании, настраивает соответствующие поля и прозрачность обтекания.
- <div class="controls">
- <input class="span5" type="text" placeholder=".span5">
- </div>
- <div class="controls controls-row">
- <input class="span4" type="text" placeholder=".span4">
- <input class="span1" type="text" placeholder=".span1">
- </div>
- ...
Представьте данные в форме, которая не редактируется без использования фактической разметки.
- <span class="input-xlarge uneditable-input">Some value here</span>
Добавьте в конец формы действие (кнопки). Расположенные внутри класса .form-horizontal
, кнопки автоматически получат отступ, соответствующий форме.
- <div class="form-actions">
- <button type="submit" class="btn btn-primary">Сохранить изменения</button>
- <button type="button" class="btn">Отмена</button>
- </div>
Поддержка строчного и блокового текста, который отображается около управления формы.
- <input type="text"><span class="help-inline">Inline help text</span>
- <input type="text"><span class="help-block">Слишком большой блок вспомогательного текста переносится на новую строку и может продолжиться более, чем на одну строку.</span>
Обеспечивают обратную связь с пользователями или посетителями.
Мы удалили стили по умолчанию outline
в настройках некоторых форм и поставили на их место box-shadow
для фокуса :focus
.
- <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
Добавьте атрибут disabled
в поле ввода для того, чтобы предотвратить ввод. Внешний вид поля при этом немного изменится.
- <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
В Bootstrap имеются стили валидации для ошибок, предупреждений, информации и успешных действий. Для использования добавьте подходящий класс к ближайшему классу .control-group
.
- <div class="control-group warning">
- <label class="control-label" for="inputWarning">Предупреждение</label>
- <div class="controls">
- <input type="text" id="inputWarning">
- <span class="help-inline">Что-то идет не так</span>
- </div>
- </div>
- <div class="control-group error">
- <label class="control-label" for="inputError">Ошибка</label>
- <div class="controls">
- <input type="text" id="inputError">
- <span class="help-inline">Пожалуйста, исправьте ошибку</span>
- </div>
- </div>
- <div class="control-group success">
- <label class="control-label" for="inputSuccess">Выполнено успешно</label>
- <div class="controls">
- <input type="text" id="inputSuccess">
- <span class="help-inline">Урааа!</span>
- </div>
- </div>
Добавьте классы к элементу <img>
, чтобы легко настроить стили изображений.
- <img src="..." class="img-rounded">
- <img src="..." class="img-circle">
- <img src="..." class="img-polaroid">
Внимание! .img-rounded
и .img-circle
не работают в IE7-8 из-за недостаточной поддержки border-radius
.
140 иконок в едином файле, по умолчанию в темно-сером и белом цвете. Предоставлены Glyphicons.
Набор иконок Glyphicons Halflings не является бесплатным, но по соглашению между Bootstrap и Glyphicons разработчики имеют возможность использовать его без дополнительной платы. В знак благодарности мы просим вас разместить ссылку на оригинал проекта Glyphicons.
Все иконки требуют использования тега <i>
с уникальным классом и префиксом icon-
. Для использования поместите код с примера ниже в нужное место:
- <i class="icon-search"></i>
Также иконки могут использоваться в белом цвете (в виде инверсии), и доступны при дополнительном классе. Этот класс применяется при наведении курсора, активных состояний, навигации и раскрывающихся ссылок.
- <i class="icon-search icon-white"></i>
Внимание! При использовании с текстом, кнопками, ссылками или навигацией не забудьте оставить пробел после тега <i>
для корректного расположения элемента.
Используйте иконки для кнопок, пунктов меню, навигации или присоедините к формам ввода.
- <div class="btn-toolbar">
- <div class="btn-group">
- <a class="btn" href="#"><i class="icon-align-left"></i></a>
- <a class="btn" href="#"><i class="icon-align-center"></i></a>
- <a class="btn" href="#"><i class="icon-align-right"></i></a>
- <a class="btn" href="#"><i class="icon-align-justify"></i></a>
- </div>
- </div>
- <div class="btn-group">
- <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> Пользователь</a>
- <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#"><i class="icon-pencil"></i> Редактировать</a></li>
- <li><a href="#"><i class="icon-trash"></i> Удалить</a></li>
- <li><a href="#"><i class="icon-ban-circle"></i> Запретить</a></li>
- <li class="divider"></li>
- <li><a href="#"><i class="i"></i> Назначить администратором</a></li>
- </ul>
- </div>
- <a class="btn btn-small" href="#"><i class="icon-star"></i></a>
- <ul class="nav nav-list">
- <li class="active"><a href="#"><i class="icon-home icon-white"></i> Домой</a></li>
- <li><a href="#"><i class="icon-book"></i> Библиотека</a></li>
- <li><a href="#"><i class="icon-pencil"></i> Приложения</a></li>
- <li><a href="#"><i class="i"></i> Дополнительно</a></li>
- </ul>
- <div class="control-group">
- <label class="control-label" for="inputIcon">Адрес электронной почты</label>
- <div class="controls">
- <div class="input-prepend">
- <span class="add-on"><i class="icon-envelope"></i></span>
- <input class="span2" id="inputIcon" type="text">
- </div>
- </div>
- </div>