Обзор

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

HTML5 doctype

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

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

Мобильный первый

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

Для обеспечения правильного отображения и масштабирования касанием, добавьте мета-тег viewport в ваш <head>. 

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

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

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

Bootstrap устанавливает базовые глобальные стили отображения, типографики и ссылок. Конкретно мы:

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

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

Normalize.css

Для улучшенного кроссбраузерного отображения мы используем Normalize.css, проект от Nicolas Gallagher и Jonathan Neal.

Контейнеры

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

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

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

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

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

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

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

Введение

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

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

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

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

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

 /* Очень маленькие устройства (телефоны, меньше 768px) */
  /* Нет медиа-запроса, так как это по умолчанию в Bootstrap */ /* Маленькие
  устройства (планшеты, 768px и больше) */ @media (min-width: @screen-sm-min) {
  ... } /* Средние устройства (десктопы, 992px и больше) */ @media (min-width:
  @screen-md-min) { ... } /* Большие устройства (большие десктопы, 1200px и
  больше) */ @media (min-width: @screen-lg-min) { ... }

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

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

Опции сетки

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

Очень маленькие устройства Телефоны (<768px) Маленькие устройства Планшеты (≥768px) Средние устройства Десктопы (≥992px) Большие устройства Десктопы (≥1200px)
Поведение сетки Горизонтально всегда Свернуто в начале, горизонтально выше точек останова
Ширина контейнера Нет (авто) 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-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.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 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.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
.col-xs-6 .col-sm-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
Измените размер вашего viewport или проверьте на телефоне для примера.
.col-xs-6 .col-sm-3
.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 только для требуемого viewport -->
    <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>

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

Перемещайте колонки вправо, используя классы .col-md-offset-*. Эти классы увеличивают левый margin колонки на * колонок. Например, .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-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>

Миксины и переменные Less

В дополнение к предустановленным классам сетки для быстрых макетов, 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); } // Отрицательный margin вложенных строк для выравнивания
  контента колонок .row { margin-left: (@gutter / -2); margin-right: (@gutter /
  -2); } } // Генерирует очень маленькие колонки .make-xs-column(@columns;
  @gutter: @grid-gutter-width) { position: relative; // Предотвращает
  схлопывание колонок при пустоте min-height: 1px; // Внутренний желоб через
  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; // Внутренний желоб через
  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; //
  Внутренний желоб через 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 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

 Полужирный 36px

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

 Полужирный 30px

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

 Полужирный 24px

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

 Полужирный 18px
h5. Заголовок Bootstrap
 Полужирный 14px
h6. Заголовок Bootstrap
 Полужирный 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 составляет 14px, с line-height равным 1.428. Это применяется к <body> и всем параграфам. Кроме того, <p> (параграфы) получают нижний отступ, равный половине их вычисленной высоты строки (10px по умолчанию).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. 

  <p>...</p>

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

Сделайте параграф выделяющимся, добавив .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. 

  <p class="lead">...</p>

Построено с Less

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

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

Выделенный текст

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

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

 Вы можете использовать тег mark для
  <mark>выделения</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="атрибут">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
Т: (123) 456-7890
Полное имя
first.last@example.com 
  <address>
    <strong>Twitter, Inc.</strong><br />
    1355 Market Street, Suite 900<br />
    San Francisco, CA 94103<br />
    <abbr title="Телефон">Т:</abbr> (123) 456-7890
  </address>

  <address>
    <strong>Полное имя</strong><br />
    <a href="mailto:#">first.last@example.com</a>
  </address>

Блокцитаты

Для цитирования блоков контента из другого источника в вашем документе.

Блокцитата по умолчанию

Оберните <blockquote> вокруг любого HTML как цитату. Для прямых цитат мы рекомендуем <p>.

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

  <blockquote>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
      erat a ante.
    </p>
  </blockquote>

Варианты блокцитаты

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

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

Добавьте <footer> для идентификации источника. Оберните название исходной работы в <cite>.

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

Кто-то известный в Название источника 
  <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>

Нумерованный

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. 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. В более узких viewport они изменятся на стандартную сложенную компоновку.

Код

Встроенный

Оберните встроенные фрагменты кода в <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, который установит максимальную высоту 350px и предоставит вертикальную полосу прокрутки.

Переменные

Для обозначения переменных используйте тег <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 Содержимое столбца Содержимое столбца Содержимое столбца 
  <!-- На строках -->
  <tr class="active">
    ...
  </tr>
  <tr class="success">
    ...
  </tr>
  <tr class="warning">
    ...
  </tr>
  <tr class="danger">
    ...
  </tr>
  <tr class="info">
    ...
  </tr>

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

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

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

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

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

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

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

Firefox и fieldsets

Firefox имеет некоторое неудобное стилизование fieldset, связанное с 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">Email адрес</label>
      <input
        type="email"
        class="form-control"
        id="exampleInputEmail1"
        placeholder="Email"
      />
    </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>) для выровненных по левому краю и встроенно-блочных элементов управления. Это применяется только к формам в viewport, которые имеют ширину не менее 768px.

Может потребовать пользовательских ширин

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

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

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

  <form class="form-inline">
    <div class="form-group">
      <label for="exampleInputName2">Имя</label>
      <input
        type="text"
        class="form-control"
        id="exampleInputName2"
        placeholder="Джейн Доу"
      />
    </div>
    <div class="form-group">
      <label for="exampleInputEmail2">Email</label>
      <input
        type="email"
        class="form-control"
        id="exampleInputEmail2"
        placeholder="jane.doe@example.com"
      />
    </div>
    <button type="submit" class="btn btn-default">Отправить приглашение</button>
  </form>
  
  <form class="form-inline">
    <div class="form-group">
      <label class="sr-only" for="exampleInputEmail3">Email адрес</label>
      <input
        type="email"
        class="form-control"
        id="exampleInputEmail3"
        placeholder="Email"
      />
    </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>
$
.00
  <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-groups, чтобы они вели себя как строки сетки, поэтому нет необходимости в .row. 

  <form class="form-horizontal">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input
          type="email"
          class="form-control"
          id="inputEmail3"
          placeholder="Email"
        />
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword3" class="col-sm-2 control-label">Пароль</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.

По умолчанию (вложенные)


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

email@example.com

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

email@example.com

  <form class="form-inline">
    <div class="form-group">
      <label class="sr-only">Email</label>
      <p class="form-control-static">email@example.com</p>
    </div>
    <div class="form-group">
      <label for="inputPassword2" class="sr-only">Пароль</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. Как отмечено в разделе о состоянии отключения для кнопок (и особенно в подразделе для элементов <a>), это свойство CSS еще не стандартизировано и не полностью поддерживается в Opera 18 и ниже, или в Internet Explorer 11, и не предотвратит фокусировку или активацию этих ссылок клавиатурными пользователями. Поэтому, чтобы быть безопасным, используйте пользовательский JavaScript для отключения таких ссылок.

Совместимость между браузерами

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

  <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 class="sr-only" 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> самого элемента управления (как в следующем примере кода), включить Глификон (с соответствующим альтернативным текстом, используя класс .sr-only - см. примеры Глификонов), или предоставив дополнительный блок текста помощи. В частности для вспомогательных технологий, невалидные элементы управления формы также могут быть назначены атрибуту 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"> элементами.

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

Необходимое позиционирование иконки обратной связи требуется для входов без метки и для групп ввода с дополнением справа. Вы сильно рекомендуем предоставить метки для всех входов из-за причин доступности. Если вы хотите предотвратить отображение меток, скрывайте их с помощью класса .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="Адаптивное изображение" />

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

Добавьте классы к элементу <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>
  
 // Классы .pull-left { float: left
  !important; } .pull-right { float: right !important; } // Использование как
  миксины .element { .pull-left(); } .another-element { .pull-right(); }

Не для использования в навигационных панелях

Для выравнивания компонентов в навигационных панелях с помощью утилитарных классов используйте .navbar-left или .navbar-right вместо этого. Смотрите документацию навигационной панели для подробностей.

Центрирование блоков контента

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

  <div class="center-block">...</div>
  
 // Класс .center-block { display:
  block; margin-left: auto; margin-right: auto; } // Использование как миксин
  .element { .center-block(); }

Clearfix

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

  <!-- Использование как класс -->
  <div class="clearfix">...</div>
  
 // Сам миксин .clearfix() { &:before,
  &:after { content: " "; display: table; } &:after { clear: both; } } //
  Использование как миксин .element { .clearfix(); }

Показ и скрытие контента

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

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

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

  <div class="show">...</div>
  <div class="hidden">...</div>
  
 // Классы .show { display: block
  !important; } .hidden { display: none !important; } .invisible { visibility:
  hidden; } // Использование как миксины .element { .show(); } .another-element
  { .hidden(); }

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

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

  <a class="sr-only sr-only-focusable" href="#content"
    >Перейти к основному содержимому</a
  >
  
 // Использование как миксин
  .skip-navigation { .sr-only(); .sr-only-focusable(); }

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

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

  <h1 class="text-hide">Пользовательский заголовок</h1>
  
 // Использование как миксин .heading {
  .text-hide(); }

Адаптивные утилиты

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

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

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

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

Очень маленькие устройства Телефоны (<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>.

Тестовые случаи

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

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

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

✔ Видимый на очень маленьком
✔ Видимый на маленьком
Средний ✔ Видимый на среднем
✔ Видимый на большом
✔ Видимый на очень маленьком и маленьком
✔ Видимый на среднем и большом
✔ Видимый на очень маленьком и среднем
✔ Видимый на маленьком и большом
✔ Видимый на очень маленьком и большом
✔ Видимый на маленьком и среднем

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

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

✔ Скрытый на очень маленьком
✔ Скрытый на маленьком
Средний ✔ Скрытый на среднем
✔ Скрытый на большом
✔ Скрытый на очень маленьком и маленьком
✔ Скрытый на среднем и большом
✔ Скрытый на очень маленьком и среднем
✔ Скрытый на маленьком и большом
✔ Скрытый на очень маленьком и большом
✔ Скрытый на маленьком и среднем

Использование Less

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;

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

 // Использование как есть .masthead { background-color:
  @brand-primary; } // Переназначенные переменные в Less
  @alert-message-background: @brand-info; .alert { background-color:
  @alert-message-background; }

Каркас

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

 // Каркас @body-bg: #fff; @text-color: @black-50;

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

 // Переменные @link-color: @brand-primary;
  @link-hover-color: darken(@link-color, 15%); // Использование a { color:
  @link-color; text-decoration: none; &:hover { color: @link-hover-color;
  text-decoration: underline; } }

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

Типографика

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

 @font-family-sans-serif: "Helvetica Neue", Helvetica,
  Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times,
  serif; @font-family-monospace: Menlo, Monaco, Consolas, "Courier New",
  monospace; @font-family-base: @font-family-sans-serif; @font-size-base: 14px;
  @font-size-large: ceil((@font-size-base * 1.25)); // ~18px @font-size-small:
  ceil((@font-size-base * 0.85)); // ~12px @font-size-h1: floor((@font-size-base
  * 2.6)); // ~36px @font-size-h2: floor((@font-size-base * 2.15)); // ~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, с введением Autoprefixer. Для сохранения обратной совместимости 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; }

Тени (Drop shadows)

Если ваша целевая аудитория использует самые последние и лучшие браузеры и устройства, обязательно используйте только свойство box-shadow само по себе. Если вам нужна поддержка старых Android (до v4) и 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, с введением Autoprefixer. Для сохранения обратной совместимости 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; }

Трансформации

Поверните, масштабируйте, переместите или наклоните любой объект.

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

 .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 в одном объявлении и другие миксины для отдельных свойств.

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

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

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

Установите прозрачность для всех браузеров и предоставьте fallback 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);

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

Утилитарные миксины

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

Clearfix

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

 // Миксин .clearfix() { &:before, &:after { content: " ";
  display: table; } &:after { clear: both; } } // Использование .container {
  .clearfix(); }

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

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

 // Миксин .center-block() { display: block; margin-left:
  auto; margin-right: auto; } // Использование .container { width: 940px;
  .center-block(); }

Помощники размеров

Укажите размеры объекта более легко.

 // Миксины .size(@width; @height) { width: @width;
  height: @height; } .square(@size) { .size(@size; @size); } // Использование
  .image { .size(400px; 300px); } .avatar { .square(48px); }

Изменяемые размером textarea

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

 .resizable(@direction: both) { // Опции: horizontal,
  vertical, both resize: @direction; // Исправление Safari overflow: auto; }

Усечение текста

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

 // Миксин .text-overflow() { overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; } // Использование .branch-name
  { display: inline-block; max-width: 200px; .text-overflow(); }

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

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

 .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}"); @media only screen and
  (-webkit-min-device-pixel-ratio: 2), only screen and (
  min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio:
  2/1), only screen and ( min-device-pixel-ratio: 2), only screen and (
  min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) {
  background-image: url("@{file-2x}"); background-size: @width-1x @height-1x; }
  } // Использование .jumbotron { .img-retina("/img/bg-1x.png",
  "/img/bg-2x.png", 100px, 100px); }

Использование Sass

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

Что включено

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

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

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

Установка

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

Bootstrap для Sass