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

HTML5 doctype

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

<!doctype html>
<html lang="ru">
  ...
</html>

Сначала мобильные

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

Чтобы обеспечить правильный рендеринг и масштабирование при касании, добавьте метатег области просмотра в свой <head>.

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

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

<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 включает в себя адаптивную мобильную первую систему гибкой сетки, которая соответствующим образом масштабирует до 12 столбцов по мере увеличения размера устройства или области просмотра. Он включает предопределенные классы для простых вариантов макета, а также мощные миксины для создания более семантических макетов.

Вступление

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

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

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

Медиа-запросы

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

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

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

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

/* Большие устройства (большие рабочие столы, 1200 пикселей и выше) */
@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)
Поведение сетки	Горизонтально всегда	Свернут, чтобы начать, горизонтально над контрольными точками
Ширина контейнера	Нет (авто)	750px	970px	1170px
Префикс класса	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# столбцов	12
Ширина колонки	Авто	~62px	~81px	~97px
Ширина промежутка	30px (15px с каждой стороны столбца)
Вложенный	Да
Смещения	Да
Порядок столбцов	Да

Пример: с накоплением по горизонтали

Используя один набор классов сетки .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>

Пример: мобильные устройства и компьютеры

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

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

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

.col-xs-6

<!-- Сложите столбцы на мобильном устройстве, сделав одну полную ширину, а другую половину ширины -->
<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>

<!-- Ширина столбцов начинается с 50% на мобильных устройствах и увеличивается до 33,3% на компьютерах -->
<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, если их содержимое не совпадает по высоте -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Пример: перенос столбца

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

.col-xs-9

.col-xs-4
Поскольку 9 + 4 = 13 > 12, этот div шириной в 4 столбца переносится на новую строку как один непрерывный блок.

.col-xs-6
Последующие столбцы продолжаются вдоль новой строки.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Поскольку 9 + 4 = 13 &gt; 12, этот div шириной в 4 столбца переносится на новую строку как один непрерывный блок.</div>
  <div class="col-xs-6">.col-xs-6<br>Последующие столбцы продолжаются вдоль новой строки.</div>
</div>

Адаптивный сброс столбца

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

.col-xs-6 .col-sm-3
Измените размер окна просмотра или посмотрите его на своем телефоне для примера.

.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>

В дополнение к очистке столбца в ответных точках останова вам может потребоваться сбросить смещения, подталкивания или вытягивания. Посмотрите, как это работает, в примере сетки.

<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>

Удаление полей

Удалите промежутки из строки и ее столбцов с помощью класса .row-no-gutters.

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

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

.col-xs-6

<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</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 доступных столбцов).

Уровень 1: .col-sm-9

Уровень 2: .col-xs-8 .col-sm-6

Уровень 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Уровень 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Уровень 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Уровень 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>

Меньше миксинов и переменных

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

Переменные

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

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

Миксины

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

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

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

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

// Создайте дополнительные маленькие столбцы
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Предотвращение сворачивания пустых столбцов
  min-height: 1px;
  // Inner gutter via padding
  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;
  // Inner gutter via padding
  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;
  // Inner gutter via padding
  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	Semibold 36px
h2. Заголовок Bootstrap	Semibold 30px
h3. Заголовок Bootstrap	Semibold 24px
h4. Заголовок Bootstrap	Semibold 18px
h5. Заголовок Bootstrap	Semibold 14px
h6. Заголовок Bootstrap	Semibold 12px

<h1>h1. Заголовок Bootstrap</h1>
<h2>h2. Заголовок Bootstrap</h2>
<h3>h3. Заголовок Bootstrap</h3>
<h4>h4. Заголовок Bootstrap</h4>
<h5>h5. Заголовок Bootstrap</h5>
<h6>h6. Заголовок Bootstrap</h6>

Создавайте более легкий второстепенный текст в любом заголовке с помощью универсального тега <small> или класса .small.

h1. Заголовок Bootstrap Дополнительный текст

h2. Заголовок Bootstrap Дополнительный текст

h3. Заголовок Bootstrap Дополнительный текст

h4. Заголовок Bootstrap Дополнительный текст

h5. Заголовок Bootstrap Дополнительный текст

h6. Заголовок Bootstrap Дополнительный текст

<h1>h1. Заголовок Bootstrap <small>Дополнительный текст</small></h1>
<h2>h2. Заголовок Bootstrap <small>Дополнительный текст</small></h2>
<h3>h3. Заголовок Bootstrap <small>Дополнительный текст</small></h3>
<h4>h4. Заголовок Bootstrap <small>Дополнительный текст</small></h4>
<h5>h5. Заголовок Bootstrap <small>Дополнительный текст</small></h5>
<h6>h6. Заголовок Bootstrap <small>Дополнительный текст</small></h6>

Основная копия

Глобальное значение по умолчанию для Bootstrap font-size составляет 14px, с line-height, равным 1.428. Это применяется к <body> и ко всем абзацам. Кроме того, <p> (абзацы) получают нижнее поле, равное половине их вычисленной высоты строки (по умолчанию 10 пикселей).

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. Первый - это базовый размер шрифта, используемый повсюду, а второй - базовая высота строки. Мы используем эти переменные и некоторую простую математику для создания полей, отступов и высоты линий для всех наших типов и многого другого. Настройте их, и Bootstrap адаптируется.

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

Отмеченный текст

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

Вы можете использовать тег mark для highlight текста.

Вы можете использовать тег mark для <mark>highlight</mark> текста.

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

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

~~Эта строка текста должна рассматриваться как удаленный текст.~~

<del>Эта строка текста должна рассматриваться как удаленный текст.</del>

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

Для обозначения блоков текста, которые больше не актуальны, используйте тег <s>.

~~Эта строка текста считается неверной.~~

<s>Эта строка текста считается неверной.</s>

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

Для указания дополнений к документу используйте тег <ins>.

Эта строка текста должна рассматриваться как дополнение к документу.

<ins>Эта строка текста должна рассматриваться как дополнение к документу.</ins>

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

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

Эта строка текста будет отображаться как подчеркнутая

<u>Эта строка текста будет отображаться как подчеркнутая</u>

Используйте теги выделения HTML по умолчанию с облегченными стилями.

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

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

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

Эту строку текста следует рассматривать как мелкий шрифт.

<small>Эту строку текста следует рассматривать как мелкий шрифт.</small>

Жирный

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

Следующий фрагмент текста выделен полужирным шрифтом.

<strong>выделен полужирным шрифтом</strong>

Курсив

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

Следующий фрагмент текста выделен курсивом.

<em>выделен курсивом</em>

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

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

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

Простое выравнивание текста по компонентам с помощью классов выравнивания текста.

Текст с выравниванием по левому краю.

Выровненный по центру текст.

Текст с выравниванием по правому краю.

Выровненный текст.

Без переноса текста.

<p class="text-left">Текст с выравниванием по левому краю.</p>
<p class="text-center">Выровненный по центру текст.</p>
<p class="text-right">Текст с выравниванием по правому краю.</p>
<p class="text-justify">Выровненный текст.</p>
<p class="text-nowrap">Без переноса текста.</p>

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

Преобразование текста в компонентах с помощью классов капитализации текста.

Текст в нижнем регистре.

Текст в верхнем регистре.

Текст с заглавной буквы.

<p class="text-lowercase">Текст в нижнем регистре.</p>
<p class="text-uppercase">Текст в верхнем регистре.</p>
<p class="text-capitalize">Текст с заглавной буквы.</p>

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

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

Простая аббревиатура

Сокращенное обозначение атрибута слова attr.

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

Инициализм

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

HTML - лучшая вещь, поскольку нарезанный хлеб.

<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

Полное имя
[email protected]

<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>Полное имя</strong><br>
  <a href="mailto:#">[email protected]</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.

Кто-то, известный в Название источника

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Кто-то, известный в <cite title="Название источника">Название источника</cite></footer>
</blockquote>

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

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

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

Кто-то, известный в Название источника

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

Списки

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

Список элементов, в которых порядок не явно имеет значение.

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>

Ordered

Список элементов, в которых порядок имеет явно имеет значение.

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>

Описание

Список терминов с соответствующими описаниями.

Списки описаний: Список описаний идеально подходит для определения терминов.
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> рядом друг с другом. Начинается с накоплением, как стандартные <dl>, но когда панель навигации расширяется, так и поступайте.

Списки описаний: Список описаний идеально подходит для определения терминов.
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>.

Например, <section> следует обернуть как встроенный.

Например, <code>&lt;section&gt;</code> следует обернуть как встроенный.

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

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

Чтобы переключить каталоги, введите cd, а затем имя каталога.
Чтобы изменить настройки, нажмите ctrl + ,

Чтобы переключить каталоги, введите <kbd>cd</kbd>, а затем имя каталога.<br>
Чтобы изменить настройки, нажмите <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Базовый блок

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

<p>Образец текста здесь...</p>

<pre>&lt;p&gt;Образец текста здесь...&lt;/p&gt;</pre>

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

Переменные

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

y = mx + b

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

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

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

Этот текст следует рассматривать как образец вывода компьютерной программы.

<samp>Этот текст следует рассматривать как образец вывода компьютерной программы.</samp>

Базовый пример

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

Необязательный заголовок таблицы.
#	Имя	Фамилия	Имя пользователя
1	Марк	Отто	@mdo
2	Джейкоб	Торнтон	@fat
3	Ларри	Птица	@twitter

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

Полосатые ряды

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

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

Стили для полосатых таблиц задаются с помощью селектора CSS :nth-child, который недоступен в Internet Explorer 8.

#	Имя	Фамилия	Имя пользователя
1	Марк	Отто	@mdo
2	Джейкоб	Торнтон	@fat
3	Ларри	Птица	@twitter

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

Таблицы с границами

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

#	Имя	Фамилия	Имя пользователя
1	Марк	Отто	@mdo
2	Джейкоб	Торнтон	@fat
3	Ларри	Птица	@twitter

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

Строки наведения

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

#	Имя	Фамилия	Имя пользователя
1	Марк	Отто	@mdo
2	Джейкоб	Торнтон	@fat
3	Ларри	Птица	@twitter

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

Сводная таблица

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

#	Имя	Фамилия	Имя пользователя
1	Марк	Отто	@mdo
2	Джейкоб	Торнтон	@fat
3	Ларри Птица		@twitter

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

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

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

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

#	Заголовок столбца	Заголовок столбца	Заголовок столбца
1	Содержание столбца	Содержание столбца	Содержание столбца
2	Содержание столбца	Содержание столбца	Содержание столбца
3	Содержание столбца	Содержание столбца	Содержание столбца
4	Содержание столбца	Содержание столбца	Содержание столбца
5	Содержание столбца	Содержание столбца	Содержание столбца
6	Содержание столбца	Содержание столбца	Содержание столбца
7	Содержание столбца	Содержание столбца	Содержание столбца
8	Содержание столбца	Содержание столбца	Содержание столбца
9	Содержание столбца	Содержание столбца	Содержание столбца

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `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, чтобы они прокручивались по горизонтали на небольших устройствах (менее 768 пикселей). При просмотре на объектах шириной более 768 пикселей вы не увидите никакой разницы в этих таблицах.

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

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

Firefox и наборы полей

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

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

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

#	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы
1	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы
2	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы
3	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы

#	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы
1	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы
2	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы
3	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы

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

Базовый пример

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

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Адрес электронной почты</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Эл. адрес">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Пароль</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Пароль">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">Ввод файла</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Пример текста справки на уровне блока здесь.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Проверить меня
    </label>
  </div>
  <button type="submit" class="btn btn-default">Отправить</button>
</form>

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

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

Инлайновая форма

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

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

Входные и выбранные значения имеют 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">Имя</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Эл. адрес</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Отправь приглашение</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Адрес электронной почты</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Эл. адрес">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Пароль</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Пароль">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Запомнить меня
    </label>
  </div>
  <button type="submit" class="btn btn-default">Войти</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Сумма (в долларах)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Количество">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Перевести наличные</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">Эл. адрес</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Эл. адрес">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Пароль</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Пароль">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Запомнить меня
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Войти</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="Ввод текста">

Группы ввода

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

Текстовое поле

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

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

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

Флажки предназначены для выбора одного или нескольких вариантов в списке, а радиостанции - для выбора одного варианта из многих.

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

Default (stacked)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Вариант первый - это и это&mdash;обязательно укажите, почему это здорово
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Вариант два отключен
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Вариант первый - это и это&mdash;обязательно укажите, почему это здорово
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Вариант два может быть чем-то другим, и его выбор приведет к отмене выбора первого варианта
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" 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>

Статический контроль

Если вам нужно разместить простой текст рядом с меткой формы внутри формы, используйте класс .form-control-static в <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Эл. адрес</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Пароль</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Пароль">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Эл. адрес</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Пароль</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Пароль">
  </div>
  <button type="submit" class="btn btn-default">Подтвердите личность</button>
</form>

Состояние фокуса

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

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

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

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

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

<input class="form-control" id="disabledInput" type="text" placeholder="Здесь отключен ввод..." 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">Отключенный ввод</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Отключенный ввод">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Отключенное меню выбора</label>
      <select id="disabledSelect" class="form-control">
        <option>Отключенный выбор</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Не могу это проверить
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
  </fieldset>
</form>

Состояние только для чтения

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

<input class="form-control" type="text" placeholder="Ввод только для чтения здесь…" readonly>

Текст помощи

Текст справки на уровне блока для элементов управления формы.

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

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

<label for="inputHelpBlock">Ввод с текстом справки</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">Блок текста справки, который переносится на новую строку и может выходить за пределы одной строки.</span>

Состояния проверки

Bootstrap включает стили проверки для состояний ошибки, предупреждения и успеха в элементах управления формы. Чтобы использовать, добавьте к родительскому элементу .has-warning, .has-error или .has-success. Все элементы .control-label, .form-control и .help-block в этом элементе получат стили проверки.

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

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

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

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Успешный ввод</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">Блок текста справки, который переносится на новую строку и может выходить за пределы одной строки.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Ввод с предупреждением</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Ввод с ошибкой</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">
      Флажок с успехом
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Флажок с предупреждением
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Флажок с ошибкой
    </label>
  </div>
</div>

С дополнительными иконками

Вы также можете добавить дополнительные значки обратной связи с добавлением .has-feedback и правой иконки.

Иконки отзывов работают только с текстовыми элементами <input class="form-control">.

Иконки, метки и группы ввода

Ручное позиционирование значков обратной связи требуется для входов без ярлыка и для input groups с надстройкой справа. Вам настоятельно рекомендуется поставить ярлыки для всех входных данных из соображений доступности. Если вы хотите предотвратить отображение меток, скройте их с помощью класса .sr-only. Если вам необходимо обойтись без ярлыков, отрегулируйте значение top иконки обратной связи. Для групп ввода отрегулируйте значение right до соответствующего значения в пикселях в зависимости от ширины вашего дополнения.

Передача значения значка вспомогательным технологиям

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

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

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Успешный ввод</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">(успешно)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Ввод с предупреждением</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">(предупреждение)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Ввод с ошибкой</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">(ошибка)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Группа ввода с успехом</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">(успешно)</span>
</div>

Дополнительные значки в горизонтальной и встроенной формах

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Успешный ввод</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">(успешно)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Группа ввода с успехом</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">(успешно)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Успешный ввод</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">(успешно)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Группа ввода с успехом</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">(успешно)</span>
  </div>
</form>

Необязательные иконки со скрытыми ярлыками `.sr-only`

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

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Скрытая метка</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">(успешно)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Группа ввода с успехом</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">(успешно)</span>
</div>

Размеры элементов управления

Установите высоту с помощью классов, таких как .input-lg, и установите ширину, используя классы столбцов сетки, такие как .col-lg-*.

Размер по высоте

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

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Ввод по умолчанию">
<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>

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

Быстро изменяйте размеры меток и элементов управления формы в .form-horizontal, добавляя .form-group-lg или .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Большая метка</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Большой ввод">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Маленькая метка</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Маленький ввод">
    </div>
  </div>
</form>

Размер колонки

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

<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>

Теги кнопок

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

<a class="btn btn-default" href="#" role="button">Ссылка</a>
<button class="btn btn-default" type="submit">Кнопка</button>
<input class="btn btn-default" type="button" value="Ввод">
<input class="btn btn-default" type="submit" value="Отправить">

Использование в зависимости от контекста

Хотя классы кнопок можно использовать в элементах <a> и <button>, в нашей навигации поддерживаются только элементы <button> и компоненты навигационной панели.

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

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

Кроссбраузерный рендеринг

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

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

Параметры

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

<!-- Стандартная кнопка -->
<button type="button" class="btn btn-default">По умолчанию</button>

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

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

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

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

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

<!-- Сделайте кнопку более низкой, сделав ее похожей на ссылку, сохранив при этом поведение кнопки -->
<button type="button" class="btn btn-link">Ссылка</button>

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

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

Размеры

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

<p>
  <button type="button" class="btn btn-primary btn-lg">Большая кнопка</button>
  <button type="button" class="btn btn-default btn-lg">Большая кнопка</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Кнопка по умолчанию</button>
  <button type="button" class="btn btn-default">Кнопка по умолчанию</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Маленькая кнопка</button>
  <button type="button" class="btn btn-default btn-sm">Маленькая кнопка</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Очень маленькая кнопка</button>
  <button type="button" class="btn btn-default btn-xs">Очень маленькая кнопка</button>
</p>

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

<button type="button" class="btn btn-primary btn-lg btn-block">Блочная кнопка</button>
<button type="button" class="btn btn-default btn-lg btn-block">Блочная кнопка</button>

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

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

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

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

<button type="button" class="btn btn-primary btn-lg active">Основная кнопка</button>
<button type="button" class="btn btn-default btn-lg active">Кнопка</button>

Якорный элемент

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

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

<a href="#" class="btn btn-primary btn-lg active" role="button">Основная ссылка</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Ссылка</a>

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

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

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

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

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Основная кнопка</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Кнопка</button>

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

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

Якорный элемент

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

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

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Основная ссылка</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Ссылка</a>

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

Предупреждение о функциональности ссылок

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

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

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

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

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

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

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

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

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

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

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

Обычное квадратное изображение-заполнитель с закругленными углами

Обычное квадратное изображение-заполнитель, на котором видна только часть круга, описанного вокруг указанного квадрата

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

<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="Закрыть"><span aria-hidden="true">&times;</span></button>

Каретки

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

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

Быстрые флоаты

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

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

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

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

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

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

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix

Легко очистить float, добавив .clearfix к родительскому элементу. Использует микро клиарфикс, который популяризировал Николас Галлахер. Также может использоваться как миксин.

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

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

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

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

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

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

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Программа чтения с экрана и навигация с клавиатуры

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

<a class="sr-only sr-only-focusable" href="#content">Перейти к основному содержанию</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Замена изображения

Используйте класс или миксин .text-hide, чтобы заменить текстовое содержимое элемента фоновым изображением.

<h1 class="text-hide">Пользовательский заголовок</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

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

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

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

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

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

Начиная с версии 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 также существуют, но они устарели в версии v3.2.0. Они примерно эквивалентны .visible-*-block, за исключением дополнительных особых случаев для переключения элементов, связанных с <table>.

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

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

Классы	Браузер	Печать
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Скрытый	Видимый
`.hidden-print`	Видимый	Скрытый

Класс .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

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

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

Компиляция 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;

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

// Use as-is
.masthead {
  background-color: @brand-primary;
}

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

Скафолдинг

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

// Scaffolding
@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)); // ~30px
@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)); // ~20px

@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;

Вендорные миксины

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

Box-sizing

Сбросьте модель бокса ваших компонентов с помощью одного миксина. Чтобы узнать контекст, смотрите эту полезную статью от Mozilla.

Миксин устарел с версии v3.2.0, с появлением Автопрефиксер. Чтобы сохранить обратную совместимость, Bootstrap будет продолжать использовать миксин внутри, пока Bootstrap v4.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Закругленные углы

Сегодня все современные браузеры поддерживают свойство border-radius без префикса. Таким образом, не существует примеси .border-radius(), но 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 (Drop) тени

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

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

Обязательно используйте цвета rgba() в тенях вашего блока, чтобы они максимально плавно сочетались с фоном.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Переходы

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

Примеси устарели начиная с версии v3.2.0, с введением Автопрефиксер. Чтобы сохранить обратную совместимость, Bootstrap будет продолжать использовать миксины внутри, пока Bootstrap v4.

.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); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          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); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          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; // IE9 only
          transform-origin: @origin;
}

Анимации

Единый миксин для использования всех свойств анимации CSS3 в одном объявлении и других миксинов для отдельных свойств.

.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;
  // IE8 filter
  @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 and 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;
}

Градиенты

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

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

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

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

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

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

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

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

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

Вспомогательные миксины

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

Clearfix

Забудьте добавлять class="clearfix" к любому элементу и вместо этого добавьте миксин .clearfix() там, где это необходимо. Использует micro clearfix от Nicolas Gallagher.

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

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

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

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Помощники по размеру

Легче указывать размеры объекта.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Изменяемые размеры текстовых полей

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

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Обрезка текста

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

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Изображения ретина

Укажите два пути к изображениям и размеры изображения @1x и Bootstrap предоставит медиа-запрос @2x. Если у вас много изображений для обслуживания, рассмотрите возможность написания 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;
  }
}

// Usage
.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/`	Скрипты конвертера (переход от Less к Sass)
`test/`	Компиляционные тесты
`templates/`	Манифест пакета компаса
`vendor/assets/`	Sass, JavaScript и файлы шрифтов
`Rakefile`	Внутренние задачи, такие как рейк и конвертация

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

Установка

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

Bootstrap для Sass

CSS

Обзор

HTML5 doctype

Сначала мобильные

Типография и ссылки

Normalize.css

Контейнеры

Система сеток

Вступление

Медиа-запросы

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

Пример: с накоплением по горизонтали

Пример: заполняемый контейнер

Пример: мобильные устройства и компьютеры

Пример: мобильный телефон, планшет, компьютер

Пример: перенос столбца

Адаптивный сброс столбца

Удаление полей

Смещение столбцов

Вложенные колонки

Порядок столбцов

Меньше миксинов и переменных

Переменные

Миксины

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

Типография

Заголовки

h1. Заголовок Bootstrap

h2. Заголовок Bootstrap

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

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

h5. Заголовок Bootstrap

h6. Заголовок Bootstrap

h1. Заголовок Bootstrap Дополнительный текст

h2. Заголовок Bootstrap Дополнительный текст

h3. Заголовок Bootstrap Дополнительный текст

h4. Заголовок Bootstrap Дополнительный текст

h5. Заголовок Bootstrap Дополнительный текст

h6. Заголовок Bootstrap Дополнительный текст

Основная копия

Ведущая основная копия

Создан с Less

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

Отмеченный текст

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

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

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

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

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

Жирный

Курсив

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

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

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

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

Простая аббревиатура

Инициализм

Адреса

Цитаты

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

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

Название источника

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

Списки

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

Ordered

Без стиля

Инлайновый

Описание

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

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

Код

Инлайновый

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

Базовый блок

Переменные

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

Таблицы

Базовый пример

Полосатые ряды

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

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

Необязательные иконки со скрытыми ярлыками `.sr-only`