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

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

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

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

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

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

Чтобы обеспечить правильный рендеринг и сенсорное масштабирование, добавьте метатег области просмотра в файл <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.

Нормализация.css

Для улучшения кроссбраузерного рендеринга мы используем Normalize.css , проект Николаса Галлахера и Джонатана Нила .

Контейнеры

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

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

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

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

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

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

Введение

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

Строки должны быть размещены в пределах .container(фиксированной ширины) или .container-fluid(полной ширины) для правильного выравнивания и заполнения.
Используйте строки для создания горизонтальных групп столбцов.
Содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
Предопределенные классы сетки, такие как .rowи .col-xs-4, доступны для быстрого создания макетов сетки. Меньше миксинов также можно использовать для более семантических макетов.
Столбцы создают желоба (промежутки между содержимым столбцов) через файлы padding. Это заполнение смещено в строках для первого и последнего столбца через отрицательное поле на .rows.
Отрицательная маржа — вот почему приведенные ниже примеры имеют выступ. Это так, что содержимое в столбцах сетки выровнено с содержимым вне сетки.
Столбцы сетки создаются путем указания числа из двенадцати доступных столбцов, которые вы хотите охватить. Например, три одинаковых столбца будут использовать три файла .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)
Поведение сетки	Горизонтально всегда	Свернуто для начала, горизонтально над контрольными точками
Ширина контейнера	Нет (авто)	750 пикселей	970 пикселей	1170 пикселей
Префикс класса	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# столбцов	12
Ширина колонки	Авто	~62px	~81px	~97px
Ширина желоба	30 пикселей (по 15 пикселей с каждой стороны столбца)
Нестабильный	Да
Смещения	Да
Порядок столбцов	Да

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

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

.col-md-1

.col-MD-8

.col-md-4

.col-md-6

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

Пример: емкость для жидкости

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

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

Пример: мобильный и настольный компьютер

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

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

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

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Пример: мобильный телефон, планшет, настольный компьютер.

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

.col-xs-12 .col-sm-6 .col-md-8

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

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Пример: перенос столбцов

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

.col-xs-9

.col-xs-4
Поскольку 9 + 4 = 13 > 12, этот блок div шириной в 4 столбца переносится на новую строку как одна непрерывная единица.

.col-xs-6
Последующие столбцы продолжаются с новой строки.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>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>

Адаптивный столбец сбрасывается

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

.col-xs-6 .col-sm-3
Измените размер окна просмотра или проверьте его на своем телефоне для примера.

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

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

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

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

В дополнение к очистке столбца в контрольных точках реагирования вам может потребоваться сбросить смещения, push или pull . Посмотрите это в действии на примере сетки .

<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-смещение-4

.col-md-3 .col-md-смещение-3

.col-md-6 .col-md-смещение-3

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

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

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

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

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

Уровень 1: .col-sm-9

Уровень 2: .col-xs-8 .col-sm-6

Уровень 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    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>

Меньше примесей и переменных

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

ч1. Начальный заголовок	Полужирный 36px
ч2. Начальный заголовок	Полужирный 30px
h3. Начальный заголовок	Полужирный 24px
h4. Начальный заголовок	Полужирный 18px
h5. Начальный заголовок	Полужирный 14px
h6. Начальный заголовок	Полужирный 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класса.

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

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

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

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

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

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

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

Копия тела

Глобальное значение Bootstrap по умолчанию font-size— 14px с 1,428 . Это относится к и всем пунктам. Кроме того, (абзацы) получают нижнее поле, равное половине вычисленной высоты строки (по умолчанию 10 пикселей).line-height<body><p>

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.

Меценат 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 в variable.less : @font-size-baseи @line-height-base. Первый — это базовый размер шрифта, используемый повсюду, а второй — базовая высота строки. Мы используем эти переменные и некоторые простые математические операции для создания полей, отступов и высоты строки всего нашего типа и многого другого. Настройте их, и Bootstrap адаптируется.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эта строка текста будет отображаться как подчеркнутая.

<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>как в основном для голоса, технических терминов и т. д.

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

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

Текст с выравниванием по левому краю.

Текст с выравниванием по центру.

Выровненный по правому краю текст.

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

Без переноса текста.

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

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

Преобразование текста в компонентах с помощью классов капитализации текста.

Текст в нижнем регистре.

Текст в верхнем регистре.

Текст с заглавной буквы.

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

Сокращения

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

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

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

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

Инициализм

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

HTML — лучшее, что есть после нарезанного хлеба.

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

Адреса

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

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103 Тел
.: (123) 456-7890

Полное имя
[email protected]

<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:#">[email protected]</a>
</address>

Цитаты

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

<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. Целое число можно поставить заранее.

Кто-то известный в 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. Целое число можно поставить заранее.

Кто-то известный в Source Title

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

Списки

Неупорядоченный

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Целое число слов и масса
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Угревая сыпь
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Энеан сит амет эрат нунк
Eget porttitor lorem

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

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

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Целое число слов и масса
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Энеан сит амет эрат нунк
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

без стиля

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Целое число слов и масса
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Угревая сыпь
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Энеан сит амет эрат нунк
Eget porttitor lorem

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

В соответствии

Поместите все элементы списка в одну строку с display: inline-block;небольшим отступом.

Лорем ипсум
Фазеллус якулис
Нулла волютпат

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

Описание

Список терминов с соответствующими описаниями.

Списки описаний: Список описаний идеально подходит для определения терминов.
Юисмод: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Порта Малесуада: Etiam porta sem malesuada magna mollis euismod.

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

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

Поставьте термины и описания <dl>рядом друг с другом. Начинается с накоплением, как по умолчанию <dl>, но когда панель навигации расширяется, сделайте это.

Списки описаний: Список описаний идеально подходит для определения терминов.
Юисмод: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Порта Малесуада: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

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

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

В соответствии

Оберните встроенные фрагменты кода с помощью <code>.

Например, <section>должен быть обернут как встроенный.

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

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

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

Чтобы переключить каталоги, введите cdимя каталога.
Чтобы изменить настройки, нажмите 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>Пример текста здесь...</p>

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

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

Переменные

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

у = м х + б

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

Необязательный заголовок таблицы.
#	Имя	Фамилия	Имя пользователя
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри	птица	@твиттер

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

Полосатые ряды

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

Кроссбраузерная совместимость

Таблицы с полосами настраиваются с помощью :nth-childселектора CSS, который недоступен в Internet Explorer 8.

#	Имя	Фамилия	Имя пользователя
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри	птица	@твиттер

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

Таблица с рамкой

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

#	Имя	Фамилия	Имя пользователя
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри	птица	@твиттер

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

Наведите строки

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

#	Имя	Фамилия	Имя пользователя
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри	птица	@твиттер

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

Сжатая таблица

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

#	Имя	Фамилия	Имя пользователя
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

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

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

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

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

#	Заголовок столбца	Заголовок столбца	Заголовок столбца
1	Содержимое столбца	Содержимое столбца	Содержимое столбца
2	Содержимое столбца	Содержимое столбца	Содержимое столбца
3	Содержимое столбца	Содержимое столбца	Содержимое столбца
4	Содержимое столбца	Содержимое столбца	Содержимое столбца
5	Содержимое столбца	Содержимое столбца	Содержимое столбца
6	Содержимое столбца	Содержимое столбца	Содержимое столбца
7	Содержимое столбца	Содержимое столбца	Содержимое столбца
8	Содержимое столбца	Содержимое столбца	Содержимое столбца
9	Содержимое столбца	Содержимое столбца	Содержимое столбца

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

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

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

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

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

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

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

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

Firefox и наборы полей

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

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

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

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

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

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

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

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

<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>) элементы управления с выравниванием по левому краю и встроенными блоками. Это относится только к формам в окнах просмотра шириной не менее 768 пикселей.

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

Вводы и выборки 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="[email protected]">
  </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>

<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-groups, чтобы они вели себя как строки сетки, поэтому нет необходимости в .row.

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

По умолчанию (с накоплением)

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

Статический контроль

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

<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 protected]</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>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</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вместо них a для :focus.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Состояния проверки

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

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

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

Убедитесь, что также предоставлено альтернативное указание состояния. Например, вы можете включить подсказку о состоянии в <label>текст самого элемента управления формы (как в следующем примере кода), включить Glyphicon (с соответствующим альтернативным текстом, используя .sr-onlyкласс — см . примеры Glyphicon ) или предоставив дополнительный текстовый блок справки. Специально для вспомогательных технологий недопустимым элементам управления формы также может быть назначен aria-invalid="true"атрибут.

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

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

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

Значки обратной связи работают только с текстовыми <input class="form-control">элементами.

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

Ручное позиционирование значков обратной связи требуется для входов без метки и для групп входов с надстройкой справа. Настоятельно рекомендуется предоставлять метки для всех входных данных по соображениям доступности. Если вы хотите запретить отображение меток, скройте их с помощью .sr-onlyкласса. Если вы должны обойтись без меток, отрегулируйте topзначение значка обратной связи. Для входных групп настройте rightзначение на соответствующее значение в пикселях в зависимости от ширины вашего дополнения.

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

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

Хотя в следующих примерах уже упоминается состояние проверки соответствующих элементов управления формы в самом <label>тексте, описанная выше техника (с использованием .sr-onlyтекста и aria-describedby) была включена в иллюстративных целях.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">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>

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

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

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

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

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

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

Контроль размера

Установите высоту, используя классы, такие как .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">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Размер столбца

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

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

Теги кнопки

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

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

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

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

Ссылки, работающие как кнопки

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

Кроссбраузерный рендеринг

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

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

Опции

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

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

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

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

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

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

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

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

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

Использование цвета для добавления значения кнопке обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (видимый текст кнопки), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый вместе с .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. Однако вы можете использовать .activeon <button>s (и включить 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>кнопкам.

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

<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>кнопкам.

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

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

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

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

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

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

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

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

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

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

Кроссбраузерная совместимость

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

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

Контекстные цвета

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

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Меценат 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.

Меценат 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>

каретки

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

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

Быстрые поплавки

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

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

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

Блоки контента по центру

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

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

Клирфикс

Легко очистить floats, добавив .clearfix к родительскому элементу . Использует micro clearfix , популяризированный Николасом Галлахером. Может также использоваться в качестве миксина.

<!-- Usage as a class -->
<div class="clearfix">...</div>

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

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

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

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

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

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

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

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

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

Программа чтения с экрана и навигация с помощью клавиатуры

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

<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">Custom heading</h1>

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

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

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

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

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

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

Начиная с версии 3.2.0, .visible-*-*классы для каждой точки останова представлены в трех вариантах, по одному для каждого displayзначения свойства CSS, перечисленного ниже.

Группа классов	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также существуют, но устарели, начиная с версии 3.2.0 . Они примерно эквивалентны .visible-*-block, за исключением дополнительных особых случаев для переключения <table>элементов, связанных с .

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

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

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

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

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

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

Видно на...

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

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

Маленький ✔ Видно на маленьких

Середина ✔ Видно на среднем

Большой ✔ Видно на больших

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

Средние и большие ✔ Видно на средних и больших

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

Маленький и большой ✔ Видно на маленьком и большом

Очень маленький и большой ✔ Видно на х-маленьком и большом

Малый и средний ✔ Видно на малых и средних

Спрятан на...

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

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

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

Середина ✔ Скрыто на носителе

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

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

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

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

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

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

Малый и средний ✔ Скрытые на малых и средних

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

Переменные сетки и примеси рассматриваются в разделе Система сетки .

Компиляция бутстрапа

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;

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

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

Типография

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

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

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

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

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

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

Иконки

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

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

Составные части

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

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

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

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

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

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

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

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

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

Миксины поставщиков

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

Размер коробки

Сбросьте блочную модель ваших компонентов с помощью одного миксина. Для контекста см. эту полезную статью от Mozilla .

Миксин устарел , начиная с версии 3.2.0, с введением Autoprefixer. Чтобы сохранить обратную совместимость, Bootstrap будет продолжать использовать миксин внутри до тех пор, пока Bootstrap v4.

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

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

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

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

Коробчатые (капельные) тени

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

Миксин устарел с версии 3.1.0, поскольку Bootstrap официально не поддерживает устаревшие платформы, которые не поддерживают стандартное свойство. Чтобы сохранить обратную совместимость, Bootstrap будет продолжать использовать миксин внутри до тех пор, пока Bootstrap v4.

Обязательно используйте rgba()цвета в тенях, чтобы они максимально органично сочетались с фоном.

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

Переходы

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

Миксины устарели , начиная с версии 3.2.0, с введением Autoprefixer. Чтобы сохранить обратную совместимость, Bootstrap будет продолжать использовать примеси внутри до тех пор, пока Bootstrap v4.

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

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

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

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

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

Анимации

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

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

Непрозрачность

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

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

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

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

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

Столбцы

Создавайте столбцы с помощью CSS в одном элементе.

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

Градиенты

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

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

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

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

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

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

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

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

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

Служебные примеси

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

Клирфикс

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

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

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

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

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

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

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

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

Задайте размеры объекта более легко.

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

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

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

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

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

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

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

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

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

Изображения сетчатки

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

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

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

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

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

Что включено

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

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

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

Монтаж

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

Бутстрап для Sass

CSS

Обзор

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

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

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

Нормализация.css

Контейнеры

Сеточная система

Введение

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

Параметры сетки

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

Пример: емкость для жидкости

Пример: мобильный и настольный компьютер

Пример: мобильный телефон, планшет, настольный компьютер.

Пример: перенос столбцов

Адаптивный столбец сбрасывается

Смещение столбцов

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

Порядок столбцов

Меньше примесей и переменных

Переменные

Миксины

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

Типография

Заголовки

ч1. Начальный заголовок

ч2. Начальный заголовок

h3. Начальный заголовок

h4. Начальный заголовок

h5. Начальный заголовок

h6. Начальный заголовок

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

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

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

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

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

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

Копия тела

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

Создано с меньшими затратами

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

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

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

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

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

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

Мелкий текст

Смелый

Курсив

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

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

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

Сокращения

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

Инициализм

Адреса

Цитаты

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

Параметры блокировки

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

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

Списки

Неупорядоченный

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

без стиля

В соответствии

Описание

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

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

Код

В соответствии

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

Базовый блок

Переменные

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

Столы

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

Полосатые ряды

Кроссбраузерная совместимость

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

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

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