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

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

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

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

Ориентированный в первую очередь на мобильные устройства

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

Для обеспечения правильной визуализации и сенсорного масштабирования, добавьте метатег viewport в ваш <head>.

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

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

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

Шрифты и ссылки

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

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

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

Normalize.css

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

Контейнеры (хранилища)

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

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

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

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

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

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

Введение

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

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

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

Мультимедийные запросы

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

/* Очень маленькие устройства (телефоны, менее чем 768px) *//* Без медиа запросов, так как в Bootstrap это по умолчанию *//* Небольшой устройствах (планшеты, 768px и выше) */@media(min-width:@screen-sm-min){...}/* Средние устройств (настольных компьютеров, 992px и выше) */@media(min-width:@screen-md-min){...}/* Большие устройств (большие компьютеры, 1200px и выше) */@media(min-width:@screen-lg-min){...}

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

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

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

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

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

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

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

.col-md-1

.col-md-8

.col-md-4

.col-md-6

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

Пример: Эластичные блоки

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

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

Пример: на Мобильных и Настольных устройствах

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

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

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

.col-xs-6

<!-- Укажите столбцы (col) для мобильного, это сделает одну полную ширину, а другую половину ширины --><divclass="row"><divclass="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div><divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><!-- Столбцы (col) начинаются с 50% шириной на мобильных устройствах и увеличиваются до 33,3% на настольных устройствах --><!-- Столбцы (col) всегда 50% в ширину, на мобильных и настольных компьютерах --><divclass="row"><divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div><divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div><divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><!--Колонны всегда 50% в ширину, на мобильный и рабочий стол --><divclass="row"><divclass="col-xs-6">.col-xs-6</div><divclass="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

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

Пример: Обёртка столбца (col)

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

.col-xs-9

.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-xs-6
Subsequent columns continue along the new line.

<divclass="row"><divclass="col-xs-9">.col-xs-9</div><divclass="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><divclass="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div></div>

Отзывчивый столбец сброса

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

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

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

<divclass="row"><divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div><divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div><!-- Добавьте дополнительное clearfix только для требуемого окна просмотра --><divclass="clearfix visible-xs-block"></div><divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div><divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div></div>

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

<divclass="row"><divclass="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div><divclass="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><divclass="row"><divclass="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div><divclass="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>

Удаление пазов

Удаление пазов из ряда и его столбцов с помощью класса .row-no-gutters.

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

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

.col-xs-6

<divclass="row row-no-gutters"><divclass="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div><divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><divclass="row row-no-gutters"><divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div><divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div><divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><divclass="row row-no-gutters"><divclass="col-xs-6">.col-xs-6</div><divclass="col-xs-6">.col-xs-6</div></div>

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

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

.col-md-4

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

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

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

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

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

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

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

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

Level 1: .col-sm-9

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

<divclass="row"><divclass="col-sm-9"> Level 1: .col-sm-9 <divclass="row"><divclass="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div><divclass="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

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

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

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

Переменные

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

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

Смешивания

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

// 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 emptymin-height:1px;// Inner gutter via paddingpadding-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 emptymin-height:1px;// Inner gutter via paddingpadding-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 emptymin-height:1px;// Inner gutter via paddingpadding-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 emptymin-height:1px;// Inner gutter via paddingpadding-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);}

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

Заголовки

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

h1. Bootstrap heading	Semibold 36px
h2. Bootstrap heading	Semibold 30px
h3. Bootstrap heading	Semibold 24px
h4. Bootstrap heading	Semibold 18px
h5. Bootstrap heading	Semibold 14px
h6. Bootstrap heading	Semibold 12px

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

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

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

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

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

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

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

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

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

<p>...</p>

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

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

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

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

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

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

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

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

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

You can use the mark tag to highlight text.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

This line of text will render as underlined

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

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

Маленький текст

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

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

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

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

Жирный шрифт

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

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Курсив

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

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

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

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

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

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

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

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

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

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

Lowercased text.

Uppercased text.

Capitalized text.

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

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

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

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

An abbreviation of the word attribute is attr.

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

Инициализм

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

HTML is the best thing since sliced bread.

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

Адреса

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

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

Full Name
first.last@example.com

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

Цитаты

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

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

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

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

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

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

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

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

Списки

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

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

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

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

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

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

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

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

Без стиля

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

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

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

Встроенный

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

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Описание

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

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

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

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

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

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

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

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

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

Встроенный

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

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

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

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

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

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

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

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

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

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

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

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

Переменные

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

y = mx + b

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

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

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

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

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

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

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

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

<tableclass="table"> ...
</table>

"Зебра"

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

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

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

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

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

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

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

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

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

Курсор строк

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

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

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

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

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

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

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

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

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

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

#	Заголовок столбца	Заголовок столбца	Заголовок столбца
1	Column content	Column content	Column content
2	Column content	Column content	Column content
3	Column content	Column content	Column content
4	Column content	Column content	Column content
5	Column content	Column content	Column content
6	Column content	Column content	Column content
7	Column content	Column content	Column content
8	Column content	Column content	Column content
9	Column content	Column content	Column content

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

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

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

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

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

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

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

Firefox и fieldsets

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

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

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

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

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

<divclass="table-responsive"><tableclass="table"> ... </table></div>

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

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

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

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

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

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

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

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

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

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

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

<formclass="form-inline"><divclass="form-group"><labelfor="exampleInputName2">Name</label><inputtype="text"class="form-control"id="exampleInputName2"placeholder="Jane Doe"></div><divclass="form-group"><labelfor="exampleInputEmail2">Email</label><inputtype="email"class="form-control"id="exampleInputEmail2"placeholder="jane.doe@example.com"></div><buttontype="submit"class="btn btn-default">Send invitation</button></form>

<formclass="form-inline"><divclass="form-group"><labelclass="sr-only"for="exampleInputEmail3">Email address</label><inputtype="email"class="form-control"id="exampleInputEmail3"placeholder="Email"></div><divclass="form-group"><labelclass="sr-only"for="exampleInputPassword3">Password</label><inputtype="password"class="form-control"id="exampleInputPassword3"placeholder="Password"></div><divclass="checkbox"><label><inputtype="checkbox"> Remember me </label></div><buttontype="submit"class="btn btn-default">Sign in</button></form>

<formclass="form-inline"><divclass="form-group"><labelclass="sr-only"for="exampleInputAmount">Amount (in dollars)</label><divclass="input-group"><divclass="input-group-addon">$</div><inputtype="text"class="form-control"id="exampleInputAmount"placeholder="Amount"><divclass="input-group-addon">.00</div></div></div><buttontype="submit"class="btn btn-primary">Transfer cash</button></form>

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

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

<formclass="form-horizontal"><divclass="form-group"><labelfor="inputEmail3"class="col-sm-2 control-label">Email</label><divclass="col-sm-10"><inputtype="email"class="form-control"id="inputEmail3"placeholder="Email"></div></div><divclass="form-group"><labelfor="inputPassword3"class="col-sm-2 control-label">Password</label><divclass="col-sm-10"><inputtype="password"class="form-control"id="inputPassword3"placeholder="Password"></div></div><divclass="form-group"><divclass="col-sm-offset-2 col-sm-10"><divclass="checkbox"><label><inputtype="checkbox"> Remember me </label></div></div></div><divclass="form-group"><divclass="col-sm-offset-2 col-sm-10"><buttontype="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 правильно декларирован.

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

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

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

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

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

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

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

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

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

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

<divclass="checkbox"><label><inputtype="checkbox"value=""> Option one is this and that&mdash;be sure to include why it's great </label></div><divclass="checkbox disabled"><label><inputtype="checkbox"value=""disabled> Option two is disabled </label></div><divclass="radio"><label><inputtype="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><divclass="radio"><label><inputtype="radio"name="optionsRadios"id="optionsRadios2"value="option2"> Option two can be something else and selecting it will deselect option one </label></div><divclass="radio disabled"><label><inputtype="radio"name="optionsRadios"id="optionsRadios3"value="option3"disabled> Option three is disabled </label></div>

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

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

<labelclass="checkbox-inline"><inputtype="checkbox"id="inlineCheckbox1"value="option1"> 1
</label><labelclass="checkbox-inline"><inputtype="checkbox"id="inlineCheckbox2"value="option2"> 2
</label><labelclass="checkbox-inline"><inputtype="checkbox"id="inlineCheckbox3"value="option3"> 3
</label><labelclass="radio-inline"><inputtype="radio"name="inlineRadioOptions"id="inlineRadio1"value="option1"> 1
</label><labelclass="radio-inline"><inputtype="radio"name="inlineRadioOptions"id="inlineRadio2"value="option2"> 2
</label><labelclass="radio-inline"><inputtype="radio"name="inlineRadioOptions"id="inlineRadio3"value="option3"> 3
</label>

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

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

<divclass="checkbox"><label><inputtype="checkbox"id="blankCheckbox"value="option1"aria-label="..."></label></div><divclass="radio"><label><inputtype="radio"name="blankRadio"id="blankRadio1"value="option1"aria-label="..."></label></div>

Подборки

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

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

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

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

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

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

<formclass="form-horizontal"><divclass="form-group"><labelclass="col-sm-2 control-label">Email</label><divclass="col-sm-10"><pclass="form-control-static">email@example.com</p></div></div><divclass="form-group"><labelfor="inputPassword"class="col-sm-2 control-label">Password</label><divclass="col-sm-10"><inputtype="password"class="form-control"id="inputPassword"placeholder="Password"></div></div></form>

<formclass="form-inline"><divclass="form-group"><labelclass="sr-only">Email</label><pclass="form-control-static">email@example.com</p></div><divclass="form-group"><labelfor="inputPassword2"class="sr-only">Password</label><inputtype="password"class="form-control"id="inputPassword2"placeholder="Password"></div><buttontype="submit"class="btn btn-default">Confirm identity</button></form>

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

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

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

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

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

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

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

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

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

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

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

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

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

<form><fieldsetdisabled><divclass="form-group"><labelfor="disabledTextInput">Disabled input</label><inputtype="text"id="disabledTextInput"class="form-control"placeholder="Disabled input"></div><divclass="form-group"><labelfor="disabledSelect">Disabled select menu</label><selectid="disabledSelect"class="form-control"><option>Disabled select</option></select></div><divclass="checkbox"><label><inputtype="checkbox"> Can't check this </label></div><buttontype="submit"class="btn btn-primary">Submit</button></fieldset></form>

Readonly - состояние только для чтения

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

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

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

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

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

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

<labelclass="sr-only"for="inputHelpBlock">Input with help text</label><inputtype="text"id="inputHelpBlock"class="form-control"aria-describedby="helpBlock">
...
<spanid="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 примеры), или предоставив дополнительный текстовый help text. В частности, для вспомогательных технологий недопустимым элементам управления формой также может быть назначен атрибут aria-invalid="true".

<divclass="form-group has-success"><labelclass="control-label"for="inputSuccess1">Input with success</label><inputtype="text"class="form-control"id="inputSuccess1"aria-describedby="helpBlock2"><spanid="helpBlock2"class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span></div><divclass="form-group has-warning"><labelclass="control-label"for="inputWarning1">Input with warning</label><inputtype="text"class="form-control"id="inputWarning1"></div><divclass="form-group has-error"><labelclass="control-label"for="inputError1">Input with error</label><inputtype="text"class="form-control"id="inputError1"></div><divclass="has-success"><divclass="checkbox"><label><inputtype="checkbox"id="checkboxSuccess"value="option1"> Checkbox with success </label></div></div><divclass="has-warning"><divclass="checkbox"><label><inputtype="checkbox"id="checkboxWarning"value="option1"> Checkbox with warning </label></div></div><divclass="has-error"><divclass="checkbox"><label><inputtype="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) была включена для иллюстративных целей.

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

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

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

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

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

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

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

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

Установите высоту, используя классы, такие как .input-lg, и установите ширину, используя классы столбцов сетки, такие как .col-lg-*.

Высота по размеру

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

<inputclass="form-control input-lg"type="text"placeholder=".input-lg"><inputclass="form-control"type="text"placeholder="Default input"><inputclass="form-control input-sm"type="text"placeholder=".input-sm"><selectclass="form-control input-lg">...</select><selectclass="form-control">...</select><selectclass="form-control input-sm">...</select>

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

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

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

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

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

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

Теги кнопки

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

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

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

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

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

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

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

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

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

Опции

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

<!-- Стандартная кнопка --><buttontype="button"class="btn btn-default">Default</button><!-- Обеспечивает дополнительную визуальный вес и идентифицирует основное действие в набор кнопок --><buttontype="button"class="btn btn-primary">Primary</button><!-- Указывает на успешное или позитивные действия --><buttontype="button"class="btn btn-success">Success</button><!-- Контекстуальные кнопка для информационных сообщений о сигналах тревоги --><buttontype="button"class="btn btn-info">Info</button><!-- Указывает, что следует проявлять осторожность с этим действием --><buttontype="button"class="btn btn-warning">Warning</button><!-- Указывает на опасное или потенциально негативное действие --><buttontype="button"class="btn btn-danger">Danger</button><!-- Преуменьшить роль кнопки, сделав его похожим на ссылку, сохраняя поведение кнопки --><buttontype="button"class="btn btn-link">Link</button>

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

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

Размеры

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

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

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

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

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

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

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

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

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

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

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

Primary link Link

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

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

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

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

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

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

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

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

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

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

Primary link Link

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

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

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

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

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

Контекстный фон

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

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

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

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

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

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

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

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

Значек меню

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

<spanclass="caret"></span>

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

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

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

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

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

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

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

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

Clearfix

Легко очистить параметры для float объектов, добавляя .clearfix к родительскому элементу. Использует микро-clearfix, популяризированный Nicolas Gallagher. Может также использоваться как миксин.

<!-- Использование как класс --><divclass="clearfix">...</div>

Сам // миксин
.clearfix(){&:before,&:after{content:" ";display:table;}&:after{clear:both;}}// Использования в качестве mixin
.element{.clearfix();}

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

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

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

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

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

// Классов
.show{display:block!important;}.hidden{display:none!important;}.invisible{visibility:hidden;}// Использования в качестве примеси
.element{.show();}.another-element{.hidden();}

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

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

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

// Использования в качестве mixin
.skip-navigation{.sr-only();.sr-only-focusable();}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Компиляция Bootstrap

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

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

Переменные

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

Цвета

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

@gray-darker:lighten(#000,13.5%);// #222
@gray-dark:lighten(#000,20%);// #333
@gray:lighten(#000,33.5%);// #555
@gray-light:lighten(#000,46.7%);// #777
@gray-lighter:lighten(#000,93.5%);//#eee

@brand-primary:darken(#428bca,6.5%);// #337ab7
@brand-success:#5cb85c;@brand-info:#5bc0de;@brand-warning:#f0ad4e;@brand-danger:#d9534f;

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

// Использовать как есть
.masthead{background-color:@brand-primary;}// Переназначить переменные Less
@alert-message-background:@brand-info;.alert{background-color:@alert-message-background;}

Каркас

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

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

Ссылки

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

// Переменные
@link-color:@brand-primary;@link-hover-color:darken(@link-color,15%);// Использования
a{color:@link-color;text-decoration:none;&:hover{color:@link-hover-color;text-decoration:underline;}}

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

Типография

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

@font-family-sans-serif:"Helvetica Neue",Helvetica,Arial,sans-serif;@font-family-serif:Georgia,"Times New Roman",Times,serif;@font-family-monospace:Menlo,Monaco,Consolas,"Courier New",monospace;@font-family-base:@font-family-sans-serif;@font-size-base:14px;@font-size-large:ceil((@font-size-base*1.25));// ~18px
@font-size-small:ceil((@font-size-base*0.85));// ~12px
@font-size-h1:floor((@font-size-base*2.6));// ~36px
@font-size-h2:floor((@font-size-base*2.15));// ~30 пикселей
@font-size-h3:ceil((@font-size-base*1.7));// ~Значение 24px
@font-size-h4:ceil((@font-size-base*1.25));// ~18px
@font-size-h5:@font-size-base;@font-size-h6:ceil((@font-size-base*0.85));// ~12px
@line-height-base:1.428571429;// 20/14
@line-height-computed:floor((@font-size-base*@line-height-base));// ~20 пикселей
@headings-font-family:inherit;@headings-font-weight:500;@headings-line-height:1.1;@headings-color:inherit;

Иконки

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

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

Компоненты

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

@padding-base-vertical:6px;@padding-base-horizontal:12px;@padding-large-vertical:10px;@padding-large-horizontal:16px;@padding-small-vertical:5px;@padding-small-horizontal:10px;@padding-xs-vertical:1px;@padding-xs-horizontal:5px;@line-height-large:1.33;@line-height-small:1.5;@border-radius-base:4px;@border-radius-large:6px;@border-radius-small:3px;@component-active-color:#fff;@component-active-bg:@brand-primary;@caret-width-base:4px;@caret-width-large:5px;

Поставщики mixin

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

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

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

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

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

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

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

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

Тени

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

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

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

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

Переходы

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

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

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

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

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

.rotate(@degrees){-webkit-transform:rotate(@degrees);-ms-transform:rotate(@degrees);// Только IE9 transform:rotate(@degrees);}.scale(@ratio;@ratio-y...){-webkit-transform:scale(@ratio,@ratio-y);-ms-transform:scale(@ratio,@ratio-y);// Только IE9 transform:scale(@ratio,@ratio-y);}.translate(@x;@y){-webkit-transform:translate(@x,@y);-ms-transform:translate(@x,@y);// Только IE9 transform:translate(@x,@y);}.skew(@x;@y){-webkit-transform:skew(@x,@y);-ms-transform:skewX(@x)skewY(@y);// См. https://github.com/twbs/bootstrap/issues/4885; ИЕ9+
transform:skew(@x,@y);}.translate3d(@x;@y;@z){-webkit-transform:translate3d(@x,@y,@z);transform:translate3d(@x,@y,@z);}.rotateX(@degrees){-webkit-transform:rotateX(@degrees);-ms-transform:rotateX(@degrees);// Только IE9 transform:rotateX(@degrees);}.rotateY(@degrees){-webkit-transform:rotateY(@degrees);-ms-transform:rotateY(@degrees);// Только IE9 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 transform-origin:@origin;}

Анимации

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

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

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

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

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

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

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

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

Столбцы

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

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

Градиенты

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

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

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

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

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

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

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

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

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

Утилиты mixin

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

Clearfix

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

// Миксин
.clearfix(){&:before,&:after{content:" ";display:table;}&:after{clear:both;}}// Использования
.container{.clearfix();}

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

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

// Миксин
.center-block(){display:block;margin-left:auto;margin-right:auto;}// Использования
.container{width:940px;.center-block();}

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

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

// Миксины
.size(@width;@height){width:@width;height:@height;}.square(@size){.size(@size;@size);}// Использования
.image{.size(400px;300px);}.avatar{.square(48px);}

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

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

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

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

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

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

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

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

.img-retina(@file-1x;@file-2x;@width-1x;@height-1x){background-image:url("@{file-1x}");@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2),onlyscreenand(min--moz-device-pixel-ratio:2),onlyscreenand(-o-min-device-pixel-ratio:2/1),onlyscreenand(min-device-pixel-ratio:2),onlyscreenand(min-resolution:192dpi),onlyscreenand(min-resolution:2dppx){background-image:url("@{file-2x}");background-size:@width-1x@height-1x;}}// Использования
.jumbotron{.img-retina("/img/bg-1x.png","/img/bg-2x.png",100px,100px);}

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

Что включено

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

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

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

Установка

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

Bootstrap для Sass

CSS

Обзор

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

Ориентированный в первую очередь на мобильные устройства

Шрифты и ссылки

Normalize.css

Контейнеры (хранилища)

Блочная система (Система разметки)

Введение

Мультимедийные запросы

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

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

Пример: Эластичные блоки

Пример: на Мобильных и Настольных устройствах

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

Пример: Обёртка столбца (col)

Отзывчивый столбец сброса

Удаление пазов

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

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

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

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

Переменные

Смешивания

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

Типография

Заголовки

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

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

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

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

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

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

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

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

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

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

Маленький текст

Жирный шрифт

Курсив

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

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

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

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

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

Инициализм

Адреса

Цитаты

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

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

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

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

Списки

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

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

Без стиля

Встроенный

Описание

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

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

Код

Встроенный

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

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

Переменные

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

Таблицы

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

"Зебра"

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

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

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