Ознайомтеся з ключовими елементами інфраструктури Bootstrap, включаючи наш підхід до кращої, швидшої та потужнішої веб-розробки.

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

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

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

Перш за все мобільний

У Bootstrap 2 ми додали додаткові стилі, зручні для мобільних пристроїв, для ключових аспектів фреймворку. З Bootstrap 3 ми переписали проект, щоб він був дружнім до мобільних пристроїв із самого початку. Замість того, щоб додавати додаткові мобільні стилі, вони запікаються прямо в ядро. Фактично, Bootstrap — це перш за все мобільний пристрій . Стилі Mobile first можна знайти у всій бібліотеці, а не в окремих файлах.

Щоб забезпечити належне відтворення та сенсорне масштабування, додайте мета-тег вікна перегляду до свого <head>.

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

Ви можете вимкнути можливості масштабування на мобільних пристроях, додавши user-scalable=noмета-тег вікна перегляду. Це вимикає масштабування, тобто користувачі можуть лише прокручувати, і ваш сайт більше схожий на рідну програму. Загалом, ми не рекомендуємо це на кожному сайті, тому будьте обережні!

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

Типографіка та посилання

Bootstrap встановлює базові глобальні стилі відображення, типографіки та посилань. Зокрема, ми:

Встановити background-color: #fff;наbody
Використовуйте атрибути @font-family-base, @font-size-base, і як нашу друкарську базу@line-height-base
Встановіть колір глобального посилання за допомогою @link-colorта застосовуйте підкреслення посилання лише на:hover

Ці стилі можна знайти в scaffolding.less.

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доступні для швидкого створення макетів сітки. Менше міксинів також можна використовувати для більш семантичних макетів.
Стовпці створюють жолоби (прогалини між вмістом стовпців) через padding. Це заповнення зміщується в рядках для першого та останнього стовпців через від’ємне поле на .rows.
Через від’ємний запас наведені нижче приклади мають відступ. Це так, що вміст у стовпцях сітки вирівнюється з вмістом без сітки.
Стовпці сітки створюються шляхом визначення кількості дванадцяти доступних стовпців, які ви бажаєте охопити. Наприклад, для трьох рівних стовпців буде використано три .col-xs-4.
Якщо в одному рядку розміщено більше 12 стовпців, кожна група додаткових стовпців буде перенесена на новий рядок як єдине ціле.
Класи сітки застосовуються до пристроїв із шириною екрана, що перевищує або дорівнює розмірам точки розриву, і замінюють класи сітки, призначені для менших пристроїв. Тому, наприклад, застосування будь-якого .col-md-*класу до елемента вплине не лише на його стиль на середніх пристроях, але й на великих пристроях, якщо .col-lg-*клас відсутній.

Подивіться на приклади застосування цих принципів до свого коду.

Медіа запити

Ми використовуємо такі медіа-запити в наших файлах Less, щоб створити ключові точки зупину в нашій системі сітки.

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

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

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

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

Час від часу ми розширюємо ці медіа-запити, max-widthщоб обмежити CSS вужчим набором пристроїв.

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

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

Подивіться, як аспекти сіткової системи Bootstrap працюють на кількох пристроях за допомогою зручної таблиці.

	Дуже маленькі пристрої Телефони (<768 пікселів)	Малі пристрої Планшети (≥768 пікселів)	Середні пристрої Настільні комп’ютери (≥992 пікселів)	Великі пристрої Настільні комп’ютери (≥1200 пікселів)
Поведінка сітки	Постійно горизонтально	Згорнуто для початку, горизонтально над точками розриву
Ширина контейнера	Немає (авто)	750 пікселів	970 пікселів	1170 пікселів
Префікс класу	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Кількість стовпців	12
Ширина колонки	Авто	~62 пікселів	~81 пікселів	~97 пікселів
Ширина ринви	30 пікселів (15 пікселів з кожного боку стовпця)
Нестабільний	Так
Зміщення	Так
Упорядкування колонок	Так

Приклад: відкладено до горизонталі

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

.col-md-1

.col-md-8

.col-md-4

.col-md-6

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

Приклад: контейнер для рідини

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

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

Приклад: мобільний і робочий стіл

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

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

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

.col-xs-6

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

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

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

Приклад: мобільний телефон, планшет, робочий стіл

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

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

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

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

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

Приклад: обтікання стовпцями

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

.col-xs-9

.col-xs-4
Оскільки 9 + 4 = 13 > 12, цей div із 4 стовпцями переноситься на новий рядок як одна безперервна одиниця.

.col-xs-6
Наступні стовпці продовжуються вздовж нового рядка.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Чуйний стовпець скидається

Завдяки чотирьом доступним рівням сіток ви обов’язково зіткнетеся з проблемами, коли в певних точках розриву ваші стовпці не очищаються належним чином, оскільки один вищий за інший. Щоб виправити це, скористайтеся комбінацією a .clearfixта наших адаптивних службових класів .

.col-xs-6 .col-sm-3
Змініть розмір вікна перегляду або перегляньте його на телефоні для прикладу.

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

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

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

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

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

<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класом.

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

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

.col-xs-6

<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по чотирьох колонках.

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

Ви також можете замінити зміщення нижчих рівнів сітки за допомогою .col-*-offset-0класів.

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

Вкладені стовпці

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

Рівень 1: .col-sm-9

Рівень 2: .col-xs-8 .col-sm-6

Рівень 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Упорядкування колонок

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

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

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

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

Менше міксинів і змінних

Окрім попередньо створених класів сітки для швидкої верстки, Bootstrap містить змінні Less і міксини для швидкого створення власних простих семантичних макетів.

Змінні

Змінні визначають кількість стовпців, ширину межі та точку медіа-запиту, з якої починаються плаваючі стовпці. Ми використовуємо їх для генерації попередньо визначених класів сітки, задокументованих вище, а також для настроюваних міксинів, перелічених нижче.

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

Міксини

Міксини використовуються разом із змінними сітки для генерації семантичного CSS для окремих стовпців сітки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Приклад використання

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

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

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

Заголовки

Доступні всі заголовки HTML <h1>до <h6>. .h1наскрізні .h6класи також доступні, коли ви хочете відповідати стилю шрифту заголовка, але все одно хочете, щоб ваш текст відображався в рядку.

h1. Заголовок Bootstrap	Напівжирний 36px
h2. Заголовок Bootstrap	Напівжирний 30 пікселів
h3. Заголовок Bootstrap	Напівжирний 24 пікселя
h4. Заголовок Bootstrap	Напівжирний 18 пікселів
h5. Заголовок Bootstrap	Напівжирний 14 пікселів
h6. Заголовок Bootstrap	Напівжирний 12 пікселів

<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. Початковий заголовок Додатковий текст

h2. Початковий заголовок Додатковий текст

h3. Початковий заголовок Додатковий текст

h4. Початковий заголовок Додатковий текст

h5. Початковий заголовок Додатковий текст

h6. Початковий заголовок Додатковий текст

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

Основна копія

Глобальне значення Bootstrap за умовчанням font-sizeстановить 14 пікселів із line-heightзначенням 1,428 . Це стосується <body>і всіх абзаців. Крім того, <p>(абзаци) отримують нижнє поле, що дорівнює половині обчисленої висоти рядка (10 пікселів за замовчуванням).

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

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

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

<p>...</p>

Провідна основна копія

Виділіть абзац, додавши .lead.

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

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

Створено за допомогою Less

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

Основна абревіатура

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

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

Ініціалізм

Додайте .initialismдо абревіатури трохи менший розмір шрифту.

HTML — це найкраще з часів нарізаного хліба.

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

Адреси

Надайте контактну інформацію для найближчого предка або всієї роботи. Зберігайте форматування, закінчуючи всі рядки на <br>.

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

Повне ім'я
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Блок цитат

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

Цитата за замовчуванням

Оберніть <blockquote>будь-який HTML як цитату. Для прямих лапок ми рекомендуємо <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.

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

Параметри цитат

Зміни стилю та змісту для простих варіацій стандарту <blockquote>.

Називання джерела

Додайте <footer>для визначення джерела. Увімкніть назву вихідної роботи в <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.

Хтось відомий у назві джерела

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

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

Додати .blockquote-reverseдля цитати з вирівняним праворуч вмістом.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.

Хтось відомий у назві джерела

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

списки

Невпорядкований

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ціле число molesteie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Замовив

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ціле число molesteie 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
Ціле число molesteie 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>

опис

Список термінів із відповідними описами.

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

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

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

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

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

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

Автообрізання

Горизонтальні списки описів скоротять терміни, які занадто довгі, щоб поміститися в лівий стовпець text-overflow. У вужчих вікнах перегляду вони зміняться на макет у вигляді стопки за замовчуванням.

В лінію

Оберніть вбудовані фрагменти коду за допомогою <code>.

Наприклад, <section>слід загорнути як вбудований.

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

Введення користувача

Використовуйте <kbd>для позначення введення, яке зазвичай вводиться за допомогою клавіатури.

Для перемикання каталогів введіть, cdа потім назву каталогу.
Щоб змінити налаштування, натисніть ctrl + ,

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

Базовий блок

Використовуйте <pre>для кількох рядків коду. Обов’язково зніміть будь-які кутові дужки в коді для правильного відтворення.

<p>Зразок тексту тут...</p>

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

За бажанням ви можете додати .pre-scrollableклас, який встановлюватиме максимальну висоту 350 пікселів і забезпечуватиме смугу прокрутки по осі Y.

Змінні

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

y = m x + b

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

Вихідний зразок

Для вказівки блоків зразка виведення з програми використовуйте <samp>тег.

Цей текст має розглядатися як зразок вихідних даних комп’ютерної програми.

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

Базовий приклад

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

Необов’язковий підпис до таблиці.
#	Ім'я	Прізвище	Ім'я користувача
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Ларрі	птах	@twitter

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

Смугасті ряди

Використовуйте .table-stripedдля додавання смуг зебри до будь-якого рядка таблиці в <tbody>.

Кросбраузерність

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

#	Ім'я	Прізвище	Ім'я користувача
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Ларрі	птах	@twitter

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

Облямований стіл

Додайте .table-borderedдля меж з усіх боків таблиці та комірок.

#	Ім'я	Прізвище	Ім'я користувача
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Ларрі	птах	@twitter

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

Наведіть рядки

Додайте .table-hover, щоб увімкнути стан наведення курсора на рядки таблиці в межах <tbody>.

#	Ім'я	Прізвище	Ім'я користувача
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Ларрі	птах	@twitter

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

Згорнута таблиця

Додайте .table-condensed, щоб зробити таблиці більш компактними, розрізавши заповнення клітинок навпіл.

#	Ім'я	Прізвище	Ім'я користувача
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

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

Контекстні заняття

Використовуйте контекстні класи, щоб розфарбувати рядки таблиці або окремі комірки.

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

#	Заголовок колонки	Заголовок колонки	Заголовок колонки
1	Вміст колонки	Вміст колонки	Вміст колонки
2	Вміст колонки	Вміст колонки	Вміст колонки
3	Вміст колонки	Вміст колонки	Вміст колонки
4	Вміст колонки	Вміст колонки	Вміст колонки
5	Вміст колонки	Вміст колонки	Вміст колонки
6	Вміст колонки	Вміст колонки	Вміст колонки
7	Вміст колонки	Вміст колонки	Вміст колонки
8	Вміст колонки	Вміст колонки	Вміст колонки
9	Вміст колонки	Вміст колонки	Вміст колонки

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

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

Передача значення допоміжним технологіям

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

Чуйні столи

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

Вертикальне обрізання/обрізання

У адаптивних таблицях використовується функція overflow-y: hidden, яка відсікає будь-який вміст, що виходить за межі нижнього або верхнього краю таблиці. Зокрема, це може відрізати спадні меню та інші сторонні віджети.

Firefox і набори полів

У Firefox є незручний стиль набору полів, widthякий заважає адаптивній таблиці. Це неможливо змінити без спеціального злому Firefox, якого ми не надаємо в Bootstrap:

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

Щоб отримати додаткові відомості, прочитайте цю відповідь Stack Overflow .

#	Заголовок таблиці	Заголовок таблиці	Заголовок таблиці	Заголовок таблиці	Заголовок таблиці	Заголовок таблиці
1	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці
2	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці
3	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці

#	Заголовок таблиці	Заголовок таблиці	Заголовок таблиці	Заголовок таблиці	Заголовок таблиці	Заголовок таблиці
1	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці
2	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці
3	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці	Комірка таблиці

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

Базовий приклад

Окремі елементи керування форми автоматично отримують певний глобальний стиль. Усі текстові <input>, <textarea>, і <select>елементи з .form-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>) для елементів керування, вирівняних за лівим краєм і вбудованих блоків. Це стосується лише форм у вікнах перегляду, які мають ширину не менше 768 пікселів.

Може знадобитися індивідуальна ширина

Введення та вибір width: 100%;застосовано за замовчуванням у Bootstrap. У вбудованих формах ми скидаємо це значення, width: auto;щоб кілька елементів керування могли розташовуватися в одному рядку. Залежно від вашого макета може знадобитися додаткова спеціальна ширина.

Завжди додавайте мітки

Програми зчитування з екрана матимуть проблеми з вашими формами, якщо ви не включите мітку для кожного введення. Для цих вбудованих форм ви можете приховати мітки за допомогою .sr-onlyкласу. Існують інші альтернативні методи надання мітки для допоміжних технологій, наприклад атрибут aria-label, aria-labelledbyабо . titleЯкщо жоден із них відсутній, програми зчитування з екрана можуть вдатися до використання placeholderатрибута, якщо він присутній, але зауважте, що використовувати placeholderяк заміну для інших методів позначення не рекомендується.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

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

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

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

Використовуйте попередньо визначені класи сітки Bootstrap, щоб вирівняти мітки та групи елементів керування форми в горизонтальному макеті, додавши .form-horizontalдо форми (що не обов’язково має бути <form>). Це змінить .form-groups на поведінку як рядки сітки, тому немає потреби в .row.

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

Підтримувані елементи керування

Приклади стандартних елементів керування форми, які підтримуються в прикладі макета форми.

Вхідні дані

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

Потрібна декларація типу

Вхідні дані будуть повністю стилізовані, лише якщо їх typeправильно оголошено.

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

Вхідні групи

Щоб додати інтегрований текст або кнопки до та/або після будь-якого текстового <input>, перегляньте компонент групи введення .

Текстове поле

Елемент керування формою, який підтримує кілька рядків тексту. За потреби змініть rowsатрибут.

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

Прапорці та радіо

Прапорці призначені для вибору одного або кількох варіантів у списку, а радіо — для вибору одного варіанту з багатьох.

Вимкнені прапорці та радіостанції підтримуються, але щоб забезпечити «недозволений» курсор при наведенні курсора на батьківський елемент <label>, вам потрібно буде додати .disabledклас до батьківського елемента .radio, .radio-inline, .checkboxабо .checkbox-inline.

За замовчуванням (стосований)

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

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

Вбудовані прапорці та радіо

Використовуйте класи .checkbox-inlineабо .radio-inlineна рядах прапорців або радіо для елементів керування, які з’являються в одному рядку.

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Прапорці та радіо без тексту мітки

Якщо у вас немає тексту в <label>, введення розташовується так, як ви очікували. Наразі працює лише з невбудованими прапорцями та радіо. Пам’ятайте, що для допоміжних технологій необхідно надати певну форму мітки (наприклад, використання aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Вибирає

Зауважте, що багато власних меню вибору, зокрема в Safari та Chrome, мають закруглені кути, які не можна змінити за допомогою border-radiusвластивостей.

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

Для <select>елементів керування з multipleатрибутом за замовчуванням показано кілька параметрів.

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

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

Якщо вам потрібно розмістити звичайний текст поруч із міткою форми у формі, використовуйте .form-control-staticклас на <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Стан фокусу

Ми видаляємо outlineстилі за замовчуванням для деяких елементів керування форми та застосовуємо box-shadowзамість них a для :focus.

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

У наведеному вище прикладі введення використовуються спеціальні стилі в нашій документації, щоб продемонструвати :focusстан на .form-control.

Відключений стан

Додайте disabledлогічний атрибут до введення, щоб запобігти взаємодії користувача. Вимкнені вводи стають світлішими та додають not-allowedкурсор.

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

Вимкнені набори полів

Додайте disabledатрибут до a, <fieldset>щоб вимкнути всі елементи керування всередині <fieldset>одночасно.

Застереження щодо функціональності посилання`<a>`

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

Кросбраузерність

Хоча Bootstrap застосовуватиме ці стилі в усіх браузерах, Internet Explorer 11 і нижче не повністю підтримують disabledатрибут у <fieldset>. Використовуйте спеціальний JavaScript, щоб вимкнути набір полів у цих браузерах.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Стан лише для читання

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

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

Текст довідки

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

Пов’язування довідкового тексту з елементами керування форми

Текст довідки має бути явно пов’язаний із елементом керування форми, до якого він відноситься за допомогою aria-describedbyатрибута. Це гарантує, що допоміжні технології, такі як програми зчитування з екрана, оголошуватимуть цей довідковий текст, коли користувач сфокусується або введе елемент керування.

<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Стани перевірки

Bootstrap містить стилі перевірки для станів помилки, попередження та успіху в елементах керування форми. Щоб використовувати, додайте .has-warning, .has-errorабо .has-successдо батьківського елемента. Будь-які .control-label, .form-control, і .help-blockв межах цього елемента отримають стилі перевірки.

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

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

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

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

З додатковими значками

Ви також можете додати піктограми зворотного зв’язку за допомогою .has-feedbackзначка та правого значка.

Значки відгуків працюють лише з текстовими <input class="form-control">елементами.

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

Для входів без мітки та для груп входів із надбудовою праворуч потрібне розташування піктограм відгуків вручну . Вам наполегливо рекомендується надавати мітки для всіх вхідних даних з міркувань доступності. Якщо ви не бажаєте відображати мітки, приховайте їх за допомогою .sr-onlyкласу. Якщо потрібно обійтися без міток, налаштуйте topзначення піктограми відгуку. Для груп вводу встановіть відповідне rightзначення в пікселях залежно від ширини вашого аддона.

Передача значення значка допоміжним технологіям

Щоб гарантувати, що допоміжні технології, такі як програми зчитування з екрана, правильно передають значення піктограми, додатковий прихований текст має бути включений до .sr-onlyкласу та явно пов’язаний із елементом керування формою, до якого він відноситься, використовуючи aria-describedby. Крім того, переконайтеся, що значення (наприклад, факт наявності попередження для певного поля введення тексту) передається в іншій формі, наприклад змінюючи текст фактичного, <label>пов’язаного з елементом керування форми.

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

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

Додаткові піктограми в горизонтальній і вбудованій формах

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

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

Додаткові значки з прихованими `.sr-only`мітками

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

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

Контроль розмірів

Встановіть висоту за допомогою класів, таких як .input-lg, і ширину за допомогою класів стовпців сітки, таких як .col-lg-*.

Розмір висоти

Створюйте вищі або коротші елементи керування форми, які відповідають розмірам кнопок.

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

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

Розміри групи горизонтальної форми

Швидко змінюйте розмір міток і елементів керування форми .form-horizontal, додаючи .form-group-lgабо .form-group-sm.

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

Розміри стовпців

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

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

Теги кнопок

Використовуйте класи кнопок для елементів <a>, <button>, або .<input>

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

Контекстне використання

Хоча класи кнопок можна використовувати для елементів <a>і <button>, у наших компонентах nav і navbar підтримуються лише <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. Однак ви можете використовувати .activeon <button>s (і включити aria-pressed="true"атрибут), якщо вам знадобиться копіювати активний стан програмним шляхом.

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

Немає потреби додавати :active, оскільки це псевдоклас, але якщо вам потрібно створити такий самий вигляд, додайте .active.

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

Анкерний елемент

Додайте .activeклас до <a>кнопок.

Первинна ланка Посилання

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

Відключений стан

Щоб кнопки виглядали такими, що їх неможливо натиснути, відновіть їх за допомогою opacity.

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

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

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

Кросбраузерність

Якщо додати disabledатрибут до <button>, Internet Explorer 9 і старіші версії відображатимуть текст сірим із неприємною текстовою тінню, яку ми не можемо виправити.

Анкерний елемент

Додайте .disabledклас до <a>кнопок.

Первинна ланка Посилання

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

Ми використовуємо .disabledтут як допоміжний клас, подібний до загального .activeкласу, тому префікс не потрібен.

Застереження щодо функціональності посилання

Цей клас використовує pointer-events: none, щоб спробувати вимкнути функцію посилання <a>s, але ця властивість CSS ще не стандартизована і не повністю підтримується в Opera 18 і нижче або в Internet Explorer 11. Крім того, навіть у браузерах, які підтримують pointer-events: none, клавіатура навігація залишається незмінною, тобто зрячі користувачі клавіатури та користувачі допоміжних технологій все ще зможуть активувати ці посилання. Щоб бути в безпеці, використовуйте спеціальний JavaScript, щоб вимкнути такі посилання.

Чуйні зображення

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

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

Зображення SVG та IE 8-10

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

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

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

Додайте класи до <img>елемента, щоб легко стилізувати зображення в будь-якому проекті.

Кросбраузерність

Майте на увазі, що Internet Explorer 8 не підтримує закруглені кути.

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

Контекстні кольори

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

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Меценат sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Робота зі специфікою

Іноді класи виділення не можуть бути застосовані через специфіку іншого селектора. У більшості випадків достатнім обхідним шляхом є обернути текст у <span>клас з класом.

Передача значення допоміжним технологіям

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

Контекстні фони

Подібно до контекстних класів кольору тексту, легко встановити фон елемента для будь-якого контекстного класу. Компоненти прив’язки темніють при наведенні, як і текстові класи.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Меценат sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Робота зі специфікою

Іноді контекстні фонові класи не можуть бути застосовані через специфіку іншого селектора. У деяких випадках достатнім обхідним шляхом є обернути вміст вашого елемента в <div>клас.

Передача значення допоміжним технологіям

Як і у випадку з контекстними кольорами , переконайтеся, що будь-яке значення, яке передається через колір, також передається у форматі, який не є чисто презентаційним.

Закрити значок

Використовуйте загальну піктограму закриття, щоб відхилити такий вміст, як моди та сповіщення.

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

Каретки

Використовуйте вставки, щоб вказати функціональність і напрямок спадного списку. Зауважте, що вказівка за замовчуванням автоматично змінюватиметься у спадних меню .

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

Швидкі поплавці

Перемістіть елемент ліворуч або праворуч за допомогою класу. !importantвключено, щоб уникнути проблем із специфічністю. Класи також можна використовувати як міксини.

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

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

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

Центрувати блоки вмісту

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

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

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

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

Clearfix

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

.hideдоступний, але він не завжди впливає на програми зчитування екрана та не підтримується , починаючи з версії 3.0.1. Використовуйте .hiddenабо .sr-onlyзамість цього.

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

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

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

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

Вміст програми зчитування з екрана та клавіатури

Приховати елемент на всіх пристроях, крім програм зчитування екрана , за допомогою .sr-only. Поєднайте .sr-onlyз .sr-only-focusable, щоб знову показати елемент, коли він перебуває у фокусі (наприклад, користувач, який використовує лише клавіатуру). Необхідно для дотримання передових методів доступності . Також можна використовувати як міксини.

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

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Заміна зображення

Використовуйте .text-hideклас або mixin, щоб допомогти замінити текстовий вміст елемента фоновим зображенням.

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

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

Для швидшої розробки, адаптованої до мобільних пристроїв, використовуйте ці службові класи для показу та приховування вмісту на пристрої за допомогою медіа-запиту. Також включено корисні класи для перемикання вмісту під час друку.

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

Доступні класи

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

	Дуже маленькі пристроїТелефони (<768 пікселів)	Невеликі пристроїПланшети (≥768 пікселів)	Середні пристроїНастільні комп’ютери (≥992 пікселів)	Великі пристроїНастільні комп’ютери (≥1200 пікселів)
`.visible-xs-*`	Видно	Прихований	Прихований	Прихований
`.visible-sm-*`	Прихований	Видно	Прихований	Прихований
`.visible-md-*`	Прихований	Прихований	Видно	Прихований
`.visible-lg-*`	Прихований	Прихований	Прихований	Видно
`.hidden-xs`	Прихований	Видно	Видно	Видно
`.hidden-sm`	Видно	Прихований	Видно	Видно
`.hidden-md`	Видно	Видно	Прихований	Видно
`.hidden-lg`	Видн��	Видно	Видно	Прихований

Починаючи з версії 3.2.0, .visible-*-*класи для кожної точки зупину доступні в трьох варіантах, по одному для кожного displayзначення властивості CSS, указаного нижче.

Група занять	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Отже, xsнаприклад, для дуже малих ( ) екранів доступні .visible-*-*такі класи: .visible-xs-block, .visible-xs-inline, і .visible-xs-inline-block.

Класи .visible-xs, .visible-sm, .visible-mdі .visible-lgтакож існують, але вони застаріли з версії 3.2.0 . Вони приблизно еквівалентні .visible-*-block, за винятком додаткових спеціальних випадків для перемикання <table>елементів.

Роздрукуйте класи

Подібно до звичайних адаптивних класів, використовуйте їх для перемикання вмісту для друку.

Заняття	Браузер	Роздрукувати
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Прихований	Видно
`.hidden-print`	Видно	Прихований

Клас .visible-printтакож існує, але він застарів , починаючи з версії 3.2.0. Це приблизно еквівалентно .visible-print-block, за винятком додаткових спеціальних випадків для <table>-споріднених елементів.

Тестові випадки

Змініть розмір веб-переглядача або завантажте на різних пристроях, щоб перевірити адаптивні класи утиліт.

Видно на...

Зелені позначки вказують на те, що елемент видимий у вашому поточному вікні перегляду.

Дуже маленький ✔ Видно на x-small

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

Середній ✔ Видно на середньому рівні

Великий ✔ Видно на великому

Дуже маленький і малий ✔ Видно на x-small і small

Середні та великі ✔ Видно на середньому та великому

Дуже малий і середній ✔ Видно на x-small і medium

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

Дуже маленькі та великі ✔ Видно на x-small і large

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

Прихований на...

Тут зелені позначки також вказують на те, що елемент приховано у вашому поточному вікні перегляду.

Дуже маленький ✔ Приховано на x-small

Маленький ✔ Hidden on small

Середній ✔ Hidden on medium

Large ✔ Прихований на великому

Дуже маленький і малий ✔ Hidden on x-small and small

Medium and large ✔ Приховані на середньому та великому

Дуже малий і середній ✔ Hidden on x-small and medium

Small and large ✔ Приховані по малому і по великому

Extra small and large ✔ Приховані на x-small і large

Малий і середній ✔ Hidden on small and medium

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.

Розмір коробки

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

Міксин застарів , починаючи з версії 3.2.0, із запровадженням Autoprefixer. Щоб зберегти зворотну сумісність, Bootstrap продовжуватиме використовувати міксин усередині до Bootstrap v4.

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

Заокруглені кути

border-radiusСьогодні всі сучасні браузери підтримують властивість без префіксу . Таким чином, .border-radius()Mixin не існує, але Bootstrap містить ярлики для швидкого округлення двох кутів на певній стороні об’єкта.

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

Box (Drop) тіні

Якщо ваша цільова аудиторія використовує найновіші та найкращі веб-переглядачі та пристрої, переконайтеся, що ви використовуєте цей 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 v4.

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

Трансформації

Повертайте, масштабуйте, перекладайте (переміщуйте) або нахиляйте будь-який об’єкт.

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

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

анімації

Єдиний міксин для використання всіх властивостей анімації CSS3 в одній декларації та інші міксини для окремих властивостей.

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

Непрозорість

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

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

Текст-заповнювач

Надайте контекст для елементів керування форми в кожному полі.

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

Стовпці

Створення стовпців за допомогою CSS в одному елементі.

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

градієнти

Легко перетворюйте будь-які два кольори на фоновий градієнт. Отримайте додаткові знання та встановіть напрямок, використовуйте три кольори або використовуйте радіальний градієнт. За допомогою одного міксину ви отримуєте всі необхідні префікси синтаксису.

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

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

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

Якщо вам потрібен градієнт у стилі перукарської смужки, це теж легко. Просто вкажіть один колір, і ми накладемо напівпрозору білу смугу.

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

Збільште ставку та використовуйте замість цього три кольори. Установіть перший колір, другий колір, зупинку кольору другого кольору (відсоткове значення, наприклад 25%), і третій колір за допомогою цих міксинів:

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

Голови вгору! Якщо вам колись знадобиться видалити градієнт, обов’язково видаліть усі filterдодані вами елементи IE. Ви можете зробити це, використовуючи .reset-filter()міксин поруч із background-image: none;.

Службові міксини

Службові міксини — це міксини, які поєднують не пов’язані властивості CSS для досягнення певної мети чи завдання.

Clearfix

Забудьте про додавання class="clearfix"до будь-якого елемента, а натомість додайте .clearfix()міксин, де потрібно. Використовує micro clearfix від Nicolas Gallagher .

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

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

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

Швидке центрування будь-якого елемента в межах його батьківського елемента. Потрібна установка widthабо max-width.

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

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

Помічники розмірів

Простіше вказувати розміри об’єкта.

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

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

Текстові області зі змінним розміром

Легко налаштуйте параметри зміни розміру для будь-якої текстової області чи будь-якого іншого елемента. За замовчуванням стандартна поведінка браузера ( 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();
}

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

Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.

.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);
}

While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.

What's included

Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.

Path	Description
`lib/`	Ruby gem code (Sass configuration, Rails and Compass integrations)
`tasks/`	Converter scripts (turning upstream Less to Sass)
`test/`	Compilation tests
`templates/`	Маніфест пакета Compass
`vendor/assets/`	Sass, JavaScript і файли шрифтів
`Rakefile`	Внутрішні завдання, такі як рейк і конвертація

Відвідайте репозиторій GitHub порту Sass, щоб побачити ці файли в дії.

монтаж

Щоб отримати інформацію про те, як встановити та використовувати Bootstrap для Sass, зверніться до readme репозиторію GitHub . Це найновіше джерело та містить інформацію для використання з Rails, Compass і стандартними проектами Sass.

Bootstrap для Sass

CSS

Огляд

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

Перш за все мобільний

Типографіка та посилання

Normalize.css

Контейнери

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

вступ

Медіа запити

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

Приклад: відкладено до горизонталі

Приклад: контейнер для рідини

Приклад: мобільний і робочий стіл

Приклад: мобільний телефон, планшет, робочий стіл

Приклад: обтікання стовпцями

Чуйний стовпець скидається

Зніміть водостоки

Зміщення колон

Вкладені стовпці

Упорядкування колонок

Менше міксинів і змінних

Змінні

Міксини

Приклад використання

Типографіка

Заголовки

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

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

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

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

h5. Заголовок Bootstrap

h6. Заголовок Bootstrap

h1. Початковий заголовок Додатковий текст

h2. Початковий заголовок Додатковий текст

h3. Початковий заголовок Додатковий текст

h4. Початковий заголовок Додатковий текст

h5. Початковий заголовок Додатковий текст

h6. Початковий заголовок Додатковий текст

Основна копія

Провідна основна копія

Створено за допомогою Less

Вбудовані текстові елементи

Позначений текст

Видалений текст

Закреслений текст

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

Підкреслений текст

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

жирний

Курсив

Чергувати елементи

Класи вирівнювання

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

Скорочення

Основна абревіатура

Ініціалізм

Адреси

Блок цитат

Цитата за замовчуванням

Параметри цитат

Називання джерела

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

списки

Невпорядкований

Замовив

Нестилізований

В лінію

опис

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

Автообрізання

Код

В лінію

Введення користувача

Базовий блок

Змінні

Вихідний зразок

Таблиці

Базовий приклад

Смугасті ряди

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

Застереження щодо функціональності посилання`<a>`

Додаткові значки з прихованими `.sr-only`мітками