Помимо каркаса, базовые HTML-элементы стилизованы и дополнены расширяемыми классами, чтобы обеспечить свежий, согласованный внешний вид.
Вся типографская сетка основана на двух переменных Less в нашем файле variable.less: @baseFontSizeи @baseLineHeight. Первый — это базовый размер шрифта, используемый повсюду, а второй — базовая высота строки.
Мы используем эти переменные и немного математики для создания полей, отступов и высоты строки всего нашего типа и многого другого.
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.
Выделите абзац, добавив .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| Элемент | Применение | По желанию |
|---|---|---|
<strong> |
Для выделения фрагмента текста важным | Никто |
<em> |
Для выделения фрагмента текста ударением | Никто |
<abbr> |
Обтекает сокращения и акронимы, чтобы показать расширенную версию при наведении | Включить необязательный .initialismclass для сокращений в верхнем регистре. |
<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>тега:
Аббревиатуры с titleатрибутом имеют светлую пунктирную нижнюю границу и подсказку при наведении курсора. Это дает пользователям дополнительную информацию о том, что что-то будет отображаться при наведении.
Добавьте initialismкласс к аббревиатуре, чтобы улучшить типографскую гармонию, придав ей немного меньший размер текста.
HTML — лучшее, что есть после нарезанного хлеба.
Аббревиатура атрибута слова attr .
| Элемент | Применение | По желанию |
|---|---|---|
<blockquote> |
Элемент уровня блока для цитирования контента из другого источника | Добавить .pull-leftи .pull-rightклассы для плавающих опционов |
<small> |
Необязательный элемент для добавления ссылки на пользователя, обычно автора с названием работы. | Поместите <cite>вокруг заголовка или названия источника |
Чтобы включить цитату, оберните <blockquote>любой HTML -код в качестве цитаты. Для прямых котировок мы рекомендуем расширение <p>.
Включите необязательный <small>элемент для цитирования вашего источника, и вы получите длинное тире —перед ним для целей стиля.
- <цитата>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere a ante venenatis. </p>
- <small> Кто-то известный </small>
- </blockquote>
Цитаты по умолчанию оформлены следующим образом:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere a ante venenatis.
Кто-то известный в Body of work
Чтобы переместить цитату вправо, добавьте class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere a ante venenatis.
Кто-то известный в Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Берегись! Горизонтальные списки описаний будут обрезать термины, которые слишком длинны, чтобы поместиться в левой колонке исправить text-overflow. В более узких окнах просмотра они изменятся на сложенный макет по умолчанию.
Оберните встроенные фрагменты кода с помощью <code>.
- Например , раздел < code> < / code > должен быть встроен как встроенный .
Используйте <pre>для нескольких строк кода. Обязательно избегайте угловых скобок в коде для правильного рендеринга.
<p>Пример текста здесь...</p>
- <пред>
- <p>Образец текста здесь...</p>
- </pre>
Примечание. Следите за тем, чтобы код внутри <pre>тегов располагался как можно ближе к левому краю; он отобразит все вкладки.
При желании вы можете добавить .pre-scrollableкласс, который установит максимальную высоту 350 пикселей и предоставит полосу прокрутки по оси Y.
Возьмите тот же <pre>элемент и добавьте два необязательных класса для улучшенного рендеринга.
- <p> Пример текста здесь... </p>
- <pre class = "красивая печать
- линии" >
- <p>Образец текста здесь...</p>
- </pre>
Загрузите google-code-prettify и просмотрите файл readme, чтобы узнать, как его использовать.
| Ярлык | Описание |
|---|---|
<table> |
Элемент-обертка для отображения данных в табличном формате |
<thead> |
Элемент-контейнер для строк заголовка таблицы ( <tr>) для маркировки столбцов таблицы |
<tbody> |
Элемент-контейнер для строк таблицы ( <tr>) в теле таблицы |
<tr> |
Элемент-контейнер для набора ячеек таблицы ( <td>или <th>), который отображается в одной строке. |
<td> |
Ячейка таблицы по умолчанию |
<th> |
Специальная ячейка таблицы для меток столбцов (или строк, в зависимости от области действия и размещения) Должны использоваться внутри <thead> |
<caption> |
Описание или краткая информация о том, что содержится в таблице, особенно полезно для программ чтения с экрана. |
- <таблица>
- <thead>
- <tr>
- <й> … </й>
- <й> … </й>
- </tr>
- </thead>
- <tbody>
- <tr>
- <тд> … </тд>
- <тд> … </тд>
- </tr>
- </tbody>
- </таблица>
| Имя | Учебный класс | Описание |
|---|---|---|
| По умолчанию | Никто | Никаких стилей, только столбцы и строки |
| Базовый | .table |
Только горизонтальные линии между строками |
| окаймленный | .table-bordered |
Скругляет углы и добавляет внешнюю границу |
| полосатая зебра | .table-striped |
Добавляет светло-серый цвет фона в нечетные строки (1, 3, 5 и т. д.) |
| Сжатый | .table-condensed |
Сокращает вертикальные отступы вдвое, с 8 пикселей до 4 пикселей, внутри всех элементов tdиth |
Таблицы автоматически оформляются только с несколькими границами, чтобы обеспечить удобочитаемость и сохранить структуру. С 2.0 .tableкласс обязателен.
- < класс таблицы = "таблица" >
- …
- </таблица>
| # | Имя | Фамилия | Имя пользователя |
|---|---|---|---|
| 1 | Отметка | Отто | @мдо |
| 2 | Джейкоб | Торнтон | @толстый |
| 3 | Ларри | птица | @твиттер |
Проявите немного фантазии со своими таблицами, добавив полосу зебры — просто добавьте .table-stripedкласс.
Примечание. В таблицах с чередованием используется :nth-childселектор CSS, который недоступен в IE7–IE8.
- < класс таблицы = "таблица полосатая таблица" >
- ��
- </таблица>
| # | Имя | Фамилия | Имя пользователя |
|---|---|---|---|
| 1 | Отметка | Отто | @мдо |
| 2 | Джейкоб | Торнтон | @толстый |
| 3 | Ларри | птица | @твиттер |
Добавьте границы вокруг всей таблицы и закругленные углы для эстетических целей.
- < класс таблицы = "таблица с границей таблицы" >
- …
- </таблица>
| # | Имя | Фамилия | Имя пользователя |
|---|---|---|---|
| 1 | Отметка | Отто | @мдо |
| Отметка | Отто | @getbootstrap | |
| 2 | Джейкоб | Торнтон | @толстый |
| 3 | Ларри Птица | @твиттер | |
Сделайте свои таблицы более компактными, добавив .table-condensedкласс, чтобы сократить отступы ячеек таблицы вдвое (с 8 пикселей до 4 пикселей).
- <table class = "table table-condensed" >
- …
- </таблица>
| # | Имя | Фамилия | Имя пользователя |
|---|---|---|---|
| 1 | Отметка | Отто | @мдо |
| 2 | Джейкоб | Торнтон | @толстый |
| 3 | Ларри Птица | @твиттер | |
Не стесняйтесь комбинировать любые классы таблиц, чтобы добиться разного внешнего вида, используя любой из доступных классов.
- <table class = "table table-stripe table-border table-densed" >
- ...
- </таблица>
| ФИО | |||
|---|---|---|---|
| # | Имя | Фамилия | Имя пользователя |
| 1 | Отметка | Отто | @мдо |
| 2 | Джейкоб | Торнтон | @толстый |
| 3 | Ларри Птица | @твиттер | |
Лучшая часть форм в Bootstrap заключается в том, что все ваши входные данные и элементы управления выглядят великолепно, независимо от того, как вы строите их в своей разметке. Никакого лишнего HTML не требуется, но мы предоставляем шаблоны для тех, кому это нужно.
Более сложные макеты поставляются с краткими и масштабируемыми классами для удобного стиля и привязки событий, поэтому вы будете в курсе каждого шага.
Bootstrap поддерживает четыре типа макетов форм:
Различные типы макетов форм требуют некоторых изменений в разметке, но сами элементы управления остаются и ведут себя одинаково.
Формы Bootstrap включают в себя стили для всех элементов управления базовой формы, таких как ввод, текстовое поле и выбор, которые вы ожидаете. Но он также поставляется с рядом пользовательских компонентов, таких как добавленные и предшествующие входные данные и поддержка списков флажков.
Такие состояния, как ошибка, предупреждение и успех, включены для каждого типа элемента управления формы. Также включены стили для отключенных элементов управления.
Bootstrap предоставляет простую разметку и стили для четырех стилей распространенных веб-форм.
| Имя | Учебный класс | Описание |
|---|---|---|
| Вертикально (по умолчанию) | .form-vertical (не требуется) |
Сложенные, выровненные по левому краю метки над элементами управления |
| В соответствии | .form-inline |
Метка с выравниванием по левому краю и элементы управления встроенными блоками для компактного стиля |
| Поиск | .form-search |
Расширенный текстовый ввод для типичной эстетики поиска |
| Горизонтальный | .form-horizontal |
Плавающие метки, выровненные по левому и правому краям, на той же строке, что и элементы управления |
Умные и легкие дефолты без дополнительной разметки.
- < класс формы = "хорошо" >
- <label> Имя ярлыка </label>
- <input type = "text" class = "span3" placeholder = "Введите что-нибудь..." >
- <span class = "help-block" > Пример текста справки на уровне блока здесь. </span>
- < класс метки = "флажок" >
- <input type = "checkbox" > Проверить меня
- </метка>
- <button type = "submit" class = "btn" > Отправить </button>
- </форма>
Добавьте .form-searchв форму и .search-queryв input.
- <form class = "ну форма-поиск" >
- <input type = "text" class = "input-media search-query" >
- <button type = "submit" class = "btn" > Поиск </button>
- </форма>
Добавьте .form-inline, чтобы улучшить вертикальное выравнивание и расстояние между элементами управления формы.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "Электронная почта" >
- <input type = "password" class = "input-small" placeholder = "Password" >
- < класс метки = "флажок" >
- <input type = "checkbox" > Запомнить меня
- </метка>
- <button type = "submit" class = "btn" > Войти </button>
- </форма>
Справа показаны все элементы управления формы по умолчанию, которые мы поддерживаем. Вот маркированный список:
Учитывая приведенный выше пример макета формы, вот разметка, связанная с первой группой ввода и управления. Все классы .control-group, .control-labelи .controlsнеобходимы для стилизации.
- < класс формы = "форма-горизонтальная" >
- <набор полей>
- <legend> Текст легенды </legend>
- <div класс = "контрольная группа" >
- <label class = "control-label" for = "input01" > Ввод текста </label>
- <div класс = "элементы управления" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Вспомогательный текст справки </p>
- </div>
- </div>
- </поля>
- </форма>
В Bootstrap есть стили для поддерживаемых браузером сфокусированных состояний и disabledсостояний. Мы удаляем Webkit по умолчанию outlineи применяем box-shadowвместо него a для :focus.
Он также включает стили проверки для ошибок, предупреждений и успеха. Чтобы использовать, добавьте класс ошибок в окружающий файл .control-group.
- <набор полей
- class = "ошибка контрольной группы" >
- …
- </поля>
Группы ввода — с добавленным или предшествующим текстом — обеспечивают простой способ дать больше контекста для ваших входных данных. Прекрасные примеры включают знак @ для имен пользователей Twitter или $ для финансов.
До версии 1.4 Bootstrap требовал дополнительной разметки вокруг флажков и переключателей, чтобы складывать их. Теперь достаточно просто <label class="checkbox">повторить <input type="checkbox">.
Также поддерживаются встроенные флажки и радио. Просто добавьте .inlineк любому .checkboxили .radio, и все готово.
Чтобы использовать входные данные в начале или в конце во встроенной форме, обязательно поместите .add-onи inputв той же строке без пробелов.
Чтобы добавить текст справки для входных данных формы, включите встроенный текст справки <span class="help-inline">или текстовый блок справки <p class="help-block">после элемента ввода.
Вместо того, чтобы делать каждый значок дополнительным запросом, мы скомпилировали их в спрайт — набор изображений в одном файле, который использует CSS для позиционирования изображений с расширением background-position. Это тот же метод, который мы используем на Twitter.com, и он хорошо сработал для нас.
Все классы значков имеют префикс .icon-для правильного пространства имен и области видимости, как и другие наши компоненты. Это поможет избежать конфликтов с другими инструментами.
Glyphicons предоставила нам возможность использовать набор Halflings в нашем наборе инструментов с открытым исходным кодом, если мы предоставим ссылку и ссылку здесь, в документации. Пожалуйста, подумайте о том, чтобы сделать то же самое в своих проектах.
Bootstrap использует <i>тег для всех значков, но у них нет case-класса — только общий префикс. Чтобы использовать, разместите следующий код где угодно:
- <i class = "иконка-поиск" ></i>
Существуют также стили для перевернутых (белых) значков, подготовленные с помощью одного дополнительного класса:
- <i class = "icon-search icon-white" ></i>
Есть 140 классов на выбор для ваших иконок. Просто добавьте <i>тег с правильными классами, и все готово. Вы можете найти полный список в sprites.less или прямо здесь, в этом документе.
Берегись! При использовании рядом строк текста, например, в кнопках или навигационных ссылках, не забудьте оставить пробел после <i>тега для правильного интервала.
Иконки великолепны, но где их использовать? Вот несколько идей:
По сути, везде, где вы можете поставить <i>тег, вы можете поставить значок.
Используйте их в кнопках, группах кнопок для панели инструментов, навигации или предваряющих входных данных формы.