Помимо каркаса, базовые 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 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> |
Обтекает сокращения и акронимы, чтобы показать расширенную версию при наведении | Включить необязательный title для расширенного текста |
<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>
тега:
Аббревиатуры оформляются прописными буквами и имеют светлую пунктирную нижнюю границу. У них также есть курсор помощи при наведении, поэтому у пользователей есть дополнительная индикация, что что-то будет показано при наведении.
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>
Оберните встроенные фрагменты кода с помощью <code>
.
- Например , раздел < code> < / code > должен быть встроен как встроенный .
Используйте <pre>
для нескольких строк кода. Обязательно превратите все символы вставки в их символы Юникода для правильного рендеринга.
<p>Пример текста здесь...</p>
- <пред>
- <p>Образец текста здесь...</p>
- </pre>
Примечание. Следите за тем, чтобы код внутри <pre>
тегов располагался как можно ближе к левому краю; он отобразит все вкладки.
Возьмите тот же <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 | Отметка | Отто | CSS |
2 | Джейкоб | Торнтон | Javascript |
3 | Стью | Вмятина | HTML |
Проявите немного фантазии со своими таблицами, добавив полосу зебры — просто добавьте .table-striped
класс.
Примечание. Таблицы спрайтов используют :nth-child
селектор CSS и недоступны в IE7-IE8.
- < класс таблицы = "таблица полосатая таблица" >
- …
- </таблица>
# | Имя | Фамилия | Язык |
---|---|---|---|
1 | Отметка | Отто | CSS |
2 | Джейкоб | Торнтон | Javascript |
3 | Стью | Вмятина | HTML |
Добавьте границы вокруг всей таблицы и закругленные углы для эстетических целей.
- < класс таблицы = "таблица с границей таблицы" >
- …
- </таблица>
# | Имя | Фамилия | Язык |
---|---|---|---|
1 | Марк Отто | CSS | |
2 | Джейкоб | Торнтон | Javascript |
3 | Стью | Вмятина | |
3 | Бросеф | Сталин | HTML |
Сделайте свои таблицы более компактными, добавив .table-condensed
класс, чтобы сократить отступы ячеек таблицы вдвое (с 8 пикселей до 4 пикселей).
- <table class = "table table-condensed" >
- …
- </таблица>
# | Имя | Фамилия | Язык |
---|---|---|---|
1 | Отметка | Отто | CSS |
2 | Джейкоб | Торнтон | Javascript |
3 | Стью | Вмятина | HTML |
Не стесняйтесь комбинировать любые классы таблиц, чтобы добиться разного внешнего вида, используя любой из доступных классов.
- <table class = "table table-stripe table-border table-densed" >
- ...
- </таблица>
# | Имя | Фамилия | Язык |
---|---|---|---|
1 | Отметка | Отто | CSS |
2 | Джейкоб | Торнтон | Javascript |
3 | Стью | Вмятина | HTML |
4 | Бросеф | Сталин | HTML |
Лучшая часть форм в Bootstrap заключается в том, что все ваши входные данные и элементы управления выглядят великолепно, независимо от того, как вы строите их в своей разметке. Никакого лишнего HTML не требуется, но мы предоставляем шаблоны для тех, кому это нужно.
Более сложные макеты поставляются с краткими и масштабируемыми классами для удобного стиля и привязки событий, поэтому вы будете в курсе каждого шага.
Bootstrap поддерживает четыре типа макетов форм:
Различные типы макетов форм требуют некоторых изменений в разметке, но сами элементы управления остаются и ведут себя одинаково.
Формы Bootstrap включают в себя стили для всех элементов управления базовой формы, таких как ввод, текстовое поле и выбор, которые вы ожидаете. Но он также поставляется с рядом пользовательских компонентов, таких как добавленные и предшествующие входные данные и поддержка списков флажков.
Такие состояния, как ошибка, предупреждение и успех, включены для каждого типа элемента управления формы. Также включены стили для отключенных элементов управления.
Bootstrap предоставляет простую разметку и стили для четырех стилей распространенных веб-форм.
Имя | Учебный класс | Описание |
---|---|---|
Вертикально (по умолчанию) | .form-vertical (не требуется) |
Сложенные, выровненные по левому краю метки над элементами управления |
В соответствии | .form-inline |
Метка с выравниванием по левому краю и элементы управления встроенными блоками для компактного стиля |
Поиск | .form-search |
Расширенный текстовый ввод для типичной эстетики поиска |
Горизонтальный | .form-horizontal |
Плавающие метки, выровненные по левому и правому краям, на той же строке, что и элементы управления |
В версии 2.0 у нас есть более легкие и интеллектуальные значения по умолчанию для стилей форм. Никакой дополнительной разметки, только элементы управления формой.
Отражая стили WebKit по умолчанию, просто добавьте .form-search
дополнительные закругленные поля поиска.
Входные данные — это блочный уровень для начала. Для .form-inline
и .form-horizontal
мы используем встроенный блок.
Слева показаны все элементы управления формой по умолчанию, которые мы поддерживаем. Вот маркированный список:
До версии 1.4 стили форм Bootstrap по умолчанию использовали горизонтальную компоновку. В Bootstrap 2 мы убрали это ограничение, чтобы иметь более разумные и масштабируемые значения по умолчанию для любой формы.
В 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">
после элемента ввода.
:after
. В документах мы показываем светло-красный цвет фона при наведении, чтобы выделить размер значка.
Вместо того, чтобы делать каждый значок дополнительным запросом, мы скомпилировали их в спрайт — набор изображений в одном файле, который использует CSS для позиционирования изображений с расширением background-position
. Это тот же метод, который мы используем на Twitter.com, и он хорошо сработал для нас.
Все классы значков имеют префикс .icon-
для правильного пространства имен и области видимости, как и другие наши компоненты. Это поможет избежать конфликтов с другими инструментами.
Glyphicons предоставила нам возможность использовать набор Halflings в нашем наборе инструментов с открытым исходным кодом, если мы предоставим ссылку и ссылку здесь, в документации. Пожалуйста, подумайте о том, чтобы сделать то же самое в своих проектах.
В версии 2.0.0 мы решили использовать <i>
тег для всех наших значков, но у них нет класса case — только общий префикс. Чтобы использовать, разместите следующий код где угодно:
- <i class = "иконка-поиск" ></i>
Существуют также стили для перевернутых (белых) значков, подготовленные с помощью одного дополнительного класса:
- <i class = "icon-search icon-white" ></i>
Есть 120 классов на выбор для ваших иконок. Просто добавьте <i>
тег с правильными классами, и все готово. Вы можете найти полный список в sprites.less или прямо здесь, в этом документе.
Иконки великолепны, но где их использовать? Вот несколько идей:
По сути, везде, где вы можете поставить <i>
тег, вы можете поставить значок.
Используйте их в кнопках, группах кнопок для панели инструментов, навигации или предваряющих входных данных формы.