Обзор

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

HTML5 doctype

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

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

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

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

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

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

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

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

Bootstrap устанавливает основные глобальные дисплеи, типографии, и стили ссылок. В частности, мы:

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

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

Normalize.css

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

Контейнеры

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

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

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

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

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

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

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

Введение

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

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

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

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

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

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

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

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

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

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

Очень маленькие устройство Телефоны (<768px) Малые устройства Планшеты (≥768px) Средние устройства Настольные (≥992px) Большие устройства Настольные (≥1200px)
Поведение разметки Горизонтальный все время Терпеть неудачу при начатии, горизонтальный выше контрольной точки
Ширина контейнера Нет (автом.) 750px 970px 1170px
Класс префикса .col-xs- .col-sm- .col-md- .col-lg-
# колонок 12
Ширина колонки Авто ~62px ~81px ~97px
Промежуточная ширина 30px(15px) на каждой стороне колонки
Вкладка Да
Отступ Да
Выравнивание колонки Да

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

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

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

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

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

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

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

Не хотите чтобы ваши колонки просто складывались на небольших устройствах? Используйте очень маленькие 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>

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

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

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

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

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

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

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

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

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

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

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

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

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

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

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

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

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

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

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

Типография

Заголовки

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

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

Semibold 36px

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

Semibold 30px

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

Semibold 24px

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

Semibold 18px
h5. Bootstrap заголовок
Semibold 14px
h6. Bootstrap заголовок
Semibold 12px
<h1>h1. Bootstrap заголовок</h1>
<h2>h2. Bootstrap заголовок</h2>
<h3>h3. Bootstrap заголовок</h3>
<h4>h4. Bootstrap заголовок</h4>
<h5>h5. Bootstrap заголовок</h5>
<h6>h6. Bootstrap заголовок</h6>

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

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

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

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

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

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

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

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

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

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

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

<p>...</p>

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

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

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

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

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

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

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

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

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

Вы можете использовать знак тег в highlight text.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мелкий текст

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

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

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

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

Жирный шрифт

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

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

<strong>rendered as bold text</strong>

Курсив

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

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

<em>rendered as italicized text</em>

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

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

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

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

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

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

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

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

Nowrap текст.

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

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

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

В нижнем регистре.

Верхний регистр.

С заглавной буквы.

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

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

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

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

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

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

Инициализм

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

HTML is the best thing since sliced bread.

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

Адреса

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

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

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

Цитаты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Списки

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

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

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

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

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

Без стиля

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

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

Встроенный

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

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

Описание

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

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

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

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

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

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

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

Код

Встроенный

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

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

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

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

To switch directories, type cd followed by the name of the directory.
To 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 класса, в котором будут определена максимальная высота 350пкс и обеспечена ось У для полосы прокрутки.

Переменные

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

y = mx + b

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

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

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

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

<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-childCSS селектор, который не доступен в Internet Explorer 8.

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

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

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

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

Курсор строк

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

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

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

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

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

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

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

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

Conveying meaning to assistive technologies

Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the .sr-only class.

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

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

Firefox и fieldsets

Firefox имеет некоторый неловкий Fieldset стиль участием width которые препятствуют реагировать таблице. Это не может быть переопределен без Firefox-specific hack, что мы don't обеспечить в Bootstrap

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

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

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

Формы

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

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

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

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

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

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

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

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

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

Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

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

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute. If none of these is present, screen readers may resort to using the placeholder attribute, if present, but note that use of placeholder as a replacement for other labelling methods is not advised.

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Пароль</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
          <input type="checkbox"> Запомнить меня
        </label>
  </div>
  <button type="submit" class="btn btn-default">Войти</button>
</form>
$
.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-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">Пароль</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Запомнить меня
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Войти</button>
    </div>
  </div>
</form>

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

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

Ввод

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

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

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

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

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

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

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

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

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

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

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

Флажок или радио с disabled атрибутом будет в стиле соответствующим образом. Чтобы иметь <label> для флажка или радио также отображать "not-allowed" курсор, когда пользователь наводит курсор на этикетку, добавить .disabled класс в .radio, .radio-inline, .checkbox, .checkbox-inline, или <fieldset>.

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


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

Checkboxes and radios without label text

Should you have no text within the <label>, the input is positioned as you'd expect. Currently only works on non-inline checkboxes and radios. Remember to still provide some form of label for assistive technologies (for instance, using 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>

Подборки

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

For <select> controls with the multiple attribute, multiple options are shown by default.

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

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

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

email@example.com

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Пароль</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="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">Пароль</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Подтверждение личности</button>
</form>

Focus state

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

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

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

Disabled state

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

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

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

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

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

By default, browsers will treat all native form controls (<input>, <select> and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <a ... class="btn btn-*"> elements, these will only be given a style of pointer-events: none. As noted in the section about disabled state for buttons (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.

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

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

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

Readonly state

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

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

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

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

Conveying validation state to assistive technologies

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

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), or associate an additional element with textual information about the validation state with the form control using aria-describedby (see the example in the following section). In the case of an error, you could also use the aria-invalid="true" attribute on the form control.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Успешный ввод</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Ввод с предупреждением</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Ввод с ошибкой</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<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>

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

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

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

Иконки, этикетки, и входные группы

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)
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Успешный ввод</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Ввод с предупреждением</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Ввод с ошибкой</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>

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

(success)
<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Успешный ввод</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>
(success)
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Успешный ввод</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>

Дополнительные значки с скрытыми .sr-only этикетками

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)
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Скрытая этикетка</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>

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

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

Высота измерения

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

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

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

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

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

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Огромная этикетка</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Маленькая этикетка</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

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

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

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

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

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

Associating help text with form controls

Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.

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>

Кнопки

Теги кнопки

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

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

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

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

Links acting as buttons

If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

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

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

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

Опции

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

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

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

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

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

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

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

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

Conveying meaning to assistive technologies

Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the .sr-only class.

Размеры

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

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

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

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

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

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

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

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

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

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

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

Главная ссылка Ссылка

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

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

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

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

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

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

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

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

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

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

Главная ссылка Ссылка

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

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

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

This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.

Изображения

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

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

SVG images and IE 8-10

In Internet Explorer 8-10, SVG images with .img-responsive are disproportionately sized. To fix this, add width: 100% \9; where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.

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

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

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

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

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

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

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

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

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

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

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

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

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the .sr-only class.

Значек меню

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

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>

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

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

Conveying meaning to assistive technologies

As with contextual colors, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.

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

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

<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>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

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

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

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

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

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

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

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

Clearfix

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<h1 class="text-hide">Пользовательский заголовок</h1>
// Usage as a Mixin
.heading {
  .text-hide();
}

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

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

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

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

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

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

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

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

Так, для дополнительной маленькой(xs) экранов, например, доступны .visible-*-* классы: .visible-xs-block, .visible-xs-inline, и .visible-*-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
Видимый
.hidden-print Видимый

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

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

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

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

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

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

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

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

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

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

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

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

Компиляция Bootstrap

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

Инструменты сторонних компиляций могут работать с 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: #428bca;
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

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

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

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

Каркас

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

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

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

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

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

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

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

Типография

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

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

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

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

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

Иконки

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

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

Компоненты

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

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

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

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

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

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

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

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

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

Поставщики mixin

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

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

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

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

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

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

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

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

Тени

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

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

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

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

Переходы

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

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

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

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

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

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

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

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

Анимации

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

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

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

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

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

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

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

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

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

Столбцы

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

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

Градиенты

Легко превратить любые два цвета в градиенты фона. Можно сделать еще больше - установить направление, используя три цвета, или используя радиальный градиент. С одиночным 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() в случае необходимости. В этом примере используется micro clearfix созданный Nicolas Gallagher.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Использование 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