CSS
Глобальные настройки CSS, стилизованные и улучшенные основополагающие HTML-элементы с расширяемыми классами и продвинутая система сетки.
Обзор
Получите подробную информацию о ключевых компонентах инфраструктуры Bootstrap, включая наш подход к более эффективному, быстрому и надежному веб-разработке.
HTML5 doctype
Bootstrap использует определенные HTML-элементы и свойства CSS, которые требуют использования HTML5 doctype. Включите его в начале всех своих проектов.
<!doctype html> <html lang="en"> ... </html>
Мобильная первая
В Bootstrap 2 мы добавили необязательные мобильные стили для ключевых аспектов фреймворка. В Bootstrap 3 мы переработали проект, чтобы он был мобильно-ориентированным с самого начала. Вместо добавления необязательных мобильных стилей, они встроены в ядро. Фактически, Bootstrap — мобильно-ориентированный. Мобильные стили можно найти во всей библиотеке вместо отдельных файлов.
Для обеспечения правильного отображения и масштабирования с помощью сенсорного экрана, добавляйте тег meta viewport в ваш <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">
Вы можете отключить возможности масштабирования на мобильных устройствах, добавив user-scalable=no в тег meta viewport. Это отключает масштабирование, что означает, что пользователи могут только прокручивать, и ваш сайт будет ощущаться немного как нативное приложение. В целом, мы не рекомендуем это для каждого сайта, поэтому будьте осторожны!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Шрифты и ссылки
Bootstrap устанавливает базовые глобальные стили отображения, шрифтов и ссылок. В частности, мы:
- Устанавливаем
background-color: #fff;дляbody - Используем атрибуты
@font-family-base,@font-size-base, и@line-height-baseв качестве нашей типографической базы - Устанавливаем глобальный цвет ссылок через
@link-colorи применяем подчёркивание ссылок только для:hover
Эти стили можно найти в scaffolding.less.
Normalize.css
Для улучшения кроссбраузерного отображения мы используем Normalize.css, проект Николаса Галлагера и Джонатана Нила.
Контейнеры
Bootstrap требует элемента-контейнера для обертывания содержимого сайта и размещения нашей системы сетки. Вы можете выбрать один из двух контейнеров для использования в своих проектах. Обратите внимание, что из-за padding и других факторов, ни один из контейнеров не является вложенным.
Используйте .container для адаптивного контейнера с фиксированной шириной.
<div class="container"> ... </div>
Используйте .container-fluid для контейнера с полной шириной, занимающего всю ширину вашего экрана.
<div class="container-fluid"> ... </div>
Система сетки
Bootstrap включает адаптивную, мобильную систему сетки с плавающими колонками, которая масштабируется до 12 колонок по мере увеличения размера устройства или экрана. Она включает предопределенные классы для удобных вариантов макета, а также мощные миксины для генерации более семантических макетов.
Введение
Системы сетки используются для создания макетов страниц с помощью ряда строк и столбцов, которые содержат ваше содержимое. Вот как работает система сетки Bootstrap:
- Строки должны быть размещены внутри
.container(фиксированной ширины) или.container-fluid(полной ширины) для правильного выравнивания и отступов. - Используйте строки для создания горизонтальных групп столбцов.
- Содержание должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными потомками строк.
- Доступны предопределенные классы сетки, такие как
.rowи.col-xs-4, для быстрого создания макетов сетки. Также можно использовать миксины Less для более семантических макетов. - Столбцы создают отступы (промежутки между содержимым столбцов) с помощью
padding. Этот отступ смещён в строках для первого и последнего столбца с помощью отрицательного отступа в.row. - Отрицательный отступ — причина того, что примеры ниже выровнены. Так содержимое столбцов сетки выравнивается с содержимым вне сетки.
- Столбцы сетки создаются путем указания количества из 12 доступных столбцов, которые вы хотите охватить. Например, три равных столбца будут использовать три
.col-xs-4. - Если в одной строке размещено более 12 столбцов, каждая группа дополнительных столбцов будет как единое целое переноситься на новую строку.
- Классы сетки применяются к устройствам с шириной экрана, большей или равной размерам точек останова, и переопределяют классы сетки, предназначенные для устройств меньшего размера. Таким образом, например, применение любого класса
.col-md-*к элементу повлияет не только на его стиль на средних устройствах, но также и на больших, если класс.col-lg-*отсутствует.
Обратите внимание на примеры для применения этих принципов в вашем коде.
Медиа-запросы
Мы используем следующие медиа-запросы в наших файлах Less для создания ключевых точек останова в нашей системе сетки.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... } Иногда мы расширяем эти медиа-запросы, чтобы включить max-width для ограничения CSS для более узкого набора устройств.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... } Параметры сетки
Посмотрите, как различные аспекты системы сетки Bootstrap работают на нескольких устройствах с помощью удобной таблицы.
| Очень маленькие устройства Телефоны (<768px) | Маленькие устройства Планшеты (≥768px) | Средние устройства Рабочие столы (≥992px) | Крупные устройства Рабочие столы (≥1200px) | |
|---|---|---|---|---|
| Поведение сетки | Горизонтальное во всех случаях | Сжатое в начале, горизонтальное над точками останова | ||
| Ширина контейнера | Нет (авто) | 750px | 970px | 1170px |
| Префикс класса | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # столбцов | 12 | |||
| Ширина столбца | Авто | ~62px | ~81px | ~97px |
| Ширина отступа | 30px (15px с каждой стороны столбца) | |||
| Вложенные | Да | |||
| Смещения | Да | |||
| Порядок столбцов | Да | |||
Пример: Стек-в-горизонтальное
Используя один набор классов сетки .col-md-*, вы можете создать простую систему сетки, которая отображается стопкой на мобильных устройствах и планшетах (диапазон от очень маленьких до маленьких), прежде чем станет горизонтальной на настольных компьютерах (средние). Разместите столбцы сетки в любом .row.
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
Пример: Контейнер с текучей шириной
Преобразуйте любой макет сетки с фиксированной шириной в макет с полной шириной, изменив ваш внешний .container на .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div> Пример: Мобильное и настольное
Вы не хотите, чтобы ваши столбцы просто складывались на устройствах меньшего размера? Используйте классы сетки для очень маленьких и средних устройств, добавив .col-xs-* .col-md-* к вашим столбцам. Посмотрите на пример ниже, чтобы лучше понять, как это работает.
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
Пример: Мобильное, планшетное, настольное
Развивайте предыдущий пример, создавая еще более динамичные и мощные макеты с использованием классов планшетной сетки .col-sm-*.
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>
Пример: Обёртывание столбцов
Если в одной строке размещено более 12 столбцов, каждая группа дополнительных столбцов будет как единое целое переноситься на новую строку.
<div class="row"> <div class="col-xs-9">.col-xs-9</div> <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> </div>
Ресеты адаптивных столбцов
Имея четыре уровня доступных сеток, вы неизбежно столкнетесь с проблемами, когда при определенных точках останова ваши столбцы не очищаются должным образом, так как один выше другого. Для решения этой проблемы используйте комбинацию .clearfix и наших адаптивных утилитарных классов.
<div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>
Помимо очистки столбцов при адаптивных точках останова, вам может потребоваться восстановить смещения, сдвиги или выравнивания. Посмотрите это в действии в примере сетки.
<div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div> </div>
Убрать отступы
Удалите отступы из строки и ее столбцов с помощью класса .row-no-gutters.
<div class="row row-no-gutters"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row row-no-gutters"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row row-no-gutters"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
Смещение столбцов
Переместите столбцы вправо с помощью классов .col-md-offset-* . Эти классы увеличивают левый отступ столбца на * столбцов. Например, .col-md-offset-4 смещает .col-md-4 на четыре столбца.
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
Вы также можете переопределить смещения из более низких уровней сетки с помощью классов .col-*-offset-0.
<div class="row"> <div class="col-xs-6 col-sm-4"> </div> <div class="col-xs-6 col-sm-4"> </div> <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0"> </div> </div>
Вложение столбцов
Для вложения содержимого с помощью стандартной сетки добавьте новую .row и набор .col-sm-* столбцов внутри существующего столбца .col-sm-*. Вложенные строки должны включать набор столбцов, которые суммируются до 12 или меньше (не обязательно использовать все 12 доступных столбцов).
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div> Порядок столбцов
Легко измените порядок встроенных столбцов сетки с помощью .col-md-push-* и .col-md-pull-* модификаторов.
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
Миксины и переменные Less
В дополнение к готовым классам сетки для быстрого создания макетов, Bootstrap включает переменные и миксины Less для быстрого создания собственных простых, семантических макетов.
Переменные
Переменные определяют количество столбцов, ширину отступа и точку останова медиа-запроса, при которой начинается плавание столбцов. Мы используем их для генерации предопределенных классов сетки, описанных выше, а также для пользовательских миксинов, перечисленных ниже.
@grid-columns: 12; @grid-gutter-width: 30px; @grid-float-breakpoint: 768px;
Миксины
Миксины используются совместно с переменными сетки для генерации семантического CSS для отдельных столбцов сетки.
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
} Пример использования
Вы можете изменить переменные на свои собственные значения или просто использовать миксины со значениями по умолчанию. Вот пример использования значений по умолчанию для создания двухколоночного макета с промежутком.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
} <div class="wrapper"> <div class="content-main">...</div> <div class="content-secondary">...</div> </div>
Шрифты
Заголовки
Доступны все HTML-заголовки, <h1> до <h6>. Также доступны классы .h1 до .h6, для случаев, когда вы хотите соответствовать стилю шрифта заголовка, но все еще хотите, чтобы ваш текст отображался в одну строку.
<h1>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>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>
Основной текст
Глобальный стандартный font-size Bootstrap составляет 14px, а line-height — 1.428. Это применяется к <body> и всем абзацам. Кроме того, <p> (абзацы) получают нижнюю границу, равную половине их рассчитанной высоты строки (по умолчанию 10px).
<p>...</p>
Основной текст с выделением
Выделите абзац, добавив .lead.
<p class="lead">...</p>
Создано с использованием Less
Шкалу шрифтов основаны на двух переменных Less в variables.less: @font-size-base и @line-height-base. Первая — это основной размер шрифта, используемый повсюду, а вторая — основная высота строки. Мы используем эти переменные и немного математики, чтобы создать отступы, поля и высоту строки всех наших шрифтов и многое другое. Настройте их, и Bootstrap адаптируется.
Элементы текста в строке
Текст с пометкой
Для выделения фрагмента текста из-за его актуальности в другом контексте используйте тег <mark>.
You can use the mark tag to <mark>highlight</mark> text.
Удаленный текст
Для обозначения фрагментов текста, которые были удалены, используйте тег <del>.
<del>This line of text is meant to be treated as deleted text.</del>
Зачеркнутый текст
Для обозначения фрагментов текста, которые больше не актуальны, используйте тег <s>.
<s>This line of text is meant to be treated as no longer accurate.</s>
Вставленный текст
Для обозначения дополнений к документу используйте тег <ins>.
<ins>This line of text is meant to be treated as an addition to the document.</ins>
Подчеркнутый текст
Для подчеркивания текста используйте тег <u>.
<u>This line of text will render as underlined</u>
Используйте стандартные теги выделения HTML с легкими стилями.
Мелкий текст
Для снижения важности текста в строке или блоках используйте тег <small> для установки текста в 85% размера родителя. Элементы заголовков получают свой собственный font-size для вложенных <small> элементов.
В качестве альтернативы вы можете использовать элемент в строке с .small вместо любого <small>.
<small>This line of text is meant to be treated as fine print.</small>
Жирный
Для выделения фрагмента текста с более жирным весом шрифта.
<strong>rendered as bold text</strong>
Курсив
Для выделения фрагмента текста курсивом.
<em>rendered as italicized text</em>
Альтернативные элементы
Вы можете использовать <b> и <i> в HTML5. <b> предназначен для выделения слов или фраз без передачи дополнительной важности, а <i> в основном используется для голоса, технических терминов и т. д.
Классы выравнивания
Легко перенастраивайте текст в компоненты с помощью классов выравнивания текста.
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
Классы преобразования
Преобразуйте текст в компонентах с помощью классов изменения регистра текста.
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
Сокращения
Стилевое реализация HTML-элемента <abbr> для сокращений и аббревиатур, показывающего развернутое значение при наведении курсора. Сокращения с атрибутом title имеют светлую пунктирную нижнюю границу и курсор помощи при наведении, предоставляя дополнительный контекст при наведении и для пользователей с технологиями вспомогательного доступа.
Базовое сокращение
<abbr title="attribute">attr</abbr>
Аббревиатура
Добавьте .initialism к сокращению для уменьшения размера шрифта.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Адреса
Представьте контактную информацию ближайшего предка или всего объема работы. Сохраните форматирование, завершив все строки с <br>.
<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
Блочные цитаты
Для цитирования блоков контента из другого источника в вашем документе.
Блочная цитата по умолчанию
Оборачивайте <blockquote> вокруг любого HTML в качестве цитаты. Для прямых цитат мы рекомендуем <p>.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
Варианты блочных цитат
Изменения стиля и контента для простых вариантов стандартной <blockquote>.
Наименование источника
Добавьте <footer> для идентификации источника. Оборачивайте имя источника работы в <cite>.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
Альтернативные отображения
Добавьте .blockquote-reverse для блочной цитаты с выровненным вправо содержимым.
<blockquote class="blockquote-reverse"> ... </blockquote>
Списки
Неупорядоченные
Список элементов, в котором порядок не имеет существенного значения.
<ul> <li>...</li> </ul>
Упорядоченные
Список элементов, в котором порядок имеет существенное значение.
<ol> <li>...</li> </ol>
Нестилевые
Удалите стандартный list-style и левый отступ в элементах списка (только непосредственные дочерние элементы). Это применяется только к непосредственным дочерним элементам списка, что означает, что вам также потребуется добавить класс для любых вложенных списков.
<ul class="list-unstyled"> <li>...</li> </ul>
Встроенные
Разместите все элементы списка в одной строке с помощью display: inline-block; и небольшими полями.
<ul class="list-inline"> <li>...</li> </ul>
Описательный
Список терминов со связанными описаниями.
<dl> <dt>...</dt> <dd>...</dd> </dl>
Горизонтальное описание
Выровняйте термины и описания в <dl> рядом друг с другом. Сначала они выстроены как стандартные <dl>, но при расширении навигационной панели расширяются и они.
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
Автоматическое усечение
Горизонтальные описательные списки будут усекать слишком длинные термины, чтобы они поместились в левой колонке с text-overflow. В более узких окнах просмотра они изменятся на стандартный сточный макет.
Код
Встроенный
Оборачивайте фрагменты встроенного кода с помощью <code>.
For example, <code><section></code> should be wrapped as inline.
Ввод пользователя
Используйте <kbd> для обозначения ввода, который обычно вводится с помощью клавиатуры.
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> для нескольких строк кода. Убедитесь, что вы экранируете все угловые скобки в коде для правильного отображения.
<pre><p>Sample text here...</p></pre>
Вы можете дополнительно добавить класс .pre-scrollable, который установит максимальную высоту в 350px и предоставит вертикальную полосу прокрутки.
Переменные
Для указания переменных используйте тег <var>.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Образец вывода
Для обозначения блоков примерного вывода программы используйте тег <samp>.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Таблицы
Базовый пример
Для базового оформления — небольшого отступа и только горизонтальных разделителей — добавьте базовый класс .table к любой <table>. Это может показаться избыточным, но учитывая широкое использование таблиц для других плагинов, таких как календари и выбор дат, мы решили изолировать наши пользовательские стили таблиц.
<table class="table"> ... </table>
Полосатые строки
Используйте .table-striped для добавления полосатого оформления к любой строке таблицы в <tbody>.
Совместимость с различными браузерами
Полосатые таблицы стилизуются с помощью CSS-селектора :nth-child, который недоступен в Internet Explorer 8.
<table class="table table-striped"> ... </table>
Оформленные границы таблицы
Добавьте .table-bordered для границ со всех сторон таблицы и ячеек.
<table class="table table-bordered"> ... </table>
Подсветка строк при наведении
Добавьте .table-hover для активации эффекта наведения на строки таблицы внутри <tbody>.
<table class="table table-hover"> ... </table>
Сжатая таблица
Добавьте .table-condensed для уменьшения размера таблицы за счет уменьшения отступов ячеек вдвое.
<table class="table table-condensed"> ... </table>
Контекстные классы
Используйте контекстные классы для изменения цвета строк таблицы или отдельных ячеек.
| Класс | Описание |
|---|---|
.active | Применяет цвет наведения к определенной строке или ячейке |
.success | Указывает на успешное или положительное действие |
.info | Указывает на нейтральное информативное изменение или действие |
.warning | Указывает на предупреждение, требующее внимания |
.danger | Указывает на опасное или потенциально негативное действие |
<!-- On rows --> <tr class="active">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> <tr class="info">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="active">...</td> <td class="success">...</td> <td class="warning">...</td> <td class="danger">...</td> <td class="info">...</td> </tr>
Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла строке таблицы или отдельной ячейке обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий — таким как программы чтения с экрана. Убедитесь, что информация, обозначаемая цветом, либо очевидна из самого содержания (видимого текста в соответствующей строке/ячейке таблицы), либо включена альтернативными способами, такими как дополнительный текст, скрытый с помощью класса .sr-only.
Реагирующие таблицы
Создайте адаптивные таблицы, обернув любую .table в .table-responsive, чтобы они прокручивались по горизонтали на устройствах с малым экраном (меньше 768px). При просмотре на экранах больше 768px вы не увидите никакой разницы в этих таблицах.
Вертикальное обрезание/обрезание
Адаптивные таблицы используют overflow-y: hidden, которые обрезают любое содержимое, выходящее за нижние или верхние края таблицы. В частности, это может обрезать раскрывающиеся меню и другие сторонние виджеты.
Firefox и fieldsets
В Firefox есть некоторые некорректные стили fieldset, связанные с width, которые мешают адаптивной таблице. Это нельзя переопределить без специфичного для Firefox взлома, который мы не предоставляем в Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
} Дополнительную информацию можно найти на этой странице Stack Overflow.
<div class="table-responsive">
<table class="table">
...
</table>
</div> Формы
Базовый пример
Отдельные элементы управления формой автоматически получают некоторую глобальную стилизацию. Все текстовые <input>, <textarea>, и <select> элементы с .form-control устанавливаются по умолчанию в width: 100%;. Для оптимального интервала оберните метки и элементы управления в .form-group.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> Не смешивайте группы форм с группами ввода
Не смешивайте напрямую группы форм с группами ввода. Вместо этого вложите группу ввода внутрь группы формы.
Формы в одну строку
Добавьте .form-inline к вашей форме (которая не обязательно должна быть <form>) для выравнивания элементов управления влево и в одну строку. Это относится только к формам на экранах с шириной не менее 768px.
Возможна необходимость в пользовательской ширине
По умолчанию в Bootstrap для полей ввода и выпадающих списков установлен width: 100%;. В формах в одну строку мы сбрасываем это значение на width: auto;, чтобы несколько элементов управления могли располагаться в одной строке. В зависимости от вашей компоновки могут потребоваться дополнительные пользовательские ширины.
Всегда добавляйте метки
Программы чтения с экрана будут иметь проблемы с вашими формами, если вы не добавите метку для каждого поля ввода. Для этих форм в одну строку вы можете скрыть метки, используя класс .sr-only. Существуют альтернативные способы предоставления метки для вспомогательных технологий, такие как атрибуты aria-label, aria-labelledby или title. Если ни один из них не указан, программы чтения с экрана могут использовать атрибут placeholder, если он присутствует, но обратите внимание, что использование placeholder в качестве замены других методов маркирования не рекомендуется.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form> <form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form> <form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form> Горизонтальная форма
Используйте предопределенные классы сетки Bootstrap для выравнивания меток и групп элементов управления формы в горизонтальном расположении, добавив .form-horizontal к форме (которая не обязательно должна быть <form>). Это изменяет .form-group на поведение как строки сетки, поэтому нет необходимости в .row.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form> Поддерживаемые элементы управления
Примеры стандартных элементов управления формы, поддерживаемые в примере макета формы.
Поля ввода
Наиболее распространенные элементы управления формы, текстовые поля ввода. Поддержка всех типов HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, и color.
Требуется объявление типа
Поля ввода будут полностью стилизованы только в том случае, если их type правильно объявлен.
<input type="text" class="form-control" placeholder="Text input">
Группы ввода
Чтобы добавить интегрированный текст или кнопки перед и/или после любого текстового <input>, ознакомьтесь с компонентом группы ввода.
Область многострочного текста
Элемент управления формой, поддерживающий несколько строк текста. Изменяйте атрибут rows по мере необходимости.
<textarea class="form-control" rows="3"></textarea>
Флажки и радиокнопки
Флажки предназначены для выбора одного или нескольких вариантов в списке, а радиокнопки — для выбора одного варианта из многих.
Поддерживаются отключенные флажки и радиокнопки, но чтобы обеспечить курсор «не разрешено» при наведении на родительский элемент <label>, вам необходимо добавить класс .disabled к родительскому элементу .radio, .radio-inline, .checkbox, или .checkbox-inline.
По умолчанию (со стопкой)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div> Флажки и радиокнопки в одну строку
Используйте классы .checkbox-inline или .radio-inline для серии флажков или радиокнопок для элементов управления, которые отображаются в одной строке.
<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3 </label>
Флажки и радиокнопки без текста метки
Если внутри <label> нет текста, ввод размещается так, как ожидалось. В настоящее время работает только для флажков и радиокнопок, не расположенных в одну строку. Не забудьте предоставить метку для вспомогательных технологий (например, с помощью aria-label).
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div> Выпадающие списки
Обратите внимание, что многие встроенные выпадающие списки — в частности, в Safari и Chrome — имеют закругленные углы, которые невозможно изменить с помощью свойств border-radius.
<select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
Для элементов управления с атрибутом multiple, по умолчанию отображается несколько вариантов.
<select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
Статическое управление
При необходимости размещения простого текста рядом с меткой формы в форме используйте класс .form-control-static на элементе <p>.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form> <form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">email@example.com</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form> Состояние фокуса
Мы удаляем стили по умолчанию outline на некоторых элементах управления формой и применяем box-shadow вместо них для :focus.
Открыть пример на getbootstrap.com
Демонстрация состояния :focus
В приведенном выше примере ввода используются пользовательские стили в нашей документации для демонстрации состояния :focus на .form-control.
Выключенное состояние
Добавьте булевый атрибут disabled к элементу ввода, чтобы предотвратить взаимодействие с пользователем. Выключенные элементы ввода выглядят светлее и добавляют курсор not-allowed.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Выключенные наборы полей
Добавьте атрибут disabled к <fieldset> для одновременного отключения всех элементов управления внутри <fieldset>.
Предупреждение о функциональности ссылок в <a>
По умолчанию браузеры будут обрабатывать все встроенные элементы управления формой (<input>, <select> и <button> элементы) внутри <fieldset disabled> как отключенные, предотвращая взаимодействие с клавиатурой и мышью. Однако, если ваша форма также включает <a ... class="btn btn-*"> элементы, им будет применён только стиль pointer-events: none. Как отмечено в разделе о состоянии отключения для кнопок (и особенно в подраздёле для элементов anchor), это свойство CSS ещё не стандартизировано и не полностью поддерживается в Opera 18 и ниже, или в Internet Explorer 11, и не будет препятствовать пользователям клавиатуры фокусироваться или активировать эти ссылки. Поэтому для безопасности используйте пользовательский JavaScript для отключения таких ссылок.
Совместимость с различными браузерами
Хотя Bootstrap применит эти стили во всех браузерах, Internet Explorer 11 и ниже не полностью поддерживают атрибут disabled на <fieldset>. Используйте пользовательский JavaScript для отключения набора полей в этих браузерах.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form> Только чтение
Добавьте булевый атрибут readonly к элементу ввода, чтобы предотвратить изменение значения ввода. Элементы ввода только для чтения выглядят светлее (как и отключенные элементы ввода), но сохраняют стандартный курсор.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
Текст справки
Текст справки блочного уровня для элементов управления формой.
Связывание текста справки с элементами управления формой
Текст справки должен быть явно связан с элементом управления формой, к которому он относится, с помощью атрибута aria-describedby. Это гарантирует, что вспомогательные технологии, такие как программы чтения с экрана, будут объявлять этот текст справки, когда пользователь фокусируется на элементе управления или вводит данные.
<label for="inputHelpBlock">Input with help text</label> <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> ... <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
Состояния проверки
Bootstrap включает стили проверки для состояний ошибки, предупреждения и успеха на элементах управления формой. Для использования добавьте .has-warning, .has-error, или .has-success к родительскому элементу. Любые .control-label, .form-control, и .help-block внутри этого элемента получат стили проверки.
Передача состояния проверки вспомогательным технологиям и пользователям с нарушениями цветового восприятия
Использование этих стилей проверки для обозначения состояния элемента управления формой обеспечивает только визуальное, основанное на цвете, указание, которое не будет передано пользователям вспомогательных технологий, таких как программы чтения с экрана, или пользователям с нарушениями цветового восприятия.
Убедитесь, что также предоставляется альтернативное указание состояния. Например, вы можете включить подсказку о состоянии в самом тексте элемента управления формой (как показано в следующем примере кода), включить значок Glyphicon (с соответствующим альтернативным текстом с использованием класса .sr-only — см. примеры значков Glyphicon), или предоставить дополнительный блок текста справки. В частности, для вспомогательных технологий недопустимые элементы управления формой также могут быть назначены атрибут aria-invalid="true".
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div> С необязательными значками
Вы также можете добавить необязательные значки обратной связи, добавив .has-feedback и соответствующий значок.
Значки обратной связи работают только с текстовыми элементами <input class="form-control">.
Значки, метки и группы ввода
Для ввода без метки и для групп ввода с дочерним элементом справа требуется ручная позиционирование значков обратной связи. Вам настоятельно рекомендуется предоставлять метки для всех элементов ввода по причинам доступности. Если вы хотите предотвратить отображение меток, скройте их с помощью класса .sr-only . Если вам необходимо обойтись без меток, скорректируйте значение top значка обратной связи. Для групп ввода скорректируйте значение right на соответствующее значение пикселей в зависимости от ширины вашего дочернего элемента.
Передача смысла значка вспомогательным технологиям
Чтобы гарантировать, что вспомогательные технологии, такие как программы чтения с экрана, правильно передают значение значка, должен быть добавлен дополнительный скрытый текст с классом .sr-only и явно связан с элементом управления формой, к которому он относится, с помощью aria-describedby. В качестве альтернативы, убедитесь, что смысл (например, то, что для конкретного поля ввода есть предупреждение) передается в какой-либо другой форме, например, изменяя текст фактической <label> , связанной с элементом управления формой.
Хотя в следующих примерах уже упоминается состояние проверки соответствующих элементов управления формой в тексте <label> , приведенная выше техника (использование .sr-only текста и aria-describedby ) была добавлена для наглядности.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div> Необязательные значки в горизонтальных и встроенных формах
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form> <form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form> Необязательные значки с скрытыми .sr-only метками
Если вы используете класс .sr-only для скрытия <label> элемента управления формой (вместо использования других вариантов маркировки, таких как атрибут aria-label), Bootstrap автоматически скорректирует позицию значка после его добавления.
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div> Размер элементов управления
Устанавливайте высоту, используя классы, такие как .input-lg, и ширину, используя классы столбцов сетки, такие как .col-lg-*.
Настройка высоты
Создавайте более высокие или более короткие элементы управления формой, соответствующие размерам кнопок.
<input class="form-control input-lg" type="text" placeholder=".input-lg"> <input class="form-control" type="text" placeholder="Default input"> <input class="form-control input-sm" type="text" placeholder=".input-sm"> <select class="form-control input-lg">...</select> <select class="form-control">...</select> <select class="form-control input-sm">...</select>
Размеры горизонтальной группы форм
Быстро настраивайте размеры меток и элементов управления формой внутри .form-horizontal путём добавления .form-group-lg или .form-group-sm.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form> Размер столбцов
Оберните элементы ввода в столбцы сетки или любой пользовательский родительский элемент, чтобы легко задать требуемые ширины.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div> Кнопки
Теги кнопок
Используйте классы кнопок на элементе <a>, <button>, или <input>.
<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">
Использование в контексте
Хотя классы кнопок могут использоваться на элементах <a> и <button> , только элементы <button> поддерживаются в наших компонентах навигации и панели навигации.
Ссылки, выполняющие роль кнопок
Если элементы <a> используются в качестве кнопок — для запуска функциональности на странице, а не для перехода на другую страницу или раздел текущей страницы — им также следует присвоить соответствующую role="button".
Отображение в разных браузерах
В качестве лучшей практики, мы настоятельно рекомендуем использовать элемент <button> всякий раз, когда это возможно, чтобы обеспечить одинаковое отображение в разных браузерах.
В частности, существует ошибка в Firefox <30, которая препятствует установке line-height кнопок, основанных на <input>, из-за чего высота этих кнопок в Firefox не совпадает с высотой других кнопок.
Параметры
Используйте любые доступные классы кнопок, чтобы быстро создать стилизованную кнопку.
<!-- Standard button --> <button type="button" class="btn btn-default">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">Link</button>
Передача смысла средствам вспомогательной технологи
Использование цвета для передачи смысла кнопки обеспечивает только визуальное представление, которое не будет воспринято пользователями средств вспомогательной технологии, таких как программы экранного доступа. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (видимого текста кнопки), либо передается альтернативными средствами, такими как дополнительный текст, скрытый с помощью класса .sr-only.
Размеры
Хотите большие или маленькие кнопки? Добавьте .btn-lg, .btn-sm, или .btn-xs для дополнительных размеров.
<p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-default btn-lg">Large button</button> </p> <p> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-default btn-sm">Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> <button type="button" class="btn btn-default btn-xs">Extra small button</button> </p>
Создайте кнопки, занимающие всю ширину родительского элемента (блокирующие кнопки), добавив .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
Активное состояние
Кнопки будут выглядеть нажатыми (с более тёмным фоном, тёмной границей и отступом тени) при активном состоянии. Для элементов <button> это делается с помощью :active. Для элементов <a> это делается с помощью .active. Однако вы можете использовать .active для элементов <button> (и включить атрибут aria-pressed="true"), если вам нужно программно воспроизвести активное состояние.
Элемент кнопки
Нет необходимости добавлять :active, так как это псевдокласс, но если вам нужно принудительно задать тот же вид, смело добавляйте .active.
<button type="button" class="btn btn-primary btn-lg active">Primary button</button> <button type="button" class="btn btn-default btn-lg active">Button</button>
Элемент ссылки
Добавьте класс .active к кнопкам <a>.
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
Отключённое состояние
Сделайте кнопки некликабельными, используя opacity.
Элемент кнопки
Добавьте атрибут disabled к кнопкам <button>.
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
Совместимость с разными браузерами
Если вы добавите атрибут disabled к элементу <button>, в Internet Explorer 9 и ниже текст будет отображаться серым цветом с нежелательным теневым эффектом, который мы не можем исправить.
Элемент ссылки
Добавьте класс .disabled к кнопкам <a>.
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
Мы используем .disabled в качестве вспомогательного класса, аналогично общему классу .active , поэтому префикс не требуется.
Ограничение функциональности ссылок
Этот класс использует pointer-events: none для попытки отключить функциональность ссылок <a>, но эта свойство CSS ещё не стандартизировано и не полностью поддерживается в Opera 18 и ниже, а также в Internet Explorer 11. Кроме того, даже в браузерах, поддерживающих pointer-events: none, навигация с помощью клавиатуры остаётся без изменений, что означает, что пользователи с клавиатурой и средствами вспомогательной технологи будут всё ещё иметь возможность активировать эти ссылки. Поэтому для безопасности используйте пользовательский JavaScript для отключения таких ссылок.
Изображения
Реагирующие изображения
Изображения в Bootstrap 3 могут быть сделаны адаптивными путём добавления класса .img-responsive. Это применяет max-width: 100%;, height: auto; и display: block; к изображению, чтобы оно масштабировалось вместе с родительским элементом.
Для центрирования изображений, использующих класс .img-responsive, используйте .center-block вместо .text-center. См. раздел вспомогательные классы для получения дополнительной информации об использовании .center-block.
Изображения SVG и IE 8-10
В Internet Explorer 8-10 изображения SVG с .img-responsive имеют несоразмерный размер. Для исправления этого, при необходимости, добавьте width: 100% \9;. Bootstrap не применяет это автоматически, так как это вызывает сложности с другими форматами изображений.
<img src="..." class="img-responsive" alt="Responsive image">
Формы изображений
Добавьте классы к элементу <img> для лёгкой стилизации изображений в любом проекте.
Совместимость с разными браузерами
Учитывайте, что Internet Explorer 8 не поддерживает закругленные углы.
<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">
Вспомогательные классы
Контекстные цвета
Передавайте смысл с помощью цвета с помощью нескольких вспомогательных классов выделения. Они также могут быть применены к ссылкам и будут темнеть при наведении, как и наши стандартные стили ссылок.
<p class="text-muted">...</p> <p class="text-primary">...</p> <p class="text-success">...</p> <p class="text-info">...</p> <p class="text-warning">...</p> <p class="text-danger">...</p>
Обработка специфичности
Иногда классы выделения нельзя применить из-за специфичности другого селектора. В большинстве случаев достаточным решением является обертка вашего текста в элемент <span> с классом.
Передача смысла средствам вспомогательной технологии
Использование цвета для передачи смысла обеспечивает только визуальное представление, которое не будет передано пользователям средств вспомогательной технологии, таких как программы экранного доступа. Убедитесь, что информация, обозначаемая цветом, либо понятна из самого содержимого (контекстные цвета используются только для усиления смысла, уже присутствующего в тексте/разметке), либо передается альтернативными способами, например, с помощью дополнительного текста, скрытого с помощью класса .sr-only.
Контекстные фоны
Аналогично классам контекстного цвета текста, легко задайте фон элемента любому контекстному классу. Компоненты ссылок будут темнеть при наведении, как и классы текста.
<p class="bg-primary">...</p> <p class="bg-success">...</p> <p class="bg-info">...</p> <p class="bg-warning">...</p> <p class="bg-danger">...</p>
Обработка специфичности
Иногда контекстные классы фона не могут быть применены из-за специфичности другого селектора. В некоторых случаях достаточным решением является обертка содержимого вашего элемента в <div> с классом.
Передача смысла средствам вспомогательной технологии
Как и в контекстных цветах, убедитесь, что любой смысл, переданный с помощью цвета, также передается в формате, который не является чисто презентационным.
Иконка закрытия
Используйте универсальную иконку закрытия для закрытия содержимого, такого как модальные окна и уведомления.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
Символы "стрелки"
Используйте символы "стрелки" для обозначения функциональности раскрывающегося списка и направления. Обратите внимание, что стандартная "стрелка" автоматически изменяется в меню с обратным расположением.
<span class="caret"></span>
Быстрые float
Разместите элемент слева или справа с помощью класса. !important включен для предотвращения проблем со специфичностью. Классы также могут использоваться как миксины.
<div class="pull-left">...</div> <div class="pull-right">...</div>
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
} Центрирование блоков содержимого
Установите элементу display: block и центрируйте с помощью margin. Доступно в качестве миксина и класса.
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
} Clearfix
Легко очистите float добавив .clearfix к родительскому элементу. Использует микро clearfix, популяризированный Николасом Галлагером. Также может использоваться как миксин.
<!-- Usage as a class --> <div class="clearfix">...</div>
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
} Отображение и скрытие содержимого
Принудительно отобразите или скройте элемент (включая для программ экранного доступа) с помощью классов .show и .hidden. Эти классы используют !important для предотвращения конфликтов со специфичностью, как и быстрые float. Они доступны только для переключения блочных элементов. Они также могут использоваться как миксины.
.hide доступен, но он не всегда влияет на программы экранного доступа и устарел начиная с v3.0.1. Используйте .hidden или .sr-only вместо этого.
Кроме того, .invisible может использоваться для переключения только видимости элемента, т.е. его display не изменяется, и элемент по-прежнему может влиять на структуру документа.
<div class="show">...</div> <div class="hidden">...</div>
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
} Содержимое для программ экранного доступа и навигации с клавиатурой
Скрыть элемент для всех устройств, кроме экранных читалок, с помощью .sr-only. Объедините .sr-only с .sr-only-focusable для повторного отображения элемента при фокусировке (например, пользователем, использующим только клавиатуру). Необходимо для соблюдения лучших практик доступности. Также может использоваться в качестве миксинов.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
} Замена изображений
Используйте класс .text-hide или миксин для замены текстового содержимого элемента изображением в качестве фона.
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
.text-hide();
} Утилиты адаптивности
Для более быстрого развития мобильных приложений используйте эти утилитарные классы для показа и скрытия содержимого в зависимости от устройства с помощью запросов к медиа. Также включены утилитарные классы для переключения содержимого при печати.
Старайтесь использовать их в ограниченном объёме и избегайте создания совершенно разных версий одного сайта. Вместо этого используйте их для дополнения представления на каждом устройстве.
Доступные классы
Используйте один или комбинацию доступных классов для переключения содержимого на разных точках разрыва представления.
| Очень маленькие устройства Телефоны (<768px) | Маленькие устройства Планшеты (≥768px) | Средние устройства Рабочие столы (≥992px) | Крупные устройства Рабочие столы (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* | Отображается | Скрыто | Скрыто | Скрыто |
.visible-sm-* | Скрыто | Отображается | Скрыто | Скрыто |
.visible-md-* | Скрыто | Скрыто | Отображается | Скрыто |
.visible-lg-* | Скрыто | Скрыто | Скрыто | Отображается |
.hidden-xs | Скрыто | Отображается | Отображается | Отображается |
.hidden-sm | Отображается | Скрыто | Отображается | Отображается |
.hidden-md | Отображается | Отображается | Скрыто | Отображается |
.hidden-lg | Отображается | Отображается | Отображается | Скрыто |
Начиная с версии 3.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 также существуют, но являются устаревшими начиная с версии 3.2.0. Они примерно эквивалентны .visible-*-block, за исключением дополнительных специальных случаев для переключения элементов, связанных с <table>.
Классы печати
Аналогично обычным адаптивным классам, используйте их для переключения содержимого для печати.
| Классы | Браузер | Печать |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block | Скрыто | Отображается |
.hidden-print | Отображается | Скрыто |
Класс .visible-print также существует, но является устаревшим начиная с версии 3.2.0. Он примерно эквивалентен .visible-print-block, за исключением дополнительных специальных случаев для элементов, связанных с <table>.
Тестовые примеры
Измените размер браузера или загрузите его на различных устройствах для тестирования адаптивных утилитарных классов.
Отображается на...
Зелёные галочки указывают, что элемент отображается в текущем представлении.
Открыть пример на getbootstrap.com
Скрыто на...
Здесь зелёные галочки также указывают, что элемент скрыт в текущем представлении.
Открыть пример на getbootstrap.com
Использование Less
CSS Bootstrap построен на Less, препроцессоре с дополнительными функциями, такими как переменные, миксины и функции для компиляции CSS. Те, кто хочет использовать исходные файлы Less вместо наших скомпилированных файлов CSS, могут использовать многочисленные переменные и миксины, которые мы используем во всём фреймворке.
Переменные и миксины сетки описаны в разделе системы сетки.
Компиляция 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;
Используйте любые из этих цветовых переменных как есть или переназначьте их на более осмысленные переменные для вашего проекта.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
} Каркас
Несколько переменных для быстрого настройки ключевых элементов каркаса вашего сайта.
// Scaffolding @body-bg: #fff; @text-color: @black-50;
Ссылки
Легко стилизуйте ссылки с помощью нужного цвета с помощью одного значения.
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
} Обратите внимание, что @link-hover-color использует функцию, еще один замечательный инструмент из Less, для автоматической генерации правильного цвета при наведении. Вы можете использовать darken, lighten, saturate, и desaturate.
Шрифты
Легко установите шрифт, размер текста, межстрочный интервал и многое другое с помощью нескольких переменных. Bootstrap также использует их для предоставления лёгких шрифтовых миксинов.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; @font-family-base: @font-family-sans-serif; @font-size-base: 14px; @font-size-large: ceil((@font-size-base * 1.25)); // ~18px @font-size-small: ceil((@font-size-base * 0.85)); // ~12px @font-size-h1: floor((@font-size-base * 2.6)); // ~36px @font-size-h2: floor((@font-size-base * 2.15)); // ~30px @font-size-h3: ceil((@font-size-base * 1.7)); // ~24px @font-size-h4: ceil((@font-size-base * 1.25)); // ~18px @font-size-h5: @font-size-base; @font-size-h6: ceil((@font-size-base * 0.85)); // ~12px @line-height-base: 1.428571429; // 20/14 @line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px @headings-font-family: inherit; @headings-font-weight: 500; @headings-line-height: 1.1; @headings-color: inherit;
Иконки
Две быстрые переменные для настройки расположения и имени файла ваших иконок.
@icon-font-path: "../fonts/"; @icon-font-name: "glyphicons-halflings-regular";
Компоненты
Компоненты в Bootstrap используют некоторые значения по умолчанию для установки общих значений. Вот наиболее часто используемые.
@padding-base-vertical: 6px; @padding-base-horizontal: 12px; @padding-large-vertical: 10px; @padding-large-horizontal: 16px; @padding-small-vertical: 5px; @padding-small-horizontal: 10px; @padding-xs-vertical: 1px; @padding-xs-horizontal: 5px; @line-height-large: 1.33; @line-height-small: 1.5; @border-radius-base: 4px; @border-radius-large: 6px; @border-radius-small: 3px; @component-active-color: #fff; @component-active-bg: @brand-primary; @caret-width-base: 4px; @caret-width-large: 5px;
Миксины поставщиков
Миксины поставщиков — это миксины для поддержки нескольких браузеров путём включения всех необходимых вендорных префиксов в скомпилированный CSS.
Box-sizing
Сбросьте модель размеров блоков ваших компонентов с помощью одного миксина. Для контекста, см. эту полезную статью от Mozilla.
Миксин является устаревшим начиная с версии 3.2.0 с введением Autoprefixer. Для сохранения обратной совместимости Bootstrap будет продолжать использовать миксин внутри до Bootstrap 4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
} Скругленные углы
Сегодня все современные браузеры поддерживают свойство border-radius без префиксов. В связи с этим, миксина .border-radius() нет, но Bootstrap включает сокращения для быстрого скругления двух углов с определённой стороны объекта.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
} Тени (Блоки)
Если ваша целевая аудитория использует самые последние и лучшие браузеры и устройства, обязательно используйте свойство box-shadow самостоятельно. Если вам нужна поддержка старых устройств Android (до версии 4) и iOS (до iOS 5), используйте устаревший миксин для получения необходимого префикса -webkit.
Миксин устарел начиная с версии 3.1.0, так как Bootstrap официально не поддерживает устаревшие платформы, не поддерживающие стандартное свойство. Для сохранения обратной совместимости Bootstrap продолжит использовать миксин до Bootstrap v4.
Убедитесь, что используете цвета rgba() в ваших тенях блоков, чтобы они максимально плавно сочетались с фонами.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
} Переходы
Несколько миксинов для гибкости. Установите всю информацию о переходе одним, или укажите отдельный задержка и длительность по мере необходимости.
Миксины являются устаревшими начиная с версии 3.2.0 с введением Autoprefixer. Для сохранения обратной совместимости Bootstrap продолжит использовать миксины внутри до Bootstrap 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;
} Преобразования
Повернуть, масштабировать, переместить (переместить) или наклонить любой объект.
Миксины являются устаревшими начиная с версии 3.2.0 с введением Autoprefixer. Для сохранения обратной совместимости Bootstrap продолжит использовать миксины внутри до Bootstrap 4.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
} Анимации
Один миксин для использования всех свойств анимации CSS3 в одном объявлении и другие миксины для отдельных свойств.
Миксины устарели начиная с версии 3.2.0 с введением Autoprefixer. Для сохранения обратной совместимости Bootstrap продолжит использовать миксины внутри до Bootstrap 4.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
} Непрозрачность
Установите непрозрачность для всех браузеров и обеспечьте резервный вариант filter для IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
} Текст-заполнитель
Предоставьте контекст для элементов управления формой в каждом поле.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
} Столбцы
Создайте столбцы с помощью CSS в одном элементе.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
} Градиенты
Легко превратите любые два цвета в градиент фона. Добавьте больше возможностей, задайте направление, используйте три цвета или радиальный градиент. С помощью одного миксина вы получите всю необходимую префиксную синтаксическую конструкцию.
#gradient > .vertical(#333; #000); #gradient > .horizontal(#333; #000); #gradient > .radial(#333; #000);
Вы также можете указать угол стандартного двухцветного линейного градиента:
#gradient > .directional(#333; #000; 45deg);
Если вам нужен градиент в стиле полосок парикмахера, это тоже просто. Просто укажите один цвет, и мы наложим полупрозрачную белую полоску.
#gradient > .striped(#333; 45deg);
Увеличьте сложность и используйте вместо этого три цвета. Задайте первый цвет, второй цвет, цветную остановку второго цвета (процентное значение, например, 25%) и третий цвет с помощью этих миксинов:
#gradient > .vertical-three-colors(#777; #333; 25%; #000); #gradient > .horizontal-three-colors(#777; #333; 25%; #000);
Обратите внимание! Если вам когда-либо понадобится удалить градиент, убедитесь, что вы удалили все специфичные для IE filter которые вы добавили. Вы можете сделать это, используя миксин .reset-filter() вместе с background-image: none;.
Миксины-утилиты
Миксины-утилиты — это миксины, которые объединяют в противном случае не связанные свойства CSS для достижения конкретной цели или задачи.
Clearfix
Забудьте о добавлении class="clearfix" к любому элементу и вместо этого добавьте миксин .clearfix() в нужном месте. Использует микро-clearfix от Николаса Галлагера.
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
} Горизонтальное центрирование
Быстро центрируйте любой элемент внутри его родительского элемента. Требуется, чтобы width или max-width были установлены.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
} Помощники по размеру
Укажите размеры объекта более удобно.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); } Ресайзимые текстовые области
Легко настраивайте параметры изменения размера для любой текстовой области или любого другого элемента. По умолчанию используется обычное поведение браузера (both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
} Обрезка текста
Легко обрезайте текст с многоточием с помощью одного миксина. Требуется, чтобы элемент был на уровне block или inline-block.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
} Изображения Retina
Укажите два пути к изображению и размеры изображения @1x, и Bootstrap предоставит медиа запрос @2x. Если у вас много изображений для предоставления, подумайте о том, чтобы вручную написать CSS для изображения Retina в одном медиа запросе.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
} Использование Sass
Хотя Bootstrap создан на основе Less, у него также есть официальный порт для Sass. Мы поддерживаем его в отдельном репозитории GitHub и обрабатываем обновления с помощью скрипта преобразования.
Что включено
Поскольку порт Sass имеет отдельный репозиторий и обслуживает немного другую аудиторию, содержимое проекта значительно отличается от основного проекта Bootstrap. Это гарантирует, что порт Sass совместим с как можно большим количеством систем на основе Sass.
| Путь | Описание |
|---|---|
lib/ | Код Ruby gem (конфигурация Sass, интеграции Rails и Compass) |
tasks/ | Скрипты преобразования (преобразование Less в Sass) |
test/ | Тесты компиляции |
templates/ | Манифест пакета Compass |
vendor/assets/ | Файлы Sass, JavaScript и шрифтов |
Rakefile | Внутренние задачи, такие как rake и convert |
Посетите репозиторий проекта Sass на GitHub, чтобы увидеть эти файлы в действии.
Установка
Для получения информации о том, как установить и использовать Bootstrap для Sass, обратитесь к файлу README в репозитории GitHub. Это наиболее актуальный источник и содержит информацию для использования с Rails, Compass и стандартными проектами Sass.
© 2011–2020 Twitter, Inc.
© 2011–2020 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/3.4/css/
