Обзор

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

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

В 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, проект от Николас Галлахер и Джонатан Нил.

Контейнеры

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

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

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

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

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

Блочная система

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

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.col-md-1
.col-md-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>

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

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

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

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

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

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

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

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

Пример: Колонка wrapping

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

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

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

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

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

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

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

В дополнение к очистке столбца на адаптивных точках, вам может понадобиться сброс 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-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

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

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

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

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

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

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

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

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

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

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

Переменные

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

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

Смешивания

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Типография

Заголовки

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

h1. Bootstrap heading

Semibold 36px

h2. Bootstrap heading

Semibold 30px

h3. Bootstrap heading

Semibold 24px

h4. Bootstrap heading

Semibold 18px
h5. Bootstrap heading
Semibold 14px
h6. Bootstrap heading
Semibold 12px
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

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

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

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

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

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

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

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

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

<p>...</p>

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

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

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

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

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

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

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

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

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

You can use the mark tag to highlight text.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

This line of text will render as underlined

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

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

Мелкий текст

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

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

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

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

Жирный шрифт

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

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Курсив

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

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

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

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

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

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

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

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

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

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

Lowercased text.

Uppercased text.

Capitalized text.

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

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

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

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

An abbreviation of the word attribute is attr.

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

Инициализм

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

HTML is the best thing since sliced bread.

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

Адреса

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

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

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

Цитаты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  ...
</blockquote>

Списки

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

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

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

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

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

  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>

Описание

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

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

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

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

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

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

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

Код

Встроенный

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

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

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

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

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

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

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

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

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

Переменные

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

y = mx + b

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

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

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

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

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

Таблицы

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

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

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

"Зебра"

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

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

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

# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  ...
</table>

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

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

# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  ...
</table>

Курсор строк

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

# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  ...
</table>

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

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

# Имя Фамилия Пользователь
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-condensed">
  ...
</table>

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

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

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

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

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

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

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

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

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

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

Firefox и fieldsets

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

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

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

# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Формы

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

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

Example block-level help text here.

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

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

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

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

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

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

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

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

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

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
$
.00
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

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

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

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

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

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

Ввод

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

Используйте .checkbox-inline или .radio-inline класса набором флажков или радиоприемников для управления отображениями на той же линии.


<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

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

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

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

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

Подборки

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

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

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

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

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

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

email@example.com

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

email@example.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Validation states

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

Conveying validation state to assistive technologies and colorblind users

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

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

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

With optional icons

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

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

Icons, labels, and input groups

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

Conveying the icon's meaning to assistive technologies

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

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

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

Optional icons in horizontal and inline forms

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

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

Optional icons with hidden .sr-only labels

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

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

Control sizing

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

Height sizing

Create taller or shorter form controls that match button sizes.

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

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

Horizontal form group sizes

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

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

Column sizing

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

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

Кнопки

Теги кнопки

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

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

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

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

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

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

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

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

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

Опции

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

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

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

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

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

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

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

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

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

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

Размеры

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

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

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

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

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

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

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

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

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

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

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

Primary link Link

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

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

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

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

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

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

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

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

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

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

Primary link Link

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

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

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

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

Изображения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

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

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

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

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

Значек меню

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

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

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

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

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

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

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

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

Значек меню

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

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

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

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

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Классов
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

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

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

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

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

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

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

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

Clearfix

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

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

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

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

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

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

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

<div class="show">...</div>
<div class="hidden">...</div>
// Классов
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

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

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

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

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Использования в качестве mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

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

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

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

Адаптивные вспомогатели

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

✔ Видимый на x-small
✔ Видимый на small
Средние ✔ Видимый на medium
✔ Видимый на large
✔ Видимый на x-small и small
✔ Видимый на medium и large
✔ Видимый на x-small и medium
✔ Видимый на small и large
✔ Видимый на x-small и large
✔ Видимый на small и medium

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

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

✔ Скрытый на x-small
✔ Скрытый на small
Средние ✔ Скрытый на medium
✔ Скрытый на large
✔ Скрытый на x-small и small
✔ Скрытый на medium и large
✔ Скрытый на x-small и medium
✔ Скрытый на small и large
✔ Скрытый на x-small и large
✔ Скрытый на small и medium

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

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

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

Компиляция Bootstrap

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

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

Переменные

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

Цвета

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

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

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

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

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

Каркас

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

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

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

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

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

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

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

Типография

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

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

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

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

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

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

Иконки

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

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

Компоненты

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

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

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

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

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

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

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

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

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

Поставщики mixin

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

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

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

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

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

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

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

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

Тени

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

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

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

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

Переходы

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

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

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

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

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

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

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

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

Анимации

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

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

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

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

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

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

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

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

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

Столбцы

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

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

Градиенты

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

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

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

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

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

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

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

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

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

Утилиты mixin

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

Clearfix

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В то время как 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