Обзор

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

Документ HTML5

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

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

Для мобильных устройств

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

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

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

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

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

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

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

Эти стили находятся в scaffolding.less.

Normalize.css

Для оптимизации работы с различными интернет-браузерами мы используем Normalize.css, проект Николаса Галлахера (Nicolas Gallagher) и Джонатана Нила (Jonathan Neal).

Контейнеры

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

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

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

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

Сетка

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

Введение

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

  • Ряды нужно размещать в .container (постоянная ширина) или .container-fluid (полная ширина) для надлежащего выравнивания и заполнения.
  • Ряды используются для создания горизонтальных групп колонок.
  • Содержимое страницы помещается в колонки, и только колонки могут быть ближайшими дочерними объектами рядов.
  • Заранее заданные классы сетки, такие как .row и .col-xs-4, используются для быстрого создания макетов сетки. Примеси Less также можно использовать для более содержательных макетов.
  • Между колонками существует интервал (пробел между содержимым разных колонок), который создается с помощью сегмента padding. Такое заполнение компенсируется в рядах негативными полями .row.
  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
  • Колонки сетки создаются с указанием номера одной из двенадцати доступных колонок, которую вы хотите расширить. Например, для создания трех одинаковых колонок вам понадобится три сегмента .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Классы сетки применяются к устройствам с шириной экрана больше или равной размером контрольных точек, а новые классы сетки предназначены для устройств меньшего размера. Таким образом, применение любых классов .col-md- к элементу не только затронет его отображение на устройствах среднего размера, но и на более крупных устройствах, если класс .col-lg- будет отсутствовать.

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

Запросы мультимедиа

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

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@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-
# of columns 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
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<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>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<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>

<!-- Columns are always 50% wide, on mobile and desktop -->
<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>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Example: Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

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

Настройка адаптивных колонок

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.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>

  <!-- Add the extra clearfix for only the required 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>

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

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

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

Колонки с отступом

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

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-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>

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

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).

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

Порядок колонок

Вы можете легко изменить порядок встроенных колонок сетки с помощью .col-md-push-* и классов модификаторов .col-md-pull-*.

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

Less mixins and variables

In addition to prebuilt grid classes for fast layouts, Bootstrap includes Less variables and mixins for quickly generating your own simple, semantic layouts.

Переменные

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

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

Примеси

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

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

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

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.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));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.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));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.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 heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

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

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

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

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

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

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

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

По умолчанию основной размер шрифта в Bootstrap font-size14px, при высоте строки 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 станет удобнее.

Inline text elements

Marked text

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

You can use the mark tag to highlight text.

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

Deleted text

For indicating blocks of text that have been deleted use the <del> tag.

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

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

Strikethrough text

For indicating blocks of text that are no longer relevant use the <s> tag.

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

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

Inserted text

For indicating additions to the document use the <ins> tag.

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

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

Underlined text

To underline text use the <u> tag.

This line of text will render as underlined

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

Используйте основные теги «визуального выделения» HTML и легковесные стили.

Мелкий текст

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

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

Эта строка будет обработана, как мелкий текст.

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

Жирный шрифт

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

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

<strong>rendered as bold text</strong>

Курсив

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

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

<em>rendered as italicized text</em>

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

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

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

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

Выравнивание слева.

Выравнивание по центру.

Выравнивание справа.

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

No wrap text.

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

Transformation classes

Трансформируйте текст в компоненты с помощью классов "capitalize"

Lowercased text.

Uppercased text.

Capitalized text.

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

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

Элемент HTML <abbr> для сокращений и акронимов позволяет показывать значение слова при наведении на него курсора. Под сокращениями с атрибутом title идет граница из точек, а при наведении курсора отображается дополнительная информация.

Основные сокращения

Чтобы при наведении курсора отображалась полная версия сокращенного слова, включите атрибут title с элементом <abbr>.

Сокращенная версия слова атрибут — атр.

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

Акронимы

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

HTML — лучшее изобретение человека после нарезанного хлеба.

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

Адреса

Текущая контактная информация для ближайшего предка или списка работ. Сохраняйте форматирование, заканчивая все строки сегментом <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
ФИО
first.last@example.com
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

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

Цитаты

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

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

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

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

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

Варианты цитирования

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

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

Добавьте <footer> для указания источника. Укажите название оригинальной работы в <cite>.

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

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

Другие варианты отображения

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

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

Someone famous in Название источника
<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. На узких экранах по умолчанию используется сжатый макет.

Код

Встроенные

Встроенные сегменты кода помещаются в теги <code>.

Например, <section> нужно прописывать как встроенный код.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

User input

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

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

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

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

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

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

Переменные

For indicating variables use the <var> tag.

y = mx + b

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

Sample output

For indicating blocks sample output from a program use the <samp> tag.

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

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

Таблицы

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

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

# Имя Фамилия Имя пользователя
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
Марк Отто @TwBootstrap
2 Джейкоб Торнтон @fat
3 Ларри Птица @twitter
<table class="table table-bordered">
  ...
</table>

Ряды при наведении курсора

Добавьте .table-hover, чтобы включить режим «плавающей таблицы» в <tbody>.

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

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

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

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

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

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

Класс Описание
.active Изменяет цвет строки или ячейки при наведении на нее курсора мыши
.success Показывает успешное или позитивное действие
.info Показывает нейтральное информативное изменение или действие
.warning Показывает предупреждения, которым нужно уделить внимание
.danger Показывает опасное или потенциально негативное действие
# Заголовок колонки Заголовок колонки Заголовок колонки
1 Содержимое колонки Содержимое колонки Содержимое колонки
2 Содержимое колонки Содержимое колонки Содержимое колонки
3 Содержимое колонки Содержимое колонки Содержимое колонки
4 Содержимое колонки Содержимое колонки Содержимое колонки
5 Содержимое колонки Содержимое колонки Содержимое колонки
6 Содержимое колонки Содержимое колонки Содержимое колонки
7 Содержимое колонки Содержимое колонки Содержимое колонки
8 Содержимое колонки Содержимое колонки Содержимое колонки
9 Содержимое колонки Содержимое колонки Содержимое колонки
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

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

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Firefox and fieldsets

Firefox has some awkward fieldset styling involving width that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we don't provide in Bootstrap:

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

For more information, read this Stack Overflow answer.

# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
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 role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

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

Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

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

Добавьте .form-inline к своей форме <form> для элементов управления выравниванием слева и встроенного блока. Применимо только в формах для окон шириной не менее 768px.

Требуются индивидуальные установки ширины

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

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

Скринридеры будут плохо работать с вашими формами, если не включать метки для каждого поля ввода. Вы можете скрывать метки для этих встроенных форм с помощью класса .sr-only.

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

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

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

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

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

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

Поля ввода

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

Требуется указание типа

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

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

Группы ввода

To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.

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

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

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

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

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

A checkbox or radio with the disabled attribute will be styled appropriately. To have the <label> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .radio-inline, .checkbox, .checkbox-inline, or <fieldset>.

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


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

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

Inline checkboxes and radios

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

Меню выбора

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


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

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

Фокус ввода

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

Демонстрация состояния :focus

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

Отключенные поля ввода

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

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

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

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

Caveat about link functionality of <a>

Our styles use pointer-events: none to try to disable the link functionality of <a class="btn btn-*"> buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

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

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

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

Readonly inputs

Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.

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

Подтверждения

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

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-error">
  <div class="radio">
    <label class="checkbox">
      <input type="checkbox" id="checkboxError" value="option1">
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
</div>
<div class="has-success">
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="radiosSuccess1" value="option1" checked>
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="radiosSuccess2" value="option2">
      Option two can be something else and selecting it will deselect option one
    </label>
  </div>
</div>

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

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

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

Icons, labels, and input groups

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

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

Optional icons in horizontal and inline forms

<form class="form-horizontal" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
</form>
<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
</form>

Optional icons with hidden .sr-only labels

For form controls with no visible label, add the .sr-only class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

Установка размеров

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

Изменение высоты

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

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

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

Horizontal form group sizes

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

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

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

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

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

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

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

Блок справочного текста, расположенный на новой строке. Может быть более одной строки.
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Кнопки

Дополнительно

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

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Размеры

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

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

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

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

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s should you need to replicate the active state programmatically.

Кнопки

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

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

Элементы привязки

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

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

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

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

Чтобы кнопки выглядели отключенными, их можно сделать на 50% тусклее.

Кнопки

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

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

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

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

Элементы привязки

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

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

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

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

Link functionality caveat

This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

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

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

Теги кнопки

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

Ссылка
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Отображение в разных интернет-браузерах

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

Among other things, there's a bug in Firefox <30 that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.

Изображения

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

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

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

Image shapes

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

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

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

A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

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

Contextual colors

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

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> вместе с классом.

Contextual backgrounds

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

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>

Индивидуальные особенности

Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div> with the class.

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

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

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

Carets

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

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

Quick floats

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

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

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

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

To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.

Center content blocks

Выберите необходимый элемент display: block и поместите его в центр с помощью margin. Функция доступна как примесь и как класс.

<div class="center-block">...</div>
// Classes
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

Clearfix

Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

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

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

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

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

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

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

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

Screen reader and keyboard navigation content

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a Mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Image replacement

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

<h1 class="text-hide">Custom heading</h1>
// Usage as a Mixin
.heading {
  .text-hide();
}

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

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

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

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

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

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

As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.

Group of classes CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.

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

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

Classes Интернет-браузер Печать
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Отображается
.hidden-print Отображается

The class .visible-print also exists but is deprecated as of v3.2.0. It is approximately equivalent to .visible-print-block, except with additional special cases for <table>-related elements.

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

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

Отображение

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

✔ Отображается на очень маленьком экране
✔ Отображается на маленьком экране
Средний ✔ Отображается на среднем экране
✔ Отображается на большом
✔ Отображается на очень маленьком и маленьком экране
✔ Отображается на среднем и большом экране
✔ Visible on x-small and medium
✔ Отображается на маленьком и большом экране
✔ Отображается на очень маленьком и большом экране
✔ Отображается на маленьком и среднем экране

Сокрытие

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

✔ Hidden on x-small
✔ Hidden on small
Средний ✔ Hidden on medium
✔ Скрыт на большом экране
✔ Hidden on x-small and small
✔ Скрыт на среднем и большом экране
✔ Hidden on x-small and medium
✔ Скрыт на маленьком и большом экране
✔ Скрыт на очень маленьком и большом экране
✔ Hidden on small and medium

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

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

Grid variables and mixins are covered within the Grid system section.

Compiling Bootstrap

Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, consult the Getting Started section for how to setup your development environment to run the necessary commands.

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

Переменные

Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see the Customizer.

Цвета

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

@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: #428bca;
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

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

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

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Формирование шаблонов

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

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Простая настройка цвета ссылок с помощью всего лишь одного значения.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

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

Note that the @link-hover-color uses a function, another awesome tool from Less, to automagically create the right hover color. You can use darken, lighten, saturate, and 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;

Vendor mixins

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

Box-sizing

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

The mixin is deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.

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

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

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

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

Тени

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

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

Обязательно используйте цвета 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;
}

Переходы

Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.

The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until 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;
}

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

Поворачивайте, масштабируйте, переводите (перемещайте) или изгибайте любой объект.

The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until 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 и другие примеси для работы с отдельными свойствами.

The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until 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;
}

Затемнение

Устанавливайте затемнение для всех интернет-браузеров и нейтрализацию фильтров 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);

Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:

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

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

Utility mixins

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

Clearfix

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

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

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

Центрирование по горизонтали

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

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

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

Установка размеров

Более простая установка размеров объекта.

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

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

Масштабируемые текстовые области

Простая настройка размеров любых текстовых областей или других элементов. Работает в соответствии с интернет-браузером (both).

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

Сокращение текста

Простое сокращение текста при помощи одной примеси. Элементы должны принадлежать к уровню block или inline-block.

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

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

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

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

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

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

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

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

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

Что входит в пакет загрузки

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

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

Посетите хранилище GitHub для Sass, чтобы посмотреть на эти файлы в действии.

Установка

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

Bootstrap для Sass