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

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

Контейнеры

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

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

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

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

Введение

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

.row должны быть помещены в .container (fixed-width) или .container-fluid (full-width) для правильного выравнивания и заполнения.
Использовать строки для создания горизонтальных группы столбцов.
Контент должен быть помещен в столбцах, и только колонки могут быть непосредственными потомками строк.
Стандартные классы разметки как .row и .col-xs-4 доступны для быстрого принятия разметки макетов. Less Mixins также может быть использован для более семантических схем.
Столбцы создают желоба (промежутки между содержанием столбцов) с помощью padding. Тогда padding компенсируется в строках для первого и последнего столбца с помощью отрицательного margin на .row.
Столбцы разметки создаются с указанием количества двенадцати доступных столбцов, которые вы хотите охватить. Например, три равные колонки использовали бы три .col-xs-4.

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

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

Мы используем следующие медиа запросы в наших 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-`
# колонок	12
Ширина колонки	Авто	60px	78px	95px
Промежуточная ширина	30px(15px) на каждой стороне колонки
Вкладка	Да
Отступ	Да
Выравнивание колонки	Да

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

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

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

.col-md-1

.col-md-8

.col-md-4

.col-md-6

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

Пример: Резиновые блоки

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

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

Пример: Мобильные и настольные

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

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

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

.col-xs-6

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

<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"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Адаптивные колонки сброса

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

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

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

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

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>

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

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

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

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

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

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

.col-md-4

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

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

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

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

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

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

Level 1: .col-md-9

Level 2: .col-md-6

<div class="row">
  <div class="col-md-9">
    Level 1: .col-md-9
    <div class="row">
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
      <div class="col-md-6">
        Level 2: .col-md-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;

Mixins

Смешения используются в сочетании с переменных разметкок, чтобы образовать семантические 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));
  }
}

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

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

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

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

Заголовки

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

h1. Bootstrap заголовок	Semibold 36px
h2. Bootstrap заголовок	Semibold 30px
h3. Bootstrap заголовок	Semibold 24px
h4. Bootstrap заголовок	Semibold 18px
h5. Bootstrap заголовок	Semibold 14px
h6. Bootstrap заголовок	Semibold 12px

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

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

h1. Bootstrap заголовок Вторичный текст

h2. Bootstrap заголовок Вторичный текст

h3. Bootstrap заголовок Вторичный текст

h4. Bootstrap заголовок Вторичный текст

h5. Bootstrap заголовок Вторичный текст

h6. Bootstrap заголовок Вторичный текст

<h1>h1. Bootstrap заголовок <small>Вторичный текст</small></h1>
<h2>h2. Bootstrap заголовок <small>Вторичный текст</small></h2>
<h3>h3. Bootstrap заголовок <small>Вторичный текст</small></h3>
<h4>h4. Bootstrap заголовок <small>Вторичный текст</small></h4>
<h5>h5. Bootstrap заголовок <small>Вторичный текст</small></h5>
<h6>h6. Bootstrap заголовок <small>Вторичный текст</small></h6>

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

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

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

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

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

<p>...</p>

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

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

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

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

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

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

Выделение

Чтобы выделить текст можно использовать 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> в основном для цитирования, технических терминов и т.д.

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

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

Выравнивание по левому краю.

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

Выравнивание по правому краю.

Выравнивание текста по ширине

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

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

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

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

Для расширения текста при длительном наведении на аббревиатуру, включите атрибут title с элементом <abbr>.

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

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

Инициализм

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

HTML is the best thing since sliced bread.

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

Адреса

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

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

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

Цитаты

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

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

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

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

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

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

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

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

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

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

Someone famous in Source Title

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

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

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

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

Someone famous in Source Title

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

Списки

Беспорядочный

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

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

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

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

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

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

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

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

Встроенный

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

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Описание

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

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

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

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

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

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

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

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

Встроенный

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

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

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

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

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

To switch directories, type cd followed by the name of the directory.

  To switch directories, type <kbd>cd</kbd> followed by the name of the directory.

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

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

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

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

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

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

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

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

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

"Зебра"

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

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

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

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

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

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

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

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

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

Курсор строк

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

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

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

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

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

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

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

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

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

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

#	Заголовок столбца	Заголовок столбца	Заголовок столбца
1	Содержимое столбца	Содержимое столбца	Содержимое столбца
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>

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

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

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

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

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

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

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

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Пароль</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"> Проверить меня
        </label>
  </div>
  <button type="submit" class="btn btn-default">Отправить</button>
</form>

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

Добавьте .form-inline для выравнивания по левому краю и встроенному блоку управления для компактной планировки.

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

Добавьте .form-inline для выравнивания по левому краю и встроенному блоку управления для компактной планировки.

Необходимо настраивать ширину

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

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

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

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Пароль</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
          <input type="checkbox"> Запомнить меня
        </label>
  </div>
  <button type="submit" class="btn btn-default">Войти</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">Пароль</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"> Запомнить меня
        </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, text, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, и color.

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

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

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

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

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

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

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

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

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

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

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

<div class="checkbox">
  <label>
          <input type="checkbox" value="">
          Первая опция&mdash;выбирайте его, если вам нравится этот пункт
        </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>

Формы для галочек в линию

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

Подборки

Используйте опцию по умолчанию, или добавьте 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>.

<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">Пароль</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> сразу.

Функциональности ссылок `<a>` не изменены

Этот класс только изменит внешний вид <a class="btn btn-default"> кнопок, а не их функциональность. Используйте JavaScript, чтобы отключить ссылки.

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

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

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Неактивный ввод</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Неактивный select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
            <input type="checkbox"> Не могу проверить это
          </label>
    </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
  </fieldset>
</form>

Проверка состояний

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">Успешный ввод</label>
  <input type="text" class="form-control" id="inputSuccess1">
</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>

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

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

Иконки и группы ввода

При использовании значков обратной связи, необходимо знать, что может потребоваться ручное позиционирование для групп ввода with an add-on on the right. Adjust the right: 0; 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">Успешный ввод</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">Ввод с предупреждением</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">Ввод с ошибкой</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

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

<form class="form-horizontal" role="form">
  <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">
      <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">Успешный ввод</label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
</form>

Управление измерением

Задавать высоту с помощью классов .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>

Измерение столбца

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

<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">Ссылка</button>

Размеры

Больше или малые кнопки? Добавьте .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>

Create block level buttons—those that span the full width of a parent— by adding .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>

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

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

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

Нет необходимости добавлять :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>

Заблокированное состояние

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

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

Добавьте 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 класса, так что префикс не требуется.

Функциональность ссылки не влияет

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

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

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

Теги кнопки

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

<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">
<input class="btn btn-default" type="submit" value="Submit">

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

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

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

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

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

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

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

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

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

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

A generic square placeholder image with rounded corners

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

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

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

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

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

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

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

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

Значек меню

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

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>

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

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

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

Значек меню

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

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

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

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

<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();
}

Не использовать в Navbars

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

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

Установите для элемента блочное отображения через 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

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

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

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

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

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

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

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

Считывания содержимого экрана

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Компиляция Bootstrap

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

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

Переменные

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

Цвета

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

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 60%);   // #999
@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-color-hover: darken(@link-color, 15%);

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

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

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

Типография

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

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

Поставщики mixin

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

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

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

.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() mixin, но Bootstrap делает включения ярлыков для быстрого закругления двух углов с определенных сторон объекта.

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

Тени

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

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

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

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

Переходы

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

.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-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

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

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

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Анимации

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

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

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

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

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

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

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

.placeholder(@color: @input-color-placeholder) {
  &:-moz-placeholder            { color: @color; } // Firefox 4-18
  &::-moz-placeholder           { color: @color; } // Firefox 19+
  &:-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;
}

Градиенты

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

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

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

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

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

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

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

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

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

Утилиты mixin

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

Clearfix

Забудьте про добавление class="clearfix" к каждому элементу, а вместо этого добавьте mixin .clearfix() в случае необходимости. В этом примере используется 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); }

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

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

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

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

Легко сократить текст, с тремя точками, с помощью одиночного mixin. При этом необходимо, чтобы элемент был стилизован как 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);
}

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

Что включено

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

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

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

Установка

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

Bootstrap для Sass

CSS

Обзор

HTML5 doctype

В первую очередь - мобильные

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

Normalize.css

Контейнеры

Разметка. Система сетки.

Введение

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

Функционал разметки

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

Пример: Резиновые блоки

Пример: Мобильные и настольные

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

Адаптивные колонки сброса

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

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

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

Less модули и переменные

Переменные

Mixins

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

Типография

Заголовки

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

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

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

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

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

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

h1. Bootstrap заголовок Вторичный текст

h2. Bootstrap заголовок Вторичный текст

h3. Bootstrap заголовок Вторичный текст

h4. Bootstrap заголовок Вторичный текст

h5. Bootstrap заголовок Вторичный текст

h6. Bootstrap заголовок Вторичный текст

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

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

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

Выделение

Мелкий текст

Жирный шрифт

Курсив

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

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

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

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

Инициализм

Адреса

Цитаты

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

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

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

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

Списки

Беспорядочный

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

Без стиля

Встроенный

Описание

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

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

Код

Встроенный

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

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

Таблицы

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

"Зебра"

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

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

Курсор строк

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

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

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

Формы

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

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

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

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

Функциональности ссылок `<a>` не изменены