Bootstrap 3 · Документация на русском языке

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

Тип документа <!DOCTYPE html>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

These styles can be found within scaffolding.less.

Нормировать

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

Контейнеры

Простое центрирование контента страницы обертывая это содержимое в .container. Контейнер указан max-width на различные контрольные точки медиа квери для соответствия с нашей системой сетки.

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

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

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

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

/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

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

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

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

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

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

Функционал сетки

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

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

Пр.: Подведенная-к-горизонтальной

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

.col-md-1

.col-md-8

.col-md-4

.col-md-6

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

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

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

.col-xs-12 col-md-8

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

.col-xs-6

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

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

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

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

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

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

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

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

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

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

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

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

Переместить колонки направо с помощью .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

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

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

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

Level 1: .col-md-9

Level 2: .col-md-6

<div class="row">
  <div class="col-md-9">
    Level 1: .col-md-9
    <div class="row">
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
    </div>
  </div>
</div>

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

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

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

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

МЕНЬШЕ микса и переменных

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

Переменные

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

@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-small) {
    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-small) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-small) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-small) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-small) {
    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-medium) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-medium) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-medium) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-medium) {
    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-large) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-large) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-large) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-large) {
    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. 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>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

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

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

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

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

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

<p>...</p>

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

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

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

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

Построенный с менее

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

Выделение

Используйте ХТМЛ изначальный теги "визуального выделения" с легковесными стилями.

Мелкий текст

Для снятия встроенного текста или блоков, используйте <small> тег, чтобы установить текст на 85�т исходного размера. Элементы заголовка получат свой собственный font-sizeдля вложенных <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.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

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

Передача смысла через цвет с небольшим выделением поддержки классов.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

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

Стилизованное реализация ХТМЛ <abbr> элемента для аббревиатур и акронимов для показа раскрытой версии при наведение. Аббревиатуры с атрибутом title имею светлую точечную границу снизу и курсор "помощь" при наведение, добавляя дополнительный контекст при наведение.

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

Для расширеннного текста на длинных наведенных курсором аббревиатурах, включают title атрибут с <abbr> элементом.

An abbreviation of the word attribute is attr.

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

Инициализм

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

HTML is the best thing since sliced bread.

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

Адреса

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

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name

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

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

Цитаты

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

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

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

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

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

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

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

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

Добавьте <small> тег для идентификации источника. Преобразуйте имя исходной работы в <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>
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

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

Используйте .pull-right для перемещенной, по правому краю цитаты.

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

<blockquote class="pull-right">
  ...
</blockquote>

Списки

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

Перечень пунктов, в которых порядок создается не по существу.

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

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

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

Перечень пунктов, в которых порядок создан явно по существу.

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

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

Встроенный

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

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Описание

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

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

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

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

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

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

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

Авто-срезающий

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

Встроенный

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

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

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

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

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

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

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

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

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

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

"Зебра"

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

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

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

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

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Курсор строк

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

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

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

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

#	Column heading	Column heading	Column heading
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

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

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

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

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

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

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

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

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

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter 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 для выравнивания по левому краю и встроенному блоку управления для компактной планировки.

Требования пользовательской ширины

Поля ввода, поля выбора, и поля текста по умолчанию 100% ширины в Bootstrap. Используя инлайн формы. вам нужно указать ширину контрола формы которые используете.

Всегда добавлять лэйблы

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

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" 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>

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

Используя Bootstrap предопределенные классы сетки для выравнивания лейблов и груп контролов форм в горизонтальном макете добавляя .form-horizontal в форму. Делая это изменяют поведение .form-group как ряд сетки, поэтому не нужен .row.

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

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

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

Ввод

Наиболее распространенные формы управления, текстовые поля ввода включают поддержку для всех типов HTML5 : text,text,datetime,datetime-local,date,month,time,week,number,email,111$s,122$s,133$s и 144$s.

Тип декларации требуется

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

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

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

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

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

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

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

По умолчанию (преобразованы)

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

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

Встроенные флажки

Используйте .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>

Подборки

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

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

<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" role="form">
  <div class="form-group">
    <label class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-lg-2 control-label">Password</label>
    <div class="col-lg-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

Положения формы

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

Фокус ввода

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

<input class="form-control" id="focusedInput" type="text" value="This is focused...">

Отключенные вводы

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

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

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

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

Ссылка функциональности `<a>` не влияет

Этот класс только изменит внешний вид <a class="btn btn-default"> кнопки, а не их функциональность. Использование пользовательских JavaScript, чтобы отключить здесь ссылки.

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

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

<form class="form-inline" role="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>

Положения состояния

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

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError">Input with error</label>
  <input type="text" class="form-control" id="inputError">
</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>

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

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

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

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

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

<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Опции

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

<!-- Standard gray button with gradient -->
<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>

Размеры

Представьте больше или меньше кнопки? Добавьте .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>

Отключенное положение

Создайте кнопки, на которые нельзя нажать путем постепенного их возврата на 50%.

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

Добавьте 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">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled">Link</a>

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

Функциональность ссылки не влияет

Этот класс может только изменить появление <a>, не его функционал. Используйте измененный JavaScript для того чтобы ограничить ссылки.

Теги кнопки

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

<a class="btn btn-default" href="#">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">

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

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

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

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

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

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

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

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

Не знаете как сделать изображения адаптивными? Читайте в разделе адаптивные изображения.

Значок закрыть

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

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

.pull-left

Запускается элемент слева от класса. Может также быть использован как смешение.

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

.pull-left {
  float: left !important;
}

.pull-right

Запускается элемент справа от класса. Может быть также использовать как смешение.

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

.pull-right {
  float: right !important;
}

.clearfix

Очистите float на элементе. Используется микро "клирфикс" как популяризированная Николасом Галлахером. Может также использоваться как смешение.

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

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

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

.sr-only

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

<a class="sr-only" href="#content">Skip to content</a>

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

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

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

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

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

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

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

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

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

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

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

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

Экстра маленький ✔ Видим на x-small

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

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

Большой Видимый на большом

Экстра маленький и маленький ✔ Видим на x-small и small

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

Экстра маленький и средний ✔ Видим на x-small и medium

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

Экстра маленький и большой Видимый на экстра маленьком и большом

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

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

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

Экстра маленький Скрыт на экстра маленьком

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

Средний Скрыт на среднем

Большой ✔ Спрятан на large

Экстра маленький и маленький Скрыт на экстра маленьком и маленьком

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

Экстра маленький и средний Скрыт на экстра-маленьком и среднем

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

Экстра маленький и большой ✔ Спрятан на x-small м large

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

CSS

Обзор

Тип документа <!DOCTYPE html>

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

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

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

Нормировать

Контейнеры

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

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

Функционал сетки

Пр.: Подведенная-к-горизонтальной

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

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

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

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

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

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

МЕНЬШЕ микса и переменных

Переменные

Смешения

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

Типография

Заголовки

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

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

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

Построенный с менее

Выделение

Мелкий текст

Жирный шрифт

Курсив

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

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

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

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

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

Инициализм

Адреса

Цитаты

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

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

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

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

Списки

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

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

Без стиля

Встроенный

Описание

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

Авто-срезающий

Код

Встроенный

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

Таблицы

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

"Зебра"

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

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

Курсор строк

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

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

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

Формы

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

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

Требования пользовательской ширины

Всегда добавлять лэйблы

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

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

Ввод

Тип декларации требуется

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

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

Ссылка функциональности `<a>` не влияет