Базовый CSS

Помимо каркаса, базовые 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.

ч1. Заголовок 1

ч2. Заголовок 2

h3. Заголовок 3

h4. Заголовок 4

h5. Заголовок 5
h6. Заголовок 6

Выделение, адрес и аббревиатура

Элемент Применение По желанию
<strong> Для выделения фрагмента текста важным Никто
<em> Для выделения фрагмента текста ударением Никто
<abbr> Обтекает сокращения и акронимы, чтобы показать расширенную версию при наведении

Включить необязательный titleатрибут для расширенного текста

Используйте .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>тега:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 Тел
.: (123) 456-7890
Полное имя
[email protected]

Примеры сокращений

Аббревиатуры с titleатрибутом имеют светлую пунктирную нижнюю границу и подсказку при наведении курсора. Это дает пользователям дополнительную информацию о том, что что-то будет отображаться при наведении.

Добавьте initialismкласс к аббревиатуре, чтобы улучшить типографскую гармонию, придав ей немного меньший размер текста.

HTML — лучшее, что есть после нарезанного хлеба.

Аббревиатура атрибута слова attr .

Цитаты

Элемент Применение По желанию
<blockquote> Элемент уровня блока для цитирования контента из другого источника

Добавить citeатрибут для исходного URL

Использование .pull-leftи .pull-rightклассы для плавающих опционов
<small> Необязательный элемент для добавления ссылки на пользователя, обычно автора с названием работы. Поместите <cite>вокруг заголовка или названия источника

Чтобы включить цитату, оберните <blockquote>любой HTML -код в качестве цитаты. Для прямых котировок мы рекомендуем расширение <p>.

Включите необязательный <small>элемент для цитирования вашего источника, и вы получите длинное тире &mdash;перед ним для целей стиля.

  1. <цитата>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere a ante venenatis. </p>
  3. <small> Кто-то известный </small>
  4. </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>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Целое число слов и масса
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Угревая сыпь
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Энеан сит амет эрат нунк
  • Eget porttitor lorem

без стиля

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Целое число слов и масса
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Угревая сыпь
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Энеан сит амет эрат нунк
  • Eget porttitor lorem

Упорядоченный

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Целое число слов и масса
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Энеан сит амет эрат нунк
  8. Eget porttitor lorem

Описание

<dl>

Списки описаний
Список описаний идеально подходит для определения терминов.
Юисмод
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Порта Малесуада
Etiam porta sem malesuada magna mollis euismod.

Горизонтальное описание

<dl class="dl-horizontal">

Списки описаний
Список описаний идеально подходит для определения терминов.
Юисмод
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Порта Малесуада
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Берегись! Горизонтальные списки описаний будут обрезать термины, которые слишком длинны, чтобы поместиться в левой колонке исправить text-overflow. В более узких окнах просмотра они изменятся на сложенный макет по умолчанию.

В соответствии

Оберните встроенные фрагменты кода с помощью <code>.

  1. Например , раздел < code> < / code > должен быть встроен как встроенный .

Базовый блок

Используйте <pre>для нескольких строк кода. Обязательно избегайте угловых скобок в коде для правильного рендеринга.

<p>Пример текста здесь...</p>
  1. <пред>
  2. <p>Образец текста здесь...</p>
  3. </pre>

Примечание. Следите за тем, чтобы код внутри <pre>тегов располагался как можно ближе к левому краю; он отобразит все вкладки.

При желании вы можете добавить .pre-scrollableкласс, который установит максимальную высоту 350 пикселей и предоставит полосу прокрутки по оси Y.

Google Prettify

Возьмите тот же <pre>элемент и добавьте два необязательных класса для улучшенного рендеринга.

  1. <p> Пример текста здесь... </p>
  1. <pre class = "красивая печать
  2. линии" >
  3. <p>Образец текста здесь...</p>
  4. </pre>

Загрузите google-code-prettify и просмотрите файл readme, чтобы узнать, как его использовать.

Разметка таблицы

Ярлык Описание
<table> Элемент-обертка для отображения данных в табличном формате
<thead> Элемент-контейнер для строк заголовка таблицы ( <tr>) для маркировки столбцов таблицы
<tbody> Элемент-контейнер для строк таблицы ( <tr>) в теле таблицы
<tr> Элемент-контейнер для набора ячеек таблицы ( <td>или <th>), который отображается в одной строке.
<td> Ячейка таблицы по умолчанию
<th> Специальная ячейка таблицы для меток столбцов (или строк, в зависимости от области действия и размещения)
Должны использоваться внутри<thead>
<caption> Описание или краткая информация о том, что содержится в таблице, особенно полезно для программ чтения с экрана.
  1. <таблица>
  2. <thead>
  3. <tr>
  4. <й> </й>
  5. <й> </й>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <тд> </тд>
  11. <тд> </тд>
  12. </tr>
  13. </tbody>
  14. </таблица>

Параметры таблицы

Имя Учебный класс Описание
По умолчанию Никто Никаких стилей, только столбцы и строки
Базовый .table Только горизонтальные линии между строками
окаймленный .table-bordered Скругляет углы и добавляет внешнюю границу
полосатая зебра .table-striped Добавляет светло-серый цвет фона в нечетные строки (1, 3, 5 и т. д.)
Сжатый .table-condensed Сокращает вертикальные отступы вдвое, с 8 пикселей до 4 пикселей, внутри всех элементов tdиth

Примеры таблиц

1. Стили таблиц по умолчанию

Таблицы автоматически оформляются только с несколькими границами, чтобы обеспечить удобочитаемость и сохранить структуру. С 2.0 .tableкласс обязателен.

  1. < класс таблицы = "таблица" >
  2. </таблица>
# Имя Фамилия Имя пользователя
1 Отметка Отто @мдо
2 Джейкоб Торнтон @толстый
3 Ларри птица @твиттер

2. Полосатый стол

Проявите немного фантазии со своими таблицами, добавив полосу зебры — просто добавьте .table-stripedкласс.

Примечание. В таблицах с чередованием используется :nth-childселектор CSS, который недоступен в IE7–IE8.

  1. < класс таблицы = "таблица полосатая таблица" >
  2. ��
  3. </таблица>
# Имя Фамилия Имя пользователя
1 Отметка Отто @мдо
2 Джейкоб Торнтон @толстый
3 Ларри птица @твиттер

3. Стол с рамкой

Добавьте границы вокруг всей таблицы и закругленные углы для эстетических целей.

  1. < класс таблицы = "таблица с границей таблицы" >
  2. </таблица>
# Имя Фамилия Имя пользователя
1 Отметка Отто @мдо
Отметка Отто @getbootstrap
2 Джейкоб Торнтон @толстый
3 Ларри Птица @твиттер

4. Сжатая таблица

Сделайте свои таблицы более компактными, добавив .table-condensedкласс, чтобы сократить отступы ячеек таблицы вдвое (с 8 пикселей до 4 пикселей).

  1. <table class = "table table-condensed" >
  2. </таблица>
# Имя Фамилия Имя пользователя
1 Отметка Отто @мдо
2 Джейкоб Торнтон @толстый
3 Ларри Птица @твиттер

5. Объедините их все!

Не стесняйтесь комбинировать любые классы таблиц, чтобы добиться разного внешнего вида, используя любой из доступных классов.

  1. <table class = "table table-stripe table-border table-densed" >
  2. ...
  3. </таблица>
ФИО
# Имя Фамилия Имя пользователя
1 Отметка Отто @мдо
2 Джейкоб Торнтон @толстый
3 Ларри Птица @твиттер

Гибкий HTML и CSS

Лучшая часть форм в Bootstrap заключается в том, что все ваши входные данные и элементы управления выглядят великолепно, независимо от того, как вы строите их в своей разметке. Никакого лишнего HTML не требуется, но мы предоставляем шаблоны для тех, кому это нужно.

Более сложные макеты поставляются с краткими и масштабируемыми классами для удобного стиля и привязки событий, поэтому вы будете в курсе каждого шага.

Четыре макета включены

Bootstrap поддерживает четыре типа макетов форм:

  • Вертикально (по умолчанию)
  • Поиск
  • В соответствии
  • Горизонтальный

Различные типы макетов форм требуют некоторых изменений в разметке, но сами элементы управления остаются и ведут себя одинаково.

Состояние управления и многое другое

Формы Bootstrap включают в себя стили для всех элементов управления базовой формы, таких как ввод, текстовое поле и выбор, которые вы ожидаете. Но он также поставляется с рядом пользовательских компонентов, таких как добавленные и предшествующие входные данные и поддержка списков флажков.

Такие состояния, как ошибка, предупреждение и успех, включены для каждого типа элемента управления формы. Также включены стили для отключенных элементов управления.

Четыре вида форм

Bootstrap предоставляет простую разметку и стили для четырех стилей распространенных веб-форм.

Имя Учебный класс Описание
Вертикально (по умолчанию) .form-vertical (не требуется) Сложенные, выровненные по левому краю метки над элементами управления
В соответствии .form-inline Метка с выравниванием по левому краю и элементы управления встроенными блоками для компактного стиля
Поиск .form-search Расширенный текстовый ввод для типичной эстетики поиска
Горизонтальный .form-horizontal Плавающие метки, выровненные по левому и правому краям, на той же строке, что и элементы управления

Примеры форм , использующих только элементы управления формой, без дополнительной разметки

Базовая форма

Умные и легкие дефолты без дополнительной разметки.

Пример текста справки на уровне блока здесь.

  1. < класс формы = "хорошо" >
  2. <label> Имя ярлыка </label>
  3. <input type = "text" class = "span3" placeholder = "Введите что-нибудь..." >
  4. <span class = "help-block" > Пример текста справки на уровне блока здесь. </span>
  5. < класс метки = "флажок" >
  6. <input type = "checkbox" > Проверить меня
  7. </метка>
  8. <button type = "submit" class = "btn" > Отправить </button>
  9. </форма>

Форма поиска

Добавьте .form-searchв форму и .search-queryв input.

  1. <form class = "ну форма-поиск" >
  2. <input type = "text" class = "input-media search-query" >
  3. <button type = "submit" class = "btn" > Поиск </button>
  4. </форма>

Встроенная форма

Добавьте .form-inline, чтобы улучшить вертикальное выравнивание и расстояние между элементами управления формы.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Электронная почта" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. < класс метки = "флажок" >
  5. <input type = "checkbox" > Запомнить меня
  6. </метка>
  7. <button type = "submit" class = "btn" > Войти </button>
  8. </форма>

Горизонтальные формы

Справа показаны все элементы управления формы по умолчанию, которые мы поддерживаем. Вот маркированный список:

  • ввод текста (текст, пароль, электронная почта и т. д.)
  • флажок
  • радио
  • Выбрать
  • множественный выбор
  • ввод файла
  • текстовая область

Помимо текста произвольной формы, любой текстовый ввод HTML5 выглядит так.

Пример разметки

Учитывая приведенный выше пример макета формы, вот разметка, связанная с первой группой ввода и управления. Все классы .control-group, .control-labelи .controlsнеобходимы для стилизации.

  1. < класс формы = "форма-горизонтальная" >
  2. <набор полей>
  3. <legend> Текст легенды </legend>
  4. <div класс = "контрольная группа" >
  5. <label class = "control-label" for = "input01" > Ввод текста </label>
  6. <div класс = "элементы управления" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Вспомогательный текст справки </p>
  9. </div>
  10. </div>
  11. </поля>
  12. </форма>

Состояние контроля формы

В Bootstrap есть стили для поддерживаемых браузером сфокусированных состояний и disabledсостояний. Мы удаляем Webkit по умолчанию outlineи применяем box-shadowвместо него a для :focus.


Проверка формы

Он также включает стили проверки для ошибок, предупреждений и успеха. Чтобы использовать, добавьте класс ошибок в окружающий файл .control-group.

  1. <набор полей
  2. class = "ошибка контрольной группы" >
  3. </поля>
Некоторая ценность здесь
Что-то могло пойти не так
Пожалуйста, исправьте ошибку
Ууууу!
Ууууу!

Расширение элементов управления формой

Подготовить и добавить входные данные

Группы ввода — с добавленным или предшествующим текстом — обеспечивают простой способ дать больше контекста для ваших входных данных. Прекрасные примеры включают знак @ для имен пользователей Twitter или $ для финансов.


Флажки и радио

До версии 1.4 Bootstrap требовал дополнительной разметки вокруг флажков и переключателей, чтобы складывать их. Теперь достаточно просто <label class="checkbox">повторить <input type="checkbox">.

Также поддерживаются встроенные флажки и радио. Просто добавьте .inlineк любому .checkboxили .radio, и все готово.


Встроенные формы и добавление/добавление

Чтобы использовать входные данные в начале или в конце во встроенной форме, обязательно поместите .add-onи inputв той же строке без пробелов.


Текст справки по форме

Чтобы добавить текст справки для входных данных формы, включите встроенный текст справки <span class="help-inline">или текстовый блок справки <p class="help-block">после элемента ввода.

Используйте те же .span*классы из системы сетки для входных размеров.

Вы также можете использовать статические классы, которые не сопоставляются с сеткой, адаптируются к адаптивным стилям CSS или учитывают различные типы элементов управления (например, inputвместо select).

@

Вот текст справки

.00
Вот еще текст справки
$ .00

Примечание. Метки окружают все параметры для гораздо больших областей щелчка и более удобной формы.

Кнопка класс = "" Описание
btn Стандартная серая кнопка с градиентом
btn btn-primary Обеспечивает дополнительный визуальный вес и определяет основное действие в наборе кнопок.
btn btn-info Используется как альтернатива стилям по умолчанию
btn btn-success Указывает на успешное или положительное действие
btn btn-warning Указывает на то, что следует соблюдать осторожность при выполнении этого действия.
btn btn-danger Указывает на опасное или потенциально негативное действие
btn btn-inverse Альтернативная темно-серая кнопка, не привязанная к смысловому действию или использованию

Кнопки для действий

По соглашению кнопки должны использоваться только для действий, а гиперссылки — для объектов. Например, «Скачать» должна быть кнопкой, а «недавняя активность» — ссылкой.

Стили кнопок можно применять к чему угодно с .btnпримененным классом. Однако, как правило, вы захотите применить их только к элементам <a>и .<button>

Кроссбраузерная совместимость

IE9 не обрезает фоновые градиенты на закругленных углах, поэтому мы удаляем его. Связано это с тем, что IE9 дергает отключенные buttonэлементы, отображая текст серым цветом с неприятной текстовой тенью, которую мы не можем исправить.

Несколько размеров

Хотите большие или маленькие пуговицы? Добавьте .btn-large, .btn-smallили .btn-miniдля двух дополнительных размеров.


Отключенное состояние

Для отключенных кнопок добавьте .disabledкласс к ссылкам и disabledатрибут к <button>элементам.

Основная ссылка Ссылка на сайт

Берегись! Здесь мы используем .disabledслужебный класс, аналогичный обычному .activeклассу, поэтому префикс не требуется.

Один класс, несколько тегов

Используйте .btnкласс для элемента <a>, <button>или .<input>

Ссылка на сайт
  1. <a class = "btn" href = "" > Ссылка </a>
  2. <button class = "btn" type = "submit" >
  3. Кнопка
  4. </кнопка>
  5. <input class = "кнопка" type = "кнопка"
  6. значение = "Ввод" >
  7. <input class = "btn" type = "submit"
  8. значение = "Отправить" >

Лучше всего попытаться сопоставить элемент с вашим контекстом, чтобы обеспечить соответствие рендеринга в разных браузерах. Если у вас есть input, используйте <input type="submit">для своей кнопки.

  • рюмка
  • икона-музыка
  • иконка-поиск
  • икона-конверт
  • икона-сердце
  • значок-звезда
  • значок-звезда-пусто
  • значок-пользователь
  • фильм-икона
  • значок-й-большой
  • значок-й
  • значок-th-список
  • значок-ок
  • значок-удалить
  • значок-увеличение
  • значок-уменьшить
  • значок выключен
  • значок-сигнал
  • значок-винтик
  • значок-мусор
  • икона-дом
  • значок-файл
  • значок-время
  • икона-дорога
  • значок-скачать-alt
  • значок загрузки
  • значок загрузки
  • значок-входящие
  • значок-игра-круг
  • значок-повтор
  • значок-обновить
  • значок-список-альт
  • значок-замок
  • значок-флаг
  • значок-наушники
  • значок-громкость-выкл.
  • значок уменьшения громкости
  • значок-громкость-вверх
  • значок-qrcode
  • значок-штрих-код
  • значок-тег
  • значок-теги
  • иконопись
  • значок-закладка
  • иконопись
  • значок-камера
  • значок-шрифт
  • жирный значок
  • иконка-курсив
  • значок-текст-высота
  • значок-текст-ширина
  • значок выравнивания по левому краю
  • выравнивание значков по центру
  • значок-выравнивание-вправо
  • значок-выравнивание-выравнивание
  • список иконок
  • значок-отступ-влево
  • значок-отступ-вправо
  • значок-facetime-видео
  • икона-картина
  • значок-карандаш
  • значок-карта-маркер
  • значок-настроить
  • оттенок значка
  • значок редактирования
  • значок-доля
  • проверка иконок
  • значок-перемещение
  • значок шаг назад
  • значок-быстро-назад
  • значок-назад
  • иконка
  • значок-пауза
  • значок-стоп
  • значок вперед
  • значок-перемотка вперед
  • значок шаг вперед
  • значок-извлечь
  • значок-шеврон-слева
  • значок-шеврон-право
  • значок-плюс
  • значок-минус
  • значок-удалить-знак
  • значок-ок-знак
  • значок-вопросительный знак
  • значок-информация-знак
  • значок-скриншот
  • значок-удалить-круг
  • значок-ok-круг
  • значок бан круг
  • значок-стрелка-влево
  • значок-стрелка-вправо
  • значок-стрелка вверх
  • значок-стрелка вниз
  • icon-share-alt
  • значок-изменить размер-полный
  • icon-resize-small
  • значок-плюс
  • значок-минус
  • значок-звездочка
  • значок-восклицательный знак
  • икона-дар
  • икона
  • икона-огонь
  • значок с открытыми глазами
  • значок-глаз-закрыть
  • значок-предупреждающий знак
  • икона-самолет
  • значок-календарь
  • случайный значок
  • значок-комментарий
  • значок-магнит
  • значок-шеврон-вверх
  • значок-шеврон-вниз
  • значок-ретвит
  • значок-корзина
  • значок-папка-закрыть
  • значок-папка-открыть
  • значок изменения размера по вертикали
  • значок-изменить размер-горизонтальный
  • значок-жесткий диск
  • значок-рупор
  • колокольчик
  • значок-сертификат
  • значок-большой палец вверх
  • значок-палец вниз
  • значок-рука-право
  • значок-рука-левая
  • значок-поднятая рука
  • значок-вниз
  • значок-круг-стрелка-вправо
  • значок-круг-стрелка-влево
  • значок-круг-стрелка вверх
  • значок-круг-стрелка вниз
  • значок-глобус
  • гаечный ключ
  • иконки-задачи
  • значок-фильтр
  • икона-портфель
  • значок-полноэкранный

Построен как спрайт

Вместо того, чтобы делать каждый значок дополнительным запросом, мы скомпилировали их в спрайт — набор изображений в одном файле, который использует CSS для позиционирования изображений с расширением background-position. Это тот же метод, который мы используем на Twitter.com, и он хорошо сработал для нас.

Все классы значков имеют префикс .icon-для правильного пространства имен и области видимости, как и другие наши компоненты. Это поможет избежать конфликтов с другими инструментами.

Glyphicons предоставила нам возможность использовать набор Halflings в нашем наборе инструментов с открытым исходным кодом, если мы предоставим ссылку и ссылку здесь, в документации. Пожалуйста, подумайте о том, чтобы сделать то же самое в своих проектах.

Как использовать

Bootstrap использует <i>тег для всех значков, но у них нет case-класса — только общий префикс. Чтобы использовать, разместите следующий код где угодно:

  1. <i class = "иконка-поиск" ></i>

Существуют также стили для перевернутых (белых) значков, подготовленные с помощью одного дополнительного класса:

  1. <i class = "icon-search icon-white" ></i>

Есть 140 классов на выбор для ваших иконок. Просто добавьте <i>тег с правильными классами, и все готово. Вы можете найти полный список в sprites.less или прямо здесь, в этом документе.

Берегись! При использовании рядом строк текста, например, в кнопках или навигационных ссылках, не забудьте оставить пробел после <i>тега для правильного интервала.

Сценарии использования

Иконки великолепны, но где их использовать? Вот несколько идей:

  • В качестве визуальных элементов для навигации по боковой панели
  • Для навигации, основанной исключительно на значках
  • Чтобы кнопки помогали передать смысл действия
  • Со ссылками для обмена контекстом в месте назначения пользователя

По сути, везде, где вы можете поставить <i>тег, вы можете поставить значок.

Примеры

Используйте их в кнопках, группах кнопок для панели инструментов, навигации или предваряющих входных данных формы.