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

Тип документа HTML5

В Bootstrap используются некоторые HTML элементы и CSS свойства, которые требуют использования типа документа HTML5. Включайте его в начале всех проектов.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Ориентированный в первую очередь на мобильные устройства

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

Для обеспечения правильной визуализации и сенсорного масштабирования, добавьте метатег viewport в ваш <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Вы можете ограничить возможности масштабирования на мобильных устройствах добавляя user-scalable=no в метатег viewport. Это ограничит масштабирование, это означает что пользователи смогут только листать, в результат ваш сайт будет чувствоваться как нативное приложение (без возможности изменения). В любом случае, мы не рекомендуем это, используйте с осторожностью.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Шрифты и ссылки

Bootstrap стандартно устанавливает масштабы отображения элементов, шрифты и стили ссылок. В частности, мы:

Задали background-color: #fff; на body
Используем @font-family-base,@font-size-base и @line-height-base атрибуты как нашу базу шрифтов.
Задали цвет всех ссылок через @link-color и применили подчеркивание ссылок только при :hover.

Эти стили можно найти в scaffolding.less.

Normalize.css

Для улучшения кросс-браузерного отображения, мы используем Normalize.css, проект от Николас Галлахер и Джонатан Нил.

Контейнеры (хранилища)

Bootstrap требует наличия содержащего элемента для обертывания содержимого сайта и размещения нашей сетки. Вы можете выбрать один из двух контейнеров для использования в ваших проектах. Обратите внимание, что из-за padding и больше, ни один контейнер не является вкладываемым.

Используйте .container для отзывчивого контейнера с фиксированной шириной.

<div class="container">
  ...
</div>

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

<div class="container-fluid">
  ...
</div>

Bootstrap включает в себя отзывчивую, mobilefirst систему разметки, которая соответствующим образом масштабирует до 12 столбцов при увеличении размера устройства или экрана просмотра. Она включает в себя предопределенные классы для упрощенной компоновки разметки, а также мощный класс-примесь для генерации более осмысленных (семантических) макетов.

Введение

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

Строки должны быть помещены внутрь .container (fixed-width) или .container-fluid (full-width) для правильного выравнивания и заполнения.
Используйте строки (row) для создания горизонтальных групп столбцов (col).
Содержимое должно быть помещено в столбцы (col), и только столбцы могут быть непосредственными дочерними элементами строк (row).
Для быстрого создания схем сетки доступны предопределенные классы сетки, такие как .row и .col-xs-4. Less смешивания также может быть использован для более осмысленных (семантических) схем.
Столбцы (col) создают внутренние поля (промежутки между содержанием столбцов (col)) с помощью padding. Тогда padding смещается в строках (row) для первого и последнего столбца с помощью отрицательного поля на .row.
Отрицательный отступ это потому, что ниже примеры неактуальны. Это значит, что контент внутри столбцов (col) сетки выровнен с содержимым без сетки.
Столбцы сетки (col) создаются путем указания количества доступных двенадцати столбцов, которые вы хотите развернуть. Например, три равных столбца будут использовать три .col-xs-4.
Если более чем 12 столбцов (col) помещено в одну строку (row), то каждая группа дополнительных столбцов (col) будут объединятся в блок и переноситься на новую строку.
Сетка классов применяется к устройствам с шириной экрана, большими или равными размерам контрольным точкам и переопределяют классы сетки, ориентированные на более мелкие устройства. Поэтому, например, применение какого-либо класса .col-md-* к элементу не только повлияет на его стиль на средних устройствах, но и на большие устройства, если класс .col-lg-* отсутствует.

Посмотрите на примеры применения этих принципов к вашему коду.

Мультимедийные запросы

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

/* Очень маленькие устройства (телефоны, менее чем 768px) */
/* Без медиа запросов, так как это стандарт Bootstrap */

/* Небольшие устройства (планшеты, 768px и выше) */
@media (min-width: @screen-sm-min) { ... }

/* Средние устройства (настольные компьютеры, 992px и выше) */
@media (min-width: @screen-md-min) { ... }

/* Большие устройств (большие компьютеры, 1200px и выше) */
@media (min-width: @screen-lg-min) { ... }

Мы иногда расширяем эти медиа-запросы, что включают max-width для ограничения CSS до более узкого набора устройств.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

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

Посмотрите, как особенности сетки Bootstrap работают на нескольких устройствах с помощью удобной таблицы.

	Очень маленькие устройство Телефоны (<768px)	Малые устройства Планшеты (≥768px)	Средние устройства Настольные (≥992px)	Большие устройства Настольные (≥1200px)
Поведение разметки	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Ширина контейнера	None (auto)	750px	970px	1170px
Класс префикса	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# колонок	12
Ширина колонки	Auto	~62px	~81px	~97px
Промежуточная ширина	30px (15px on each side of a column)
Вкладка	Yes
Отступ	Yes
Выравнивание колонок	Yes

Пример: Сложенные по горизонтали

Используя единственный набор классов сетки .col-md-* вы можете создать базовую сетчатую систему, которая приспосабливается под экран на мобильных и планшетных устройствах (экстра малый в небольшом диапазоне), прежде чем стать горизонтальной на десктопных (средних) устройствах. Поместите столбцы сетки в любой .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Пример: Эластичные блоки

Превратите любую схему сетки фиксированной ширины в макет полной ширины, изменив внешний вид .container на .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Пример: на Мобильных и Настольных устройствах

Не хотите чтобы ваши колонки просто складывались на небольших устройствах? Используйте очень маленькие (xs) или средние (md) классы разметки устройства добавляя .col-xs-* .col-md-* к вашим столбцам. Смотрите пример ниже для лучшего понимания как это работает.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Укажите столбцы (col) для мобильного, это сделает одну полную ширину, а другую половину ширины -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Столбцы (col) начинаются с 50% шириной на мобильных устройствах и увеличиваются до 33,3% на настольных устройствах -->
<!-- Столбцы (col) всегда 50% в ширину, на мобильных и настольных компьютерах -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!--Колонны всегда 50% в ширину, на мобильный и рабочий стол -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Пример: Мобильные, планшетные и настольные устройства

Постройте предыдущий пример, создав еще более динамичные и мощные макеты с помощью классов .col-sm- *

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Дополнительно: очистить XS cols если их содержание не соответствует по высоте -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Пример: Обёртка столбца (col)

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

.col-xs-9

.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-xs-6
Subsequent columns continue along the new line.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Отзывчивый столбец сброса

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

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Добавьте дополнительное clearfix только для требуемого окна просмотра -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

В дополнение к очистке столбца на адаптивных точках, вам может понадобиться сброс offsets, pushes, или pulls. Смотрите это в действии на примере разметкок.

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Смещенные колонки

Переместить колонки направо с помощью .col-md-offset-* класса. Эти классы увеличивают отступ слева столбца * колонки. Например, .col-md-offset-4 сдвигает .col-md-4 пропуская один такой же столбец

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Вы также можете переопределять смещения из нижних уровней сетки с классами .col-*-offset-0.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Вложенные столбцы

Чтобы вложить содержимое в сетку по умолчанию, добавьте новый .row и набор столбцов .col-sm- * в существующий столбец .col-sm- *. Вложенные строки должны включать в себя набор столбцов, которые составляют до 12 или менее (не требуется, чтобы вы использовали все 12 доступных столбцов).

Level 1: .col-sm-9

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Выравнивание колонок

Легко изменить порядок наших встроенных столбцов сетки с классами .col-md-push- * и .col-md-pull- *.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Less смешивания и переменные

В дополнение к предварительно построенным сетчатым классам для быстрых макетов, Bootstrap включает в себя Less переменные и смешивание для быстрого создания собственных простых семантических макетов.

Переменные

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

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Смешивания

Смешивания используются в сочетании с переменных разметки, чтобы образовать семантические CSS для отдельных столбцов (col) разметки.

// Создает оболочку для ряда столбцов (col).make-row(@gutter: @grid-gutter-width) {
  // Затем очистите плавающие столбцы (col)  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Отрицательные поля вложенных строк для выравнивания содержимого столбцов  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Создание дополнительных маленьких столбцов (col).make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Предотвращение разрушения столбцов в случае если пусто  min-height: 1px;
  // Внутреннего желоба через внутренний отступ  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Рассчитать ширину в зависимости от количества столбцов
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Создать колонки
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Предотвращения колонны от разрушения при пустых
  min-height: 1px;
  // Внутреннего водостока через внутренний отступ
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Рассчитать ширину в зависимости от количества столбцов
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Создания малых смещений колонки
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Создания в средних колонн
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Предотвращения колонны от разрушения при пустых
  min-height: 1px;
  // Внутреннего водостока через внутренний отступ
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Рассчитать ширину в зависимости от количества столбцов
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Формирования среднего смещения столбца
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Создать большие колонны
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Предотвращения колонны от разрушения при пустых
  min-height: 1px;
  // Внутреннего водостока через внутренний отступ
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Рассчитать ширину в зависимости от количества столбцов
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Создать большие смещения столбца
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Примеры использования

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

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Заголовки

Доступны все заголовки HTML от <h1> - <h6>. Также доступны классы от .h1 - .h6, на случай если вы захотите изменить стиль заголовков, но вместе с тем хотите, чтобы соседней текст отображался в той же строке.

h1. Bootstrap heading	Semibold 36px
h2. Bootstrap heading	Semibold 30px
h3. Bootstrap heading	Semibold 24px
h4. Bootstrap heading	Semibold 18px
h5. Bootstrap heading	Semibold 14px
h6. Bootstrap heading	Semibold 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Простое создание, вторичного текста в любом заголовке за помощью тега <small> или класса .small.

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Основной текст

Bootstrap глобальный размер шрифта font-size равен 14px, с line-height 1.428. Это применимо к <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

Масштаб шрифтов основана на двух Less переменных в variables.Less: @font-size-base и @line-height-base. Первый это базовый размер шрифта используемый везде, а второй является базовой высоты строки. Мы используем эти переменные и простую арифметику для создания margins, paddings, и line-heights всех наших типов и прочего. Настройте их, чтобы адаптировать Bootstrap.

Встроенные текстовые элементы

Маркированый текст

Для выделения пробега текста благодаря своей актуальности в другом контексте, использовать <mark> tag.

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.

Удаленный текст

Для обозначения блоков текста, которые были удалены использовать <del> tag.

~~This line of text is meant to be treated as deleted text.~~

<del>This line of text is meant to be treated as deleted text.</del>

Зачеркнутый текст

Не для индикации блоков текста, которые утратили свою актуальность использования <s> tag.

~~This line of text is meant to be treated as no longer accurate.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Вставленный текст

Для обозначения дополнения к документу использовать <ins> tag.

This line of text is meant to be treated as an addition to the document.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Подчеркнутый текст

Чтобы подчеркнуть используйте <u> tag.

This line of text will render as underlined

<u>This line of text will render as underlined</u>

Чтобы выделить текст можно использовать HTML-теги по умолчанию, добавив им легкие стили.

Маленький текст

Для уменьшения выделения встроенного текста или блока текста, используйте тег <small>, чтобы задать ему размер, который будет составлять 85% от размера его родительского элемента. Заголовки должны установлены собственные (отдельные) font-size для вложенных элементов <small>.

В качестве альтернативы, можно использовать встроенный элемент с классом .small-где в середине <small>

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

Жирный шрифт

Для выделения фрагмента текста с тяжелым насыщенным шрифтом.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Курсив

Для выделения фрагмента текста курсивом.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Альтернативные элементы

Свободно используйте <b> и <i> в HTML5. Тег <b> предназначен для выделения слова или фразы без передачи дополнительного значения, в то время как <i> в основном для цитирования, технических терминов и т.д.

Классы выравнивания

Легко перестраивать текст для компонентов с выравниванием текста.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Классы трансформации

Transform текста в компонентах с классами текст капитализации.

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Аббревиатуры

Внедрена стилизацию HTML-элементов <abbr> для аббревиатур и акронимов, чтобы показать расширенную их версию при наведении. Аббревиатуры с атрибутом title имеют внизу легкое точечное подчеркивания, а курсор принимает вид знака вопроса при наведении, предоставляя дополнительный контекст для зависания (hover).

Основные аббревиатуры

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

Инициализм

Добавьте .initialism аббревиатуры для легкого уменьшения размера шрифта.

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Адреса

Представьте контактную информацию. Обезопасьте форматирования закончив все строки <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Цитаты

Цитаты нужны для цитирования блока содержимого с другого ресурса в теле вашего документа.

Цитаты по умолчанию

Оберните при помощи <blockquote>-HTML-код-код, который должен быть цитатой. Рекомендуем начинать цитату из <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>

Варианты цитаты

Изменение стиля и содержимого для простых вариаций стандартного <blockquote>.

Именование источника

Добавьте <footer> для указания источника. Заключите имя источника работы в <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Альтернативные дисплеи

Добавьте .blockquote-reverse для выравнивания цитаты справа.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Списки

Неупорядоченный

Список пунктов, когда порядок сортировки not явного значение.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

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

Список пунктов, когда порядок сортировки does явное значение.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Без стиля

Удаление list-style и отступ слева для списка пунктов. Такое удаление применяется только к непосредственных дочерних элементов, то есть необходимо добавлять соответствующий класс в любых вложенных списков.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>...</li>
</ul>

Встроенный

Размещение всех пунктов списка в одну линию при помощи display: inline-block; и небольших внутренних отступов.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

Описание

Список терминов и их описаний.

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

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

Расположение терминов и их описаний бок о бок в линию при помощи <dl>.

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: 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.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Автоматическое сужение

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

Встроенный

Поместите встроенные участки кода с <code>.

For example, <section> should be wrapped as inline.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Пользовательский ввод

Используйте <kbd> чтобы указать ввод, который как правило вводится с клавиатуры.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Основной блок

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

<p>Sample text here...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Вы можете по желанию добавить .pre-scrollable класса, в котором будут определена максимальная высота 350px и обеспечена ось У для полосы прокрутки.

Переменные

Для обозначения переменных используйте <var> тег.

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Пример вывода

Для обозначения блоков пример вывода из программы использовать <samp> тег.

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Простой пример

Для базовой стилизации—легкие отступы и только горизонтальные разделители—добавив базовые классы .table для любых <table>. Это может показаться избыточным, но учитывая широкое распространение использования таблиц для других плагинов как календари и выбор дат, мы решили изолировать пользовательские стили таблицы.

Optional table caption.
#	Имя	Фамилия	Пользователь
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
  ...
</table>

"Зебра"

Используйте .table-striped, чтобы добавить зебру- чередование для любой строки таблицы внутри <tbody>.

Совместимость кроссбраузерности

Полосатые таблицы оформлены через :nth-child CSS селектор, который не доступен в Internet Explorer 8.

#	Имя	Фамилия	Пользователь
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table table-striped">
  ...
</table>

Границы таблицы

Добавьте .table-bordered для границы со всех сторон таблицы и ячеек.

#	Имя	Фамилия	Пользователь
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table table-bordered">
  ...
</table>

Курсор строк

Добавить .table-hover для включения наведение состояние в таблице строки в <tbody>.

#	Имя	Фамилия	Пользователь
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table table-hover">
  ...
</table>

Сокращенная таблица

Добавьте .table-condensed чтобы сделать таблицы более компактными путем срезания внутренних отступов ячейки наполовину.

#	Имя	Фамилия	Пользователь
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-condensed">
  ...
</table>

Контекстные классы

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

Класс	Описание
`.active`	Применяет цвет при наведении на конкретную строку или ячейку
`.success`	Указывает на успешное или позитивное действие
`.info`	Указывает на нейтральные информативные изменения или действия
`.warning`	Указывает на предупреждения, которые могут потребовать внимания
`.danger`	Указывает на опасное или потенциально негативное действие

#	Заголовок столбца	Заголовок столбца	Заголовок столбца
1	Column content	Column content	Column content
2	Column content	Column content	Column content
3	Column content	Column content	Column content
4	Column content	Column content	Column content
5	Column content	Column content	Column content
6	Column content	Column content	Column content
7	Column content	Column content	Column content
8	Column content	Column content	Column content
9	Column content	Column content	Column content

<!-- В строках -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- В ячейках (`td` или `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Передать смысл для ассистивных технологий

Используя цвет, чтобы добавить значение в строке таблицы или отдельной ячейки обеспечивает только визуальную индикацию, которая не будет доведена до пользователей вспомогательных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого содержания (видимый текст в соответствующей строке таблицы/ячейки), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only класс.

Адаптивные таблицы

Можно создать адаптивные таблицы путем преобразования любого .table в .table-responsive, чтобы сделать их прокрученными горизонтально для небольших экранов (до 768px). При просмотре на экране при разрешении больше чем 768px, вы не увидите никакой разницы в этих таблицах.

Вертикальной подрезки/усечения

Адаптивный таблицы, использовать overflow-y: hidden, который загибается любое содержание, которое выходит за пределы нижней или верхней границы таблицы. В частности, это может клип выпадающие меню и другие сторонние виджеты.

Firefox и fieldsets

Firefox имеет некоторые неудобные полей укладки участием width что мешает aдаптивный Таблица. Это не может быть изменено без Firefox на конкретные взломать, что мы не дают в Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Для получения дополнительной информации, прочитайте это переполнение стека ответ.

#	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

#	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Простой пример

Индивидуальные формы управления автоматически получают глобальную стилизованность. Вся текстовая <input>, <textarea> и <select> элементы с и <textarea> установлены к width: 100%; по умолчанию. Преобразуйте этикетки и настройки в .form-group для оптимального интервала.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Не смешивайте группы форм с группами ввода

Не смешивайте форма групп напрямую с группы ввода. Вместо этого, расположите группу с вводом внутри группы формы.

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

Добавить .form-inline формы (которые не должны быть <form>) по левому краю и встроенный блок управления. Это касается только формы, в окнах не менее 768px по ширине.

Может потребоваться нестандартной ширины

Входы и выбирает у width: 100%; применяется по умолчанию в Bootstrap. В встроенных форм, мы сбрасываем, что для width: auto; так несколько элементов управления может находиться на одной линии. В зависимости от вашего макета могут потребоваться дополнительные пользовательские значения ширины.

Всегда добавляйте ярлыки

Программы чтения с экрана будут иметь проблемы со своими формами если Вы не включите метки для каждого входа. Для этих встроенных форм, вы можете спрятать ярлыки, используя .sr-only класс. Существуют и другие альтернативные способы предоставления меток для вспомогательных технологий, таких как aria-label, aria-labelledby или title атрибута. Если ни один из них не присутствует, программы чтения с экрана могут прибегнуть к помощи атрибута placeholder, Если присутствует, то учтите, что использование placeholder в качестве замены для других методов маркировки не рекомендуется.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

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

Используйте Bootstrap предопределенный грид классов, чтобы выровнять метки и группы элементов управления формы в горизонтальном разметка путем добавления .form-horizontal в форме (который не должен быть <form>). При этом изменятся .form-group, чтобы вести себя как грид строк, поэтому нет необходимости для .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Поддерживаемые элементы управления

Примеры стандартных элементов управления поддерживаются на примере формы макета.

Ввод

Наиболее распространенные формы управления, текстовые поля ввода включают поддержку для всех типов HTML5 : text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, и color.

Необходимо объявлять тип поля

Ввод будет полностью оформлен, если их type правильно декларирован.

<input type="text" class="form-control" placeholder="Text input">

Группы форм ввода

Для того, чтобы добавить интегрированный текст или кнопки до и / или после любой текстовый <input>, проверить группу ввода компонентов .

Текстовая область

Форма управления, которая поддерживает несколько строк текста. Изменение rows атрибута при необходимости.

<textarea class="form-control" rows="3"></textarea>

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

Чекбоксы для выбора одного или нескольких вариантов, в то время как радиокнопки для выбора единственного варианта из многих.

Деактивированные чекбоксы и радиокнопки видимые, но для обеспечения «недействующего» курсора при наведении на содержимое <label>, вам необходимо добавить класс .disabled в родителя с классом .radio, .radio-inline, .checkbox, или .checkbox-inline.

По умолчанию (stacked)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Встроенные галочки и радио

Используйте .checkbox-inline или .radio-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>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Чекбоксы и радио без надписи

Если у вас есть текст внутри <label>, ввода позиционируется как вы ожидаете. В настоящее время работает только на невстроенной чекбоксы и радио. Не забудьте еще обеспечить некоторую форму этикетки для вспомогательных технологий (например, использование aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Подборки

Обратите внимание, что многие собственные меню выбора, а именно в Safari и Chrome, имеют закругленные углы, которые нельзя изменить с помощью свойств border-radius .

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Для <select> контролем multiple атрибут, различные варианты отображаются по умолчанию.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Статическое управление

Когда вам необходимо разместить обычный текст рядом с <label> внутри <form>, используйте <p> с классом .form-control-static вместо <input'а>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Фокус состояние

Мы удаляем по умолчанию outline стили на формы управления и применяем box-shadow на его место для :focus.

Демо `:focus` состояние

Приведенный выше пример ввода использует пользовательские стили в документации, чтобы продемонстрировать :focus состояние на .form-control.

Неактивное состояние

Добавить disabled логический атрибут на входе для предотвращения взаимодействия с пользователем. Входы с ограниченными возможностями светлее и добавить not-allowed курсор.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Отключенные наборы полей

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

Предостережение о функциональности ссылочной `<a>`

По умолчанию браузеры будут лечить все родные элементы управления (<input>, <select> и <button> элементы) внутри <fieldset disabled> как отключить, предотвращение клавиатуры и действия мыши на них. Однако, если ваша форма также содержит <a ... class="btn btn-*"> элемента, только с учетом стиля pointer-events: none. Как отмечалось в разделе про неактивное состояние для кнопок (и в частности, в подразделе для якорных элементов), этот CSS собственность еще не стандартизировано и не полностью поддерживаются в Opera 18 и ниже, или в Internet Explorer 11 и не допустить клавиатуры пользователям возможность сосредоточиться или активировать эти ссылки. Поэтому, чтобы быть в безопасности, используйте настраиваемые JavaScript отключить такие ссылки.

Совместимость кроссбраузерности

Bootstrap применят эти стили ко всем браузерам. Internet Explorer 11 и ниже в действительности не поддерживают аттрибут disabled на <fieldset>. Используйте измененный JavaScript для ограничения филдсета в этих браузерах.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Как readonly состояние

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

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Текст справки

Блок уровня справки для формы управления.

Связывая текст справки с форма контроля

Текст справки должен быть явно связан с элементом управления он относится к используя aria-describedby атрибута. Это будет гарантировать, что вспомогательные технологии, такие как программы чтения с экрана – объявим этот текст, когда пользователь фокусируется и попадает в контроль.

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

Conveying validation state to assistive technologies and colorblind users

Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.

Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <label> text itself (as is the case in the following code example), include a Glyphicon (with appropriate alternative text using the .sr-only class - see the Glyphicon examples), or by providing an additional help text block. Specifically for assistive technologies, invalid form controls can also be assigned an aria-invalid="true" attribute.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

With optional icons

You can also add optional feedback icons with the addition of .has-feedback and the right icon.

Feedback icons only work with textual <input class="form-control"> elements.

Icons, labels, and input groups

Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.

Conveying the icon's meaning to assistive technologies

To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the .sr-only class and explicitly associated with the form control it relates to using aria-describedby. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <label> associated with the form control.

Although the following examples already mention the validation state of their respective form controls in the <label> text itself, the above technique (using .sr-only text and aria-describedby) has been included for illustrative purposes.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Optional icons in horizontal and inline forms

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Optional icons with hidden `.sr-only` labels

If you use the .sr-only class to hide a form control's <label> (rather than using other labelling options, such as the aria-label attribute), Bootstrap will automatically adjust the position of the icon once it's been added.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Control sizing

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

Height sizing

Create taller or shorter form controls that match button sizes.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Horizontal form group sizes

Quickly size labels and form controls within .form-horizontal by adding .form-group-lg or .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Column sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Теги кнопки

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

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Контекстная специфика использования

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

Ссылки, действующие как кнопки

Если <a> элементы используются в качестве кнопки запуска на странице функциональность, вместо того, чтобы переходить на другой документ или раздел в пределах текущей страницы – они также должны быть даны соответствующие role="button".

Рендеринг кросс-браузера

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

Среди прочего, есть ошибка Firefox что мешает нам установить line-height на <input> базовой кнопки, заставляя их не точно соответствовать с высотой других кнопок в Firefox.

Опции

Используйте любой из доступных типов кнопок, чтобы быстро создать стильную кнопку.

<!-- Стандартная кнопка -->
<button type="button" class="btn btn-default">Default</button>

<!-- Обеспечивает дополнительную визуальный вес и идентифицирует основное действие в набор кнопок -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Указывает на успешное или позитивные действия -->
<button type="button" class="btn btn-success">Success</button>

<!-- Контекстуальные кнопка для информационных сообщений о сигналах тревоги -->
<button type="button" class="btn btn-info">Info</button>

<!-- Указывает, что следует проявлять осторожность с этим действием -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Указывает на опасное или потенциально негативное действие -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Преуменьшить роль кнопки, сделав его похожим на ссылку, сохраняя поведение кнопки -->
<button type="button" class="btn btn-link">Link</button>

Передать смысл для ассистивных технологий

Используя цвет, чтобы добавить к кнопке обеспечивает только визуальную индикацию, которая не будет доведена до пользователей вспомогательных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого содержания (видимый текст кнопки), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only класс.

Размеры

Больше или малые кнопки? Добавьте .btn-lg, .btn-sm, или .btn-xs для дополнительных размеров.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Создать кнопки—те на уровне блоков, которые охватывают всю ширину родителя— путем добавления .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Активное состояние

Кнопок будет нажата (на темном фоне, темные границы, и вставка тень) когда активный. Для <button> элементы это делается с помощью :active. Для <a> элементов, это делается с .active. Однако, вы можете использовать .active на <button> (и включать aria-pressed="true" атрибута) если Вам необходимо скопировать активную состояние программно.

Элемент кнопки

Нет необходимости добавлять :active, поскольку это псевдо-класс, но если вам необходимо предоставить кнопки такого же вида, добавляйте .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Элементы якоря

Добавьте класс .active ссылок <a> в виде кнопки.

Primary link Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Неактивное состояние

Создайте неактиные кнопки, с применением прозрачности opacity.

Элемент кнопки

Добавьте disabled атрибут к <button> кнопке.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Совместимость кроссбраузерности

Если вы добавите disabled атрибут к <button>, Internet Explorer 9, то внизу будет отражен серый текст с неприятной текстовой тенью, которую мы не можем исправить.

Элементы якоря

Добавьте класс .disabled ссылок <a> в виде кнопки.

Primary link Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Мы используем .disabled как поддержку класса здесь, типичную для общего .active класса, так что префикс не требуется.

Нюанс ссылки функциональность

Этот класс использует pointer-events: none, чтобы попытаться отключить функциональность ссылке из <a>, но, что CSS недвижимость до сих пор не стандартизирован и не полностью поддерживается в Опере 18 и ниже, или в Internet Explorer 11. Кроме того, даже в браузерах, которые поддерживают pointer-events: none, навигация с помощью клавиатуры остается неизменной, что означает, что зрячие пользователи клавиатуры и пользователей технологий, по-прежнему сможете активировать эти ссылки. Поэтому, чтобы быть в безопасности, используйте настраиваемые JavaScript отключить такие ссылки.

Адаптивные изображения

Изображения в Bootstrap 3 могут быть изготовлены aдаптивный-фрэндли через добавление .img-responsive класс. Это касается max-width: 100%;, height: auto; и display: block; чтобы изображения хорошо масштабировались до родительского элемента.

Для центрирования изображений, которые используют .img-responsive класс используйте вспомогательный класс .center-block вместо .text-center. Дополнительную информацию об использовании вспомогательных классов смотрите в разделе "вспомогательные классы"

SVG изображения и IE 8-10

В IE 8-10, SVG изображений с .img-responsive несоизмеримо больше размера. Чтобы исправить это, добавьте width: 100% \9; В случае необходимости. Bootstrap не применяется автоматически, так как он вызывает осложнения в другие форматы изображений.

<img src="..." class="img-responsive" alt="Responsive image">

Фигурные изображения

Добавьте классы к <img> элементу чтобы легко стилизовать изображения в любом проекте.

Совместимость кроссбраузерности

Имейте в виду, что Internet Explorer 8 блокирует поддержку для закругленных краев.

A generic square placeholder image with rounded corners

A generic square placeholder image where only the portion within the circle circumscribed about said square is visible

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Контекстные цвета

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

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Работа со спецификой

Иногда акцент класса не может быть применен в силу специфики другого селектора. В большинстве случаев, необходимо заключить текст в <span> с классом.

Передать смысл для ассистивных технологий

Используя цвет, чтобы добавить смысл только обеспечивает визуальную индикацию, которая не будет доведена до пользователей ассистивных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого Контента (контекстные цвета используются только для усиления смысла, что уже присутствует в тексте/разметки), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only класс.

Контекстный фон

Как и цвет текста контекстных классов, легко устанавливать фон элемента к любому контекстному классу. Якорные компоненты будут темнеть при наведении, как и текстовые классы.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Работа со спецификой

Иногда контекстные фоновые классы не могут быть применены в силу специфики другого селектора. В большинстве случаев, необходимо заключить текст в <div> с классом.

Передать смысл для ассистивных технологий

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

Значки закрытия

Используйте общий значок закрытия для модальных окон или замечаний.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Значок меню

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

<span class="caret"></span>

Быстрое выравнивание

Выравнивайте элементы слева или справа, с помощью соответствующих классов. Включено !important, чтобы избежать некоторых проблем. Классы также могут использоваться в качестве mixins.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Классов
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Использования в качестве примеси
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Центровка содержимого блоков

Установите для элемента блочное отображения через display: block, и отражение по центру через margin. Такая установка является доступной в качестве класса и реализован.

<div class="center-block">...</div>

// Класса
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Использования в качестве mixin
.element {
  .center-block();
}

Clearfix

Просто float с добавлением .clearfix родительский элемент. Здесь используется микро clearfix, предоставленный Nicolas Gallagher. Это также может применяться в качестве реализован.

<!-- Использование как класс -->
<div class="clearfix">...</div>

Сам // миксин
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Использования в качестве mixin
.element {
  .clearfix();
}

Отображения и скрытия содержимого

Чтобы скрыть или отобразить элемент (в том числе, для программ чтения с экрана) используйте классы .show и .hidden. Эти классы используют !important, чтобы избежать специфических конфликтов, подобно быстрому выравниванию. Они являются доступными для блочного уровня переключения. Они также могут использоваться в качестве mixins.

Класс .hide является доступным, но он не всегда обрабатывается программами чтения экранов и является устаревшим начиная с v3.0.1. Используйте вместо него класс .hidden или .sr-only.

Кроме этого, .invisible может использоваться для переключения лишь видимости элемента, то есть его display не изменен, и этот элемент все еще может влиять на работу документа.

<div class="show">...</div>
<div class="hidden">...</div>

// Классов
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Использования в качестве примеси
.element {
  .show();
}
.another-element {
  .hidden();
}

Для чтения с экрана и клавиатуры содержание навигации

Скрыть элемент на всех устройствах кроме чтения с экрана c .sr-only. Объединить .sr-only с .sr-only-focusable чтобы показать элемент снова, когда он сосредоточены (например, с помощью клавиатуры-только пользователь). Необходимые для следующих.доступность лучших практик. Может также использоваться как Mixins.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Использования в качестве mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Замещение изображений

Применяйте класс .text-hide или реализован для замены текстового элемента контента фоновым изображением.

<h1 class="text-hide">Custom heading</h1>

// Использования в качестве mixin
.heading {
  .text-hide();
}

Для более быстрой мобильных устройств развития, использовать эти классы для отображения и скрытия содержимого с устройства с помощью медиа запросов. Кроме того, включены утилиты классов для переключения содержимого при печати.

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

Доступные классы

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

	Очень маленькие устройство Телефоны (<768px)	Малые устройства Планшеты (≥768px)	Средние устройства Настольные (≥992px)	Большие устройства Настольные (≥1200px)
`.visible-xs-*`	Visible	Hidden	Hidden	Hidden
`.visible-sm-*`	Hidden	Visible	Hidden	Hidden
`.visible-md-*`	Hidden	Hidden	Visible	Hidden
`.visible-lg-*`	Hidden	Hidden	Hidden	Visible
`.hidden-xs`	Hidden	Visible	Visible	Visible
`.hidden-sm`	Visible	Hidden	Visible	Visible
`.hidden-md`	Visible	Visible	Hidden	Visible
`.hidden-lg`	Visible	Visible	Visible	Hidden

Как в v3.2.0, .visible-*-* классы для каждой точки в трех вариациях, по одному для каждой CSS display Значение свойства перечислены ниже.

Группа классов	CSS `display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Так, для дополнительной маленькой(xs) экранов, например, доступны .visible-*-* классы: .visible-xs-block, .visible-xs-inline, и .visible-xs-inline-block.

Классы .visible-xs, .visible-sm, .visible-md, и .visible-lg также существуют, но deprecated нежелателен к v3.2.0.Они примерно эквивалентно .visible-*-block, за исключением дополнительных особых случаях для переключения <table>- связанных элементов.

Классы печати

Как и обычные адаптивные классы, используйте их для переключения содержания для печати.

Классы	Браузер	Печать
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Hidden	Visible
`.hidden-print`	Visible	Hidden

Класс .visible-print также существует, но устаревшим по состоянию на v3.2.0. Это примерно эквивалентно .visible-print-block, за исключением дополнительных особых случаях для <table>-связанных элементов.

Тестовые сценарии

Измените размер вашего браузера или загрузки на различные устройствах для проверки реагирования служебных классов.

Видимый на...

Зеленые галочки указывают, что элемент видимый в вашем текущем экране.

Очень маленькие ✔ Видимый на x-small

Маленькие ✔ Видимый на small

Средние ✔ Видимый на medium

Большие ✔ Видимый на large

Очень малые и малые ✔ Видимый на x-small и small

Средние и большие ✔ Видимый на medium и large

Очень малые и средние ✔ Видимый на x-small и medium

Малые и большие ✔ Видимый на small и large

Очень малые и большие ✔ Видимый на x-small и large

Малые и средние ✔ Видимый на small и medium

Скрытый на...

Здесь, зеленые галочки указывают, что элемент скрыт в вашем текущем экране.

Очень маленькие ✔ Скрытый на x-small

Маленькие ✔ Скрытый на small

Средние ✔ Скрытый на medium

Большие ✔ Скрытый на large

Очень малые и малые ✔ Скрытый на x-small и small

Средние и большие ✔ Скрытый на medium и large

Очень малые и средние ✔ Скрытый на x-small и medium

Малые и большие ✔ Скрытый на small и large

Очень малые и большие ✔ Скрытый на x-small и large

Малые и средние ✔ Скрытый на small и medium

Bootstrap's CSS построен на Less, препроцессор с дополнительной функциональностью, как переменных, mixins, и функции для компиляции CSS. Тем, кто хочет использовать источник Less файлы вместо наших скомпилированных файлов CSS могут воспользоваться многочисленными переменными и mixins которые мы используем во всем фреймверке.

Переменные разметки и mixins охвачены в Система сеток раздел.

Компиляция Bootstrap

Bootstrap может быть использован в по меньшей мере двумя способами: компилированным CSS или с источником Less файлов. Для компиляции Less файлов, обратитесь для начала работы раздела для того, как настроить среду разработки для запуска через необходимые команды.

Инструменты сторонних компиляций могут работать с Bootstrap, но они не поддерживается нашей основной командой.

Переменные

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

Цвета

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

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

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

// Использовать как есть
.masthead {
  background-color: @brand-primary;
}

// Переназначить переменные Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Каркас

Количество переменных для быстрой настройки основных элементов структуры вашего сайта.

// Лесов
@body-bg:    #fff;
@text-color: @black-50;

Ссылки

Легко делать стиль ваших ссылок с нужным цветом только с одним значением.

// Переменные
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Использования
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Обратите внимание, что @link-hover-color использует функцию, другого удивительного инструмента Less, чтобы автоматически создавать право изменять цвет при наведении. Вы можете использовать darken, lighten, saturate, и desaturate.

Типографика

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

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30 пикселей
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~Значение 24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20 пикселей

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Иконки

Две быстрые переменные для настройки размещения и определения названий файлов значков.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Компоненты

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

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Поставщики mixin

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

Размерность блоков

Сброс компонентов box model в одном реализован. Чтобы понять контекст, посмотрите это полезные статьи от Mozilla.

В mixin - это устаревшим как v3.2.0, с введением Autoprefixer. Для сохранения обратной совместимости, Bootstrap продолжат использовать mixin внутренне до Bootstrap В4.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Сафари - < = 5
     -moz-box-sizing: @box-model; // Для Firefox <= 19
          box-sizing: @box-model;
}

Скругление углов

Сегодня все современные браузеры поддерживают безпрефиксные свойства border-radius. И поэтому, сейчас нет .border-radius() mixin, но Bootstrap делает включения ярлыков для быстрого закругления двух углов с определенных сторон объекта.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Тени

Если ваша целевая аудитория использует новейшие версии современных браузеров и устройств, убедитесь, что вы в себя используете свойство box-shadow Если вы нуждаетесь в поддержке устройств, работающих на предыдущих версиях Android (перед-v4) и iOS (перед-iOS 5), используйте устаревшим для включения необходимых префиксов -webkit.

устаревшим mixin по состоянию на v3.1.0, изначально Bootstrap официально не поддерживает устаревшие платформы, не поддерживающие стандартные свойства. Для сохранения обратной совместимости, Bootstrap будет продолжать использовать mixin до тех пор, пока внутренне до Bootstrap v4.

Не забудьде использовать цвета в режиме rgba() в ваших блоках тени (box shadows), ибо в таком случае они наименее проблематично сливаются с фоном.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // прошивкой <4.3 и Android <4.1
          box-shadow: @shadow;
}

Переходы

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

В mixin-это устаревшим как v3.2.0, с введением Autoprefixer. Для сохранения обратной совместимости, Bootstrap продолжат использовать миксины внутренне до Bootstrap В4.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Преобразования

Вращение, масштабирование, перевод (перенос), или наклон любого объекта.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // ИЕ9 только
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // ИЕ9 только
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // ИЕ9 только
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // См. https://github.com/twbs/bootstrap/issues/4885; ИЕ9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // ИЕ9 только
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // ИЕ9 только
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // ИЕ9 только
          transform-origin: @origin;
}

Анимации

Одиночный mixin для использования всех свойств анимации CSS3 в одном объявлении, а другие mixins - для индивидуальных свойств.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Прозрачность

Установите непрозрачность для всех браузеров и предоставьте отдельный filter для IE8.

.opacity(@opacity) {
  opacity: @opacity;
  Фильтр // ИЕ8
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Текст заполнения

Предоставьте контекст для элементов управления формы внутри каждого поля.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Для Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari и Chrome
}

Столбцы

Генерируйте колонки через CSS внутри одиночного элемента.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Градиенты

Легко превратить любые два цвета в градиенты фона. Можно сделать еще больше - установить направление, используя три цвета, или используя радиальный градиент. С одиночным mixin вы получите все перфиксированный синтаксис, что вам надо.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Вы также можете указать угол стандартного двокольора, линейный градиент:

#gradient > .directional(#333; #000; 45deg);

Если вам нужен стиль градиента туманны-полосы, то это легко, также. Просто определите единичный цвет, и будете иметь накладку полупрозрачных белых линий.

#gradient > .striped(#333; 45deg);

Поднимите ставки и используйте вместо три цвета. Установите первый цвет, второй цвет, цветовую остановку второго цвета (процентное значение, например 0.25%), и третий цвет с этими mixins:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Внимание! Если вам когда-нибудь понадобится удалить градиент, не забудьте удалить все IE-специальные filter которые вы могли добавить. Вы можете это сделать с помощью .reset-filter() mixin рядом с background-image: none;.

Утилиты mixin

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

Clearfix

Забудьте про добавление class="clearfix" к каждому элементу, а вместо этого добавьте mixin .clearfix() в случае необходимости. В этом примере используется микро clearfix созданный Николас Галлахер.

// Миксин
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Использования
.container {
  .clearfix();
}

Горизонтальное центрирование

Быстро центруйте любой элемент внутри его родителя Требуется width или max-width должны быть установленны

// Миксин
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Использования
.container {
  width: 940px;
  .center-block();
}

Калибровка подсказок

Стало проще указывать размеры объектов.

// Миксины
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Использования
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Изменение размера textareas

Легко настроить параметры калибровки к любой текстовой области (textarea), или любого другого элемента. По умолчанию для нормального поведения браузеров (both).

.resizable(@direction: both) {
  // Варианты: горизонтальный, вертикальный, оба
  resize: @direction;
  // Исправить сафари
  overflow: auto;
}

Усеченный текст

Легко сократить текст, с тремя точками, с помощью одиночного mixin. При этом необходимо, чтобы элемент был стилизован как block или как inline-block

// Миксин
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Использования
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Retina изображения

Укажите два пути изображения и @1х размеры изображения, а Bootstrap даст @2х медиа запросов. Если у вас есть много изображений, чтобы служить, напишите свой рисунок сетчатки CSS вручную, за один медиа запрос.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Использования
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

В то время как Bootstrap построен на Less, он также имеет официальный Sass порт. Мы поддерживаем его в отдельном репозиторий GitHub и обновляем через скрипт преобразования.

Что включено

Поскольку порт Sass имеет отдельный репо и служит несколько иной аудитории, содержимое проекта сильно отличается от основного проекта Bootstrap. Это гарантирует, что порт Sass является совместимым с мнгоими Sass-системами.

Путь	Описание
`lib/`	Ruby gem код (Sass конфигурация, Rails и Compass интеграция)
`tasks/`	Скрипты конвертеры (turning upstream Less to Sass)
`test/`	Тесты компиляции
`templates/`	Compass пакет манифеста
`vendor/assets/`	Sass, JavaScript, и файлы шрифтов
`Rakefile`	Внутренние задачи, такие как rake и convert

Посетите Sass порты GitHub репозитория чтобы увидеть эти файлы в действии.

Установка

Для получения информации о том, как установить и использовать Bootstrap для Sass, обратитесь GitHub репозиторий readme. Это наиболее современный источник, он включает в себя информацию для использования с Rails, Compass, и типовым проектам Sass.

Bootstrap для Sass

CSS

Обзор

Тип документа HTML5

Ориентированный в первую очередь на мобильные устройства

Шрифты и ссылки

Normalize.css

Контейнеры (хранилища)

Система сеток (Блочная система)

Введение

Мультимедийные запросы

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

Пример: Сложенные по горизонтали

Пример: Эластичные блоки

Пример: на Мобильных и Настольных устройствах

Пример: Мобильные, планшетные и настольные устройства

Пример: Обёртка столбца (col)

Отзывчивый столбец сброса

Смещенные колонки

Вложенные столбцы

Выравнивание колонок

Less смешивания и переменные

Переменные

Смешивания

Примеры использования

Типографика

Заголовки

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

Основной текст

Ведущий основной текст

Построение с использованием Less

Встроенные текстовые элементы

Маркированый текст

Удаленный текст

Зачеркнутый текст

Вставленный текст

Подчеркнутый текст

Маленький текст

Жирный шрифт

Курсив

Альтернативные элементы

Классы выравнивания

Классы трансформации

Аббревиатуры

Основные аббревиатуры

Инициализм

Адреса

Цитаты

Цитаты по умолчанию

Варианты цитаты

Именование источника

Альтернативные дисплеи

Списки

Неупорядоченный

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

Без стиля

Встроенный

Описание

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

Автоматическое сужение

Код

Встроенный

Пользовательский ввод

Основной блок

Переменные

Пример вывода

Таблицы

Простой пример

"Зебра"

Совместимость кроссбраузерности

Демо `:focus` состояние

Предостережение о функциональности ссылочной `<a>`

Optional icons with hidden `.sr-only` labels