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

HTML5 doctype

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

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

Мобільність на першому місці

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

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

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

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

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

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

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

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

Normalize.css

Для покращення крос-браузерного відображення, ми використовуємо Normalize.css, проект Nicolas Gallagher та Jonathan Neal.

Контейнери

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

Використовуйте .container для чутливого контейнера фіксованої ширини.

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

Використовуйте .container-fluid для контейнера, який розтягується на всю ширину оглядового вікна.

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

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

Ознайомлення

Система сітки використовується для створення сторінок шаблону через серію рядків та колонок. Далі показано як працює система сітки Bootstrap:

  • Для правильного вирівнювання та відступів, рядки повинні розміщуватись в межах .container (щоб мати фіксовану ширину) або .container-fluid (щоб мати повну ширину).
  • Використовуйте .row для створення рядків.
  • Класи, що починаються на col- використовуйте для створення колонок.
  • Вміст повинен розміщуватись в межах колонок, та лише рядки можуть безпосередньо обгортати колонки.
  • Використовуючи, наприклад .row та .col-xs-4, можна швидко створити шаблон сітки. LESS mixins також можна використовувати для більш раціонального створення шаблонів.
  • Колонки мають внутрішні відступи (між їх рамками та вмістом) завдяки властивості padding. Ці внутрішні відступи є причиною того, чому рядки мають від'ємне значення margin-left та margin-right.
  • Якщо проглянути приклади сітки нижче, то можна побачити, що вона ширша, за вміст, що не знаходиться в ній. Причина цього - згадане в попередньому пункті від'ємне значення в рядках. Також завдяки цьому, вміст в межах колонок сітки вишиковується в одну лінію з вмістом, що не знаходиться в сітці.
  • Колонка сітки створюється через зазначення одного номера із загальної доступної "суми дванадцять" (тобто – загальна сума номерів колонок в одному рядку не повинна перевищувати 12). Наприклад, щоб створити три однакові колонки, які розтягнуться на всю ширину рядка, у кожній із них необхідно встановити клас .col-xs-4.
  • Якщо в одному рядку вміщено більше, ніж 12 колонок, кожну групу додаткових колонок буде перенесено, як єдине ціле, на новий рядок.
  • Класи сітки застосовуються до пристроїв, з шириною екрану більшою або рівною контрольній точці, яка встановлена для даного класа; і в той же час, класи сітки, призначені для пристроїв з вужчим екраном, ігноруються. Таким чином, застосування будь-якого класа .col-md- до певного елемента, буде впливати на його стилі не лише на пристроях середнього розміру, але також і на пристроях з широким екраном, якщо клас .col-lg- не представлено.

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

Ми застосовуємо наступні медіа запити в LESS файлах для створення ключових контрольних точок у системі сітки.

/* Дуже вузькі пристрої (телефони, вужчі ніж 768px) */
/* Немає медіа запиту оскільки це встановлено початково в Bootstrap */

/* Невеликі пристрої (планшети, 768px та ширші) */
@media (min-width: @screen-sm-min) { ... }

/* Пристрої середнього розміру (настільні монітори, 992px та ширші) */
@media (min-width: @screen-md-min) { ... }

/* Великі пристрої (великі настільні монітори, 1200px та ширші) */
@media (min-width: @screen-lg-min) { ... }

Ми іноді додаємо в ці медіа запити max-width, щоб обмежити певні CSS, призначені для вужчого переліку пристроїв.

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

Опції сітки

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

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

Приклад: Складені-по-горизонталі

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

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-4

.col-md-4

.col-md-4

<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 .col-md-4

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

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

<!-- Складіть колонки на мобільних пристроях створюючи одну колонку на повну ширину, іншу – на половину ширини -->
<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>

<!-- Колонки стартують з ширини 50% на мобільниках та ущільнюються до ширини 33.3% на десктопах -->
<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>

<!-- Колонки завжди займають ширину 50% на мобільниках та десктопах -->
<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

.col-xs-6 .col-sm-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>
  <!-- Необов'язково: скасовуємо вплив класів XS на колонки, якщо їх вміст не підходить по висоті -->
  <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>Оскільки 9 + 4 = 13 &gt; 12, цей div шириною на 4 колонки буде переноситись на новий рядок як єдине ціле.</div>
  <div class="col-xs-6">.col-xs-6<br>Наступні колонки стають вздовж нового рядка.</div>
</div>

Скидання чутливості колонок

Чотири рівня сітки інколи можуть спричиняти відому проблему, коли в певних контрольних точках колонки матимуть різну висоту. Це можна виправити комбінуючи .clearfix з нашими допоміжними классами для чутливості.

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

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

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

  <!-- Додавайте clearfix лише якщо цього потребує оглядове вікно -->
  <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>

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

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

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

Зміщуйте колонки вправо використовуючи класи .col-md-offset-*. Ці класи збільшують відступ зліва на зазначену кількість колонок. Наприклад, .col-md-offset-4 зміщує .col-md-4 на ширину рівну чотирьом колонкам.

.col-md-4

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

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

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

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

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

Вкладені колонки

Щоб вкласти контент, додайте новий .row та набір колонок .col-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">
    Рівень 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Рівень 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Рівень 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>

Less mixins та змінні

На додачу до готових класів сітки для створення швидкого шаблону, Bootstrap має LESS змінні та mixins для легкого генерування ваших власних простих семантичних шаблонів. Далі йде опис їх застосування.

Змінні

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

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

Mixins

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

// Створює обгортку для серії колонок .make-row(@gutter: @grid-gutter-width) {
  // Потім скасовує рідинність колонок   .clearfix();

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

  // Від'ємні відступи вкладених рядків для вирівнювання вмісту колонок   .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Створення дуже вузьких колонок .make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Запобігання зникненню колонок через відсутність значень в них   min-height: 1px;
  // Внутрішні канавки (gutter) через padding   padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Розрахунок ширини в залежності від кількості колонок   @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Створення вузьких колонок .make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Запобігання зникненню колонок за відсутності значень в них   min-height: 1px;
  // Внутрішні канавки (gutter) через padding   padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Розрахунок ширини в залежності від кількості колонок   @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Створення зміщення вузьких колонок .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));
  }
}

// Створення середнього розміру колонок .make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Запобігання зникненню колонок за відсутності значень в них   min-height: 1px;
  // Внутрішні канавки (gutter) через padding   padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Розрахунок ширини в залежності від кількості колонок   @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Створення зміщення для середнього розміру колонок .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));
  }
}

// Створення широких колонок .make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Запобігання зникненню колонок за відсутності значень в них   min-height: 1px;
  // Внутрішні канавки (gutter) через padding   padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Розрахунок ширини в залежності від кількості колонок   @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Створення зміщення широких колонок .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));
  }
}

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

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

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

Semibold 36px

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

Semibold 30px

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

Semibold 24px

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

Semibold 18px
h5. Заголовок Bootstrap
Semibold 14px
h6. Заголовок Bootstrap
Semibold 12px
<h1>h1. Заголовок Bootstrap</h1>
<h2>h2. Заголовок Bootstrap</h2>
<h3>h3. Заголовок Bootstrap</h3>
<h4>h4. Заголовок Bootstrap</h4>
<h5>h5. Заголовок Bootstrap</h5>
<h6>h6. Заголовок Bootstrap</h6>

Створіть легший, додатковий текст в будь-якому заголовку за допомогою тега <small> або класа .small.

h2. Заголовок Bootstrap Додатковий текст

h3. Заголовок Bootstrap Додатковий текст

h4. Заголовок Bootstrap Додатковий текст

h5. Заголовок Bootstrap Додатковий текст
h6. Заголовок Bootstrap Додатковий текст
<h1>h1. Заголовок Bootstrap <small>Додатковий текст</small></h1>
<h2>h2. Заголовок Bootstrap <small>Додатковий текст</small></h2>
<h3>h3. Заголовок Bootstrap <small>Додатковий текст</small></h3>
<h4>h4. Заголовок Bootstrap <small>Додатковий текст</small></h4>
<h5>h5. Заголовок Bootstrap <small>Додатковий текст</small></h5>
<h6>h6. Заголовок Bootstrap <small>Додатковий текст</small></h6>

Тіло документа

В Bootstrap глобально встановлено font-size початково 14px, line-height 1.428. Це застосовується до <body> документа та всіх його параграфів. Окрім цього, параграф <p> формують відступаючи знизу на висоту рівну половині величини від line-height (10px початково).

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

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

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

Провідний текст документа

Створіть провідний параграф через додавання класа .lead.

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

Побудова з використанням Less

Типографське масштабування базується на двох змінних LESS у файлі variables.less: @font-size-base та @line-height-base. Перша змінна задає базовий розмір шрифта, який використовується всюди, а друга – базову висоту лінії. Ми використовуємо ці змінні та нескладні математичні дії для створення margins, paddings, та line-heights всіх наших типів та іншого. Налаштуйте їх, щоб адаптувати Bootstrap під власні потреби.

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

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

Для підсвічування текста, взятого з іншого контекста, використовуйте <mark>.

Можна використовувати тег mark щоб підсвітити текст.

<p>Можна використовувати тег mark щоб <mark>підсвітити</mark> текст.</p>

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

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

Цей рядок з текстом позначено як видалений текст.

<del>Цей рядок з текстом позначено як видалений текст.</del>

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

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

Цей рядок з текстом позначено як неактуальний текст.

<s>Цей рядок з текстом позначено як неактуальний текст.</s>

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

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

Цей рядок з текстом позначено як додатковий текст.

<ins>Цей рядок з текстом позначено як додатковий текст.</ins>

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

Щоб підкреслити текст використовуйте тег <u>.

Цей рядок з текстом показуватиметься як підкреслений текст

<u>Цей рядок з текстом показуватиметься як підкреслений текст</u>

Використовуйте початкові HTML-теги для візуального виділення, поєднуючи їх з легкими стилями.

Дрібний текст

Щоб зменшити акцентування рядка або блока текста, використовуйте тег <small>, який встановлює розмір текста у 85% від батьківського стилю. Елементи в заголовку мають свій власний шрифт font-size щоб вкладати елементи <small>.

Як альтернативу, ви можете використовувати вбудований елемент з класом .small замість <small>.

Цей рядок з текстом показуватиметься як дрібний текст.

<small>Цей рядок з текстом показуватиметься як дрібний текст.</small>

Жирний текст

Щоб акцентувати увагу на блоці текста через жирний шрифт, використовуйте тег <strong>.

Наступний фрагмент текста буде показано жирним шрифтом.

<strong>показано жирним шрифтом</strong>

Курсивний текст

Щоб зробити блок з курсивним текстом, використовуйте тег <em>.

Наступний фрагмент текста буде показано курсивним шрифтом.

<em>показано курсивним шрифтом</em>

Альтернативні елементи

Не соромтесь використовувати <b> та <i> в HTML5. <b> виділяє слова жирним текстом без передачі додаткового значення, тоді як тегом <i>, за звичай, позначають технічні терміни.

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

Легко вирівняти текст компонентів за допомогою класів вирівнювання.

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

Текст вирівняно по центру.

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

Текст вирівняно по ширині.

Текст зі стилем white-space: nowrap.

<p class="text-left">Текст вирівняно по лівому краю.</p>
<p class="text-center">Текст вирівняно по центру.</p>
<p class="text-right">Текст вирівняно по правому краю.</p>
<p class="text-justify">Текст вирівняно по ширині.</p>
<p class="text-nowrap">Текст зі стилем <code>white-space: nowrap</code>.</p>

Класи перетворень

Зробіть перетворення текста в компонентах з класами зміни регістра літер.

Текст з малої літери.

Текст з великої літери.

Текст, в якому першу літеру кожного слова змінено на велику.

<p class="text-lowercase">Текст з малої літери.</p>
<p class="text-uppercase">Текст з великої літери.</p>
<p class="text-capitalize">Текст, в якому першу літеру кожного слова змінено на велику.</p>

Абревіатури

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

Базова абревіатура

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

Абревіатурою слова attribute є attr.

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

Акроніми

Додайте .initialism до абревіатури, щоб злегка зменшити розмір шрифта.

HTML is the best thing since sliced bread.

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

Адреси

Презентуйте контактну інформацію. Відформатуйте блок, закінчуючи всі рядки через <br>.

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

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

Цитати

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

Початкові блоки цитування

Обгорніть за допомогою <blockquote> будь-який HTML-код, котрий має бути цитатою. Рекомендуємо починати цитату із <p>.

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

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

Опції цитати

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

Зазначення ресурсу

Додайте <footer> для ідентифікації ресурсу. Обгорніть назву ресурсу в <cite>.

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

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

Інші варіанти відображення

Використовуйте .blockquote-reverse для вирівнювання цитати по правому краю.

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

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  ...
</blockquote>

Списки

Без нумерації

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

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

Із нумерацією

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Без стилів

Видалення list-style та відступу зліва для списку пунктів. Таке видалення застосовується лише до безпосередніх дочірніх елементів, тобто необхідно додавати відповідний клас до будь-яких вкладених списків.

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

Вбудований

Розміщення всіх пунктів списку в одну лінію за допомогою display: inline-block; та невеликих відступів.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

Опис

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

Список з описом
Список з описом дуже добре підходить для визначення термінів.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

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

Розташуйте терміни та їх описи пліч-о-пліч у лінію за допомогою <dl>.

Список з описом
Список з описом дуже добре підходить для визначення термінів.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Автоматичне звуження

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

Вбудований код

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

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

Наприклад, код <code>&lt;section&gt;</code> повинен обгортатись як вбудований код.

Введений з клавіатури

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

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

Щоб змінити поточний каталог, введіть <kbd>cd</kbd> та шлях до каталогу, куди здійснюється перехід.<br>
Щоб змінити налаштування, натисніть <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

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

Використовуйте <pre> для декількох ліній коду. Переконайтесь, що в коді кутові дужки написано через відповідні html-сутності, для їх належного відображення.

<p>Це зразок текста...</p>
<pre>&lt;p&gt;Це зразок текста...&lt;/p&gt;</pre>

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

Змінні

Щоб показувати змінні використовуйте тег <var>.

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

Зразки виводу

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

Цей текст буде сприйматись як зразок виводу від певної комп'ютерної програми.

<samp>Цей текст буде сприйматись як зразок виводу від певної комп'ютерної програми.</samp>

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

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

Додатковий заголовок таблиці.
# Ім'я Прізвище Нік
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  ...
</table>

Смугаста таблиця

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

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

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

# Ім'я Прізвище Нік
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  ...
</table>

Розмежована таблиця

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

# Ім'я Прізвище Нік
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  ...
</table>

Наведені рядки

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

# Ім'я Прізвище Нік
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  ...
</table>

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

Додайте .table-condensed щоб зробити таблицю компактнішою шляхом скорочення відступів (padding) в комірках на половину.

# Ім'я Прізвище Нік
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-condensed">
  ...
</table>

Контекстні класи

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

Клас Опис
.active Застосовує колір при наведенні на окремі рядки чи комірки
.success Вказує на успішну чи позитивну дію
.info Вказує на попередження, що може потребувати уваги
.warning Вказує на небезпеку або потенційно негативну дію
.danger Вказує на звичайну інформативну зміну чи дію
# Заголовок колонки Заголовок колонки Заголовок колонки
1 Вміст колонки Вміст колонки Вміст колонки
2 Вміст колонки Вміст колонки Вміст колонки
3 Вміст колонки Вміст колонки Вміст колонки
4 Вміст колонки Вміст колонки Вміст колонки
5 Вміст колонки Вміст колонки Вміст колонки
6 Вміст колонки Вміст колонки Вміст колонки
7 Вміст колонки Вміст колонки Вміст колонки
8 Вміст колонки Вміст колонки Вміст колонки
9 Вміст колонки Вміст колонки Вміст колонки
<!-- В рядках -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- В комірках (`td` або `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Conveying meaning to assistive technologies

Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the .sr-only class.

Чутливі таблиці

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

Firefox та fieldsets

Firefox має незграбні деякі стилі fieldset за участю 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 role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Імейл адреса</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Введіть імейл">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Пароль</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Пароль">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">Вкласти файл</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Приклад блочного текста довідки.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Поставте галочку
    </label>
  </div>
  <button type="submit" class="btn btn-default">Відправити</button>
</form>

Не змішуйте класи form-group з класами input-group

Не змішуйте класи form-groups безпосередньо з класами input-group. Замість цього, вкладіть елементи з класом input-group всередину елементів з класами form-group.

Вбудована форма

Додайте .form-inline до <form> для вирівнювання по лівому краю та вставки блоку елементів управління форми. Це стосується лише форми в оглядовому вікні, з шириною щонайменше 768px.

Необхідно налаштовувати ширину

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

Завжди додавайте ярлики

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

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Імейл адреса</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Введіть Імейл">
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
      <input class="form-control" type="email" placeholder="Імейл">
    </div>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Пароль</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Пароль">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Запам'ятати мене
    </label>
  </div>
  <button type="submit" class="btn btn-default">Увійти</button>
</form>

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

Використовуйте предвизначені класи в Bootstrap для вирівнювання ярликів та елементів управління в горизонтальному макеті форми, додаючи до цих форм клас .form-horizontal. Діючи таким чином, .form-group поводитиметься як рядки сітки, тобто відпадає потреба в .row.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Імейл</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Імейл">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Пароль</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Пароль">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Запам'ятати мене
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Увійти</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="Текстовий тип поля">

Textarea

Textarea – це елемент управління форми, котрий підтримує багаторядкові лінії тексту. Змініть атрибут rows якщо необхідно.

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

Галочки та перемикачі

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

Галочки чи перемикачі з атрибутом disabled будуть мати стиль заблокованого елемента. Щоб елементи <label> для галочок або перемикачів також відображали курсор зі значком "не-дозволено" при наведені на такий елемент, додайте клас .disabled до .radio, .radio-inline, .checkbox, .checkbox-inline, чи <fieldset>.

Початкові (складені)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Опція перша – вибирайте її, якщо вам подобається цей пункт
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Опцію другу - заблоковано
  </label>
</div>
<br>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Опція перша – вибирайте її, якщо вам подобається цей пункт
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Опція друга може мати щось ще, та при її вибору буде зніматись галочка з першої опції
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" 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>, елемент input позиціонується так, як це очікується. Зараз працює тільки для галочок та перемикачів, стилізованих не в одну лінію (non-inline).

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

Select

Використовуйте початкові опції, або додайте multiple, щоб мати можливість вибрати декілька пунктів.

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

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

Статичні елементи управління

Коли вам потрібно розмістити простий текст після ярлика поля горизонтальної форми, використовуйте клас .form-control-static для <p>.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Імейл</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Пароль</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Пароль">
    </div>
  </div>
</form>
<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only">Імейл</label>
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Пароль</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Пароль">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Фокус в елементі форми input

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

Демо стану :focus

В прикладі вгорі, демонструється елемент в стані :focus в класі .form-control.

Заблоковані форми input

Додайте атрибут disabled до форми input для заборони введення даних користувачами та для надання формі дещо іншого вигляду.

<input class="form-control" id="disabledInput" type="text" placeholder="Це заблокований елемент input..." disabled>

Блокування елемента fieldsets

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

Функціональності лінка <a> не змінено

В наших стилях використовується pointer-events: none щоб спробувати заблокувати функціональність лінка в кнопкі <a class="btn btn-*">, в даному випадку, але ця властивість CSS ще не стандартизована та не в повній мірі підтримується в Opera 18 та нижче, або в Internet Explorer 11. Отже, щоб бути впевненим, використовуйте відповідний код JavaScript для блокування таких лінків.

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

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

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Заблоковано введення</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Введення заблоковано">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Заблоковано меню вибору</label>
      <select id="disabledSelect" class="form-control">
        <option>Заблоковано select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Тут не зможете поставити галочку
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Відправити</button>
  </fieldset>
</form>

Стан елемента input "тільки для читання"

Додайте логічний атрибут readonly в елемент input, щоб заблокувати введення у форму, та стилізувати елемент input як заблокований.

<input class="form-control" type="text" placeholder="input заблоковано…" readonly>

Стан пригодності

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

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Успішне введення</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Введення з попередженням</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Помилкове введення</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">
      Вигляд галочки при успіху
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Вигляд галочки при попередженні
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Вигляд галочки при помилці
    </label>
  </div>
</div>

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

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

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

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

Ручне позиціонування значків відгуків необхідне для елементів input без елементів label та для груп input з доповненням зправа. Ми настійно рекомендуємо використовувати елементи label для всіх форм введення з міркувань доступності (for accessibility reasons). Якщо ви не хочете, щоб label відображались, приховайте їх через клас sr-only. Якщо вам все ж необхідно прибрати label, налаштуйте значення top для значків відгуків. Для груп елементів input, налаштуйте значення right щоб враховувалась ширина вашого доповнення.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Успішне введення</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Введення з попередженням</label>
  <input type="text" class="form-control" id="inputWarning2">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Помилкове введення</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

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

<form class="form-horizontal" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Успішне введення</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
</form>
<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Успішне введення</label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
</form>

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

Щоб у формах приховати label, додайте клас .sr-only у відповідних елементах label. Bootstrap буде автоматично налаштовувати позиціонування значків, як тільки вони будуть додані.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Прихований елемент label</label>
  <input type="text" class="form-control" id="inputSuccess5">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

Управління розміром

Встановлюйте висоту використовуючи такі класи як .input-lg, та встановлюйте ширину використовуючи класи колонок сітки, такі як .col-lg-*.

Калібрування висоти

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

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Тут текст">
<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>

Калібрування розміру горизонтальної групи у формі

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

<form class="form-horizontal" role="form">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Великий ярлик</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">Малий ярлик</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Калібрування ширини колонок

Обгорніть елементи input в колонки сітки, чи будь-який підібраний батьківський елемент, для легкого застосування ширини.

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

Допоміжний текст

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

<span class="help-block">Блок допоміжного тексту (довідки), котрий переноситься на новий рядок та може поширюватись за межі одного рядка.</span>

Опції

Для швидкого створення стилю кнопки є декілька спеціальних класів.

<!-- Стандартна кнопка -->
<button type="button" class="btn btn-default">Підготовлена</button>

<!-- Надає додаткову візуальну вагу та визначає основну дію серед інших кнопок -->
<button type="button" class="btn btn-primary">Основна</button>

<!-- Показує успішну чи позитивну дію -->
<button type="button" class="btn btn-success">Успішна</button>

<!-- Контекстна кнопка для інформаційних повідомлень -->
<button type="button" class="btn btn-info">Інформаційна</button>

<!-- Вказує, що слід проявити обережність з цією дією -->
<button type="button" class="btn btn-warning">Попереджувальна</button>

<!-- Вказує на небезпеку або потенційно негативну дію -->
<button type="button" class="btn btn-danger">Небезпечна</button>

<!-- Кнопка приймає вигляд лінка, у той час як її поведінка залишається характерною для кнопки -->
<button type="button" class="btn btn-link">Лінк</button>

Conveying meaning to assistive technologies

Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the .sr-only class.

Розміри

Хочете мати більші чи менші кнопки? Додавайте .btn-lg, .btn-sm, чи .btn-xs щоб змінити їх розміри.

<p>
  <button type="button" class="btn btn-primary btn-lg">Велика кнопка</button>
  <button type="button" class="btn btn-default btn-lg">Велика кнопка</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Підготовлена кнопка</button>
  <button type="button" class="btn btn-default">Підготовлена кнопка</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Мала кнопка</button>
  <button type="button" class="btn btn-default btn-sm">Мала кнопка</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Дуже мала кнопка</button>
  <button type="button" class="btn btn-default btn-xs">Дуже мала кнопка</button>
</p>

Створюйте кнопки для блочного розміщення, котрі заповнюють всю ширину батьківського елемента, за допомогою класу .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Блочна кнопка</button>
<button type="button" class="btn btn-default btn-lg btn-block">Блочна кнопка</button>

Активний стан

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

Елемент button

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

<button type="button" class="btn btn-primary btn-lg active">Основна кнопка</button>
<button type="button" class="btn btn-default btn-lg active">Кнопка</button>

Елемент anchor

Додайте клас .active до елементів <a> у вигляді кнопок.

Основний лінк Лінк

<a href="#" class="btn btn-primary btn-lg active" role="button">Основний лінк</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Лінк</a>

Заблокований стан

Надайте кнопкам заблокованого вигляду через opacity.

Елемент button

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

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Основна кнопка</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Кнопка</button>

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

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

Елемент anchor

Додайте клас .disabled до елемента <a> у вигляді кнопки.

Основний лінк Лінк

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Основний лінк</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Лінк</a>

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

Функціональності лінка не змінено

В класі .disabled використовується pointer-events: none щоб спробувати заблокувати функціональність лінка в кнопкі <a class="btn btn-*">, в даному випадку, але ця властивість CSS ще не стандартизована та не в повній мірі підтримується в Opera 18 та нижче, або в Internet Explorer 11. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. Отже, щоб бути впевненим, використовуйте відповідний код JavaScript для блокування таких лінків.

Контекстна специфіка використання

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

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

<a class="btn btn-default" href="#" role="button">Лінк</a>
<button class="btn btn-default" type="submit">Кнопка</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="submit">

Links acting as buttons

If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

Крос-браузерне відображення

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

Серед іншого, є неполадка Firefox <30 яка не дає нам установки line-height для кнопок заснованих на <input>, змушуючи їх не точно відповідати висоті інших кнопок у Firefox.

Чутливі зображення

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

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

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

<img src="..." class="img-responsive" alt="Чутливе зображення">

Зображення фігури

Додавайте класи до елементів <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.

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Специфічне використання

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

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the .sr-only class.

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

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Специфічне використання

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

Conveying meaning to assistive technologies

As with contextual colors, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.

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

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

<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Закрити</span></button>

Спадне меню

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

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

Швидке вирівнювання

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

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Класи .pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Використання в якості mixins .element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Не для використання в навігаційних панелях

Щоб вирівняти компоненти із допоміжними класами в навігаційних панелях, використовуйте .navbar-left чи .navbar-right. Прогляньте доки для навменю для уточнень.

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

Встановіть для елементу блочне відображення через display: block та відображення по центру через margin. Така установка є доступною в якості класу та mixin.

<div class="center-block">...</div>
// Класи .center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Використання в якості mixins .element {
  .center-block();
}

Clearfix

Скасуйте float на будь-якому елементі, додаючи клас .clearfix до батьківського елемента. Тут використовується the micro clearfix наданий Nicolas Gallagher. Це також може застосовуватись в якості mixin.

<!-- Використовується як клас -->
<div class="clearfix">...</div>
// Mixin itself .clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Використання в якості mixin .element {
  .clearfix();
}

Показ та приховування вмісту

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

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

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

<div class="show">...</div>
<div class="hidden">...</div>
// Класи .show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

// Використання в якості mixins .element {
  .show();
}
.another-element {
  .hidden();
}

Зчитувачі екрана та клавіатура навігації вмісту

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

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Використання в якості mixin .skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

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

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

<h1 class="text-hide">Певний заголовок</h1>
// Використання в якості mixin .heading {
  .text-hide();
}

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

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

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

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

Дуже вузькі екрани Телефони (<768px) Вузькі екрани Планшети (≥768px) Середні екрани Монітори (≥992px) Широкі екрани Монітори (≥1200px)
.visible-xs-* Видно
.visible-sm-* Видно
.visible-md-* Видно
.visible-lg-* Видно
.hidden-xs Видно Видно Видно
.hidden-sm Видно Видно Видно
.hidden-md Видно Видно Видно
.hidden-lg Видно Видно Видно

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

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

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

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

Класи для друку

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

Класи Для браузера Для друку
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Видно
.hidden-print Видно

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

Розділ для тестування

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

Стилі для показу

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

✔ Видно на дуже вузьких

✔ Видно на вузьких

Не видно на середніх ✔ Видно на середніх

✔ Видно на широких

✔ Видно на дуже вузьких та вузьких

✔ Видно на середніх та широких

✔ Видно на дуже вузьких та середніх

✔ Видно на вузьких та широких

✔ Видно на дуже вузьких та широких

✔ Видно на вузьких та середніх

Стилі для приховування

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

✔ Не видимий на дуже вузьких

✔ Не видимий на вузьких

Видимий на середніх ✔ Не видимий на середніх

✔ Не видимий на широких

✔ Не видимий на дуже вузьких та вузьких

✔ Не видимий на середніх та широких

✔ Не видимий на дуже вузьких та середніх

✔ Не видимий на вузьких та широких

✔ Не видимий на дуже вузьких та широких

✔ Не видимий на вузьких та середніх

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

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

Збірка Bootstrap

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

Сторонні сервіси можуть працювати з Bootstrap для його компіляції, але вони не підтримуються нашою основною командою.

Змінні

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

Кольори

Легко використовувати дві колірні схеми: "сіру" та "семантичну". Сірі кольори надають швидкий доступ до широковживаних відтінків чорного, у той час як семантичні - включають варіанти кольорів, призначених для виразних контекстних значень.

@gray-darker:  lighten(#000, 13.5%); // #222 @gray-dark:    lighten(#000, 20%);   // #333 @gray:         lighten(#000, 33.5%); // #555 @gray-light:   lighten(#000, 46.7%); // #777 @gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

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

// Використовуйте як є .masthead {
  background-color: @brand-primary;
}

// Перепризначайте змінні в LESS @alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Каркас

Декілька змінних для швидкого налаштування ключових елементів каркасу вашого сайта.

// Каркас @body-bg:    #fff;
@text-color: @black-50;

Легко стилізувати лінки під потрібний колір лише з одним значенням змінної.

// Змінні @link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Використання a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Зауважте, що @link-hover-color використовує функцію – інший дивовижний інструмент в LESS, для автоматичного створення правильних завислих (hover) кольорів. Ви можете використовувати darken, lighten, saturate, та desaturate.

Типографія

Легко встановити шрифт, розмір тексту, провідний текст, та таке інше з кількома швидкими змінними. Bootstrap дозволяє використовувати їх, а також надає легкі типографські mixins.

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

Постачальник mixins

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

Box-sizing

Скидання компонентів box model в одному mixin. Щоб зрозуміти контекст, прогляньте helpful article from Mozilla.

Mixin є застарілим починаючи з v3.2.0, з появою автопрефіксера. Щоб залишити зворотну сумісність, Bootstrap буде продовжувати використовувати mixin внутрішньо до 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. І тому, зараз немає mixin .border-radius(), але Bootstrap робить включення ярликів для швидкого закруглення двох кутів з певних сторін об'єкта.

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

Блочна тінь (Спадаюча вниз)

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

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

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

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

Переходи

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

Mixin є застарілими починаючи з v3.2.0, з появою автопрефіксера. Щоб залишити зворотну сумісність, Bootstrap буде продовжувати використовувати mixin внутрішньо до 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;
}

Перетворення

Обертання, масштабування, переклад (перенесення), або нахил будь-якого об'єкта.

Mixin є застарілими починаючи з v3.2.0, з появою автопрефіксера. Щоб залишити зворотну сумісність, Bootstrap буде продовжувати використовувати mixin внутрішньо до Bootstrap v4.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // Тільки IE9           transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // Тільки IE9           transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // Тільки IE9           transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // Див. https://github.com/twbs/bootstrap/issues/4885; 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           transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // Тільки IE9           transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // Тільки IE9           transform-origin: @origin;
}

Анімація

Єдиний mixin для використання всіх властивостей анімації CSS3 в одному оголошенні, а інші mixins – для індивідуальних властивостей.

Mixin є застарілими починаючи з v3.2.0, з появою автопрефіксера. Щоб залишити зворотну сумісність, Bootstrap буде продовжувати використовувати mixin внутрішньо до Bootstrap v4.

.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 fallback для IE8.

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

Текстовий заповнювач (placeholder)

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

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

Градієнти

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

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

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

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

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

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

Підніміть ставки та використовуйте натомість три кольори. Встановіть перший колір, другий колір, колірну зупинку другого кольору (десяткове значення, наприклад 0.25), та третій колір з цими mixins:

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

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

Допоміжні mixins

Допоміжні mixins є домішками, що поєднують непов'язані (в іншому випадку) властивості CSS, для досягнення конкретної мети чи задачі.

Clearfix

Забудьте за додавання class="clearfix" до кожного елемента, а замість цього додайте mixin .clearfix(), у разі потреби. У цьому прикладі використовується micro clearfix from Nicolas Gallager.

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

// Використання .container {
  .clearfix();
}

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

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

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

// Використання .container {
  width: 940px;
  .center-block();
}

Помічники калібрування

Стало простіше вказувати розміри об'єктів.

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

// Використання .image { .size(400px; 300px); }
.avatar { .square(48px); }

Калібрування textarea

Легко налаштувати параметри калібрування до будь-якої текстової області (textarea), або будь-якого іншого елементу. Початково, для нормальної поведінки браузерів (both).

.resizable(@direction: both) {
  // Параметри: horizontal, vertical, both   resize: @direction;
  // Виправлення для Safari   overflow: auto;
}

Скорочення текста

Легко скоротити текст, з трьома крапками, за допомогою єдиного mixin. При цьому необхідно щоб елемент був стилізований як block, або як inline-block level.

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

// Використання .branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Сітка зображень

Визначте два шляхи зображень та @1x розмір зображень, і Bootstrap забезпечить @2x медіа запити. Якщо ви обслуговуєте багато зображень, подумайте про написання коду для CSS сітки зображень в єдиному медіа запиті.

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

// Використання .jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

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

Що входить в поставку

Оскільки порт Sass розміщено в окремому сховищі та призначений для дещо різної аудиторії, вміст його проекта дуже суттєво відрізняється від головного проекта Bootstrap. Це гарантує, що порт Sass є сумісним з багатьма Sass системами.

Шлях Опис
lib/ Код Ruby gem (Конфігурація Sass, Rails та Compass інтеграція)
tasks/ Конвертер скриптів (змінює потік Less на Sass)
test/ Compilation tests
templates/ Compass package manifest
vendor/assets/ Sass, JavaScript, та файли шрифтів
Rakefile Внутрішні задачі, такі як rake та convert

Відвідайте Sass port's GitHub repository щоб побачити ці файли в дії.

Встановлення

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

Bootstrap для Sass