Компоненти Bootstrap CSS

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

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

<!DOCTYPE html>

<html lang="en">

<head> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

</head>

  ...

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

Контейнери

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

Використовуйте .container для резинового інтерфейсу з фіксованою довжиною.

<div class="container">

  ...

</div>

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

<div class="container-fluid">

  ...

</div>

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

Bootstrap включає в себе, mobilefirst систему розмітки, яка відповідним чином масштабує до 12 стовпців при збільшенні розміру пристрою або екрану перегляду.

Початок

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

·         Рядки повинні бути поміщені всередину .container (fixed-width) або .container-fluid (full-width) для правильного вирівнювання та заповнення.

·         Використовуйте рядки (row) для створення горизонтальних груп стовпців (col).

·         Вміст повинен бути розташований в стовпці (col), і тільки стовпці можуть бути безпосередніми дочірніми елементами рядків (row).

·         Для швидкого створення схем сітки доступні визначені класи сітки, такі як .row і .col-xs-4. Less змішування також може бути використаний для більш осмислених (семантичних) схем.

·         Стовпці сітки (col) створюються шляхом зазначення кількості доступних дванадцяти стовпчиків, які ви хочете оголосити. Наприклад, три рівних стовпці будуть використовувати три .col-xs-4.

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

·         Сітка класів застосовується до пристроїв з шириною екрану, більшими або рівними розмірам контрольних точок і переважують класи сітки, орієнтовані на більш малі пристрої. Тому, наприклад, застосування будь-якого класу .col-md- * до елементу не тільки вплине на його стиль на середніх пристроях, а й на великі пристрої, якщо клас .col-lg- * відсутній.

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

 

Параметри розмітки

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

 

Дуже малий пристрій, телефон (<768px)

Малі пристрої, планшет (≥768px)

Середні пристрої, ПК (≥992px)

Великі пристрої, ПК (≥1200px)

Поведінка розмітки

Horizontal at all times

Collapsed to start, horizontal above breakpoints

Ширина контейнеру

None (auto)

750px

970px

1170px

Клас префиксу

.col-xs-

.col-sm-

.col-md-

.col-lg-

# колонок

12

Ширина колонки

Auto

~62px

~81px

~97px

Проміжкова ширина

30px (15px on each side of a column)

Вкладка

Yes

Відступ

Yes

Вирівнювання колонок
 колонок

Yes

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

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

<div class="row">

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

</div>

<div class="row">

  <div class="col-md-8">.col-md-8</div>

  <div class="col-md-4">.col-md-4</div>

</div>

<div class="row">

  <div class="col-md-4">.col-md-4</div>

  <div class="col-md-4">.col-md-4</div>

  <div class="col-md-4">.col-md-4</div>

</div>

<div class="row">

  <div class="col-md-6">.col-md-6</div>

  <div class="col-md-6">.col-md-6</div>

</div>

Приклад: еластичні блоки

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

<div class="container-fluid">

  <div class="row">

    ...

  </div>

</div>

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

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

 

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

 

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

 

<div class="row">

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

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

</div>

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

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

 

<div class="row">

  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>

  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

</div>

<div class="row">

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

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

  <div class="clearfix visible-xs-block"></div>

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

</div>

Приклад: обкладинка стовпця (col)

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

 

<div class="row">

  <div class="col-xs-9">.col-xs-9</div>

  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &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>

Рядок фіксації форматування

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

<div class="row">

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

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

 

  <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 пропускаючи один такий же стовпець

 

<div class="row">

  <div class="col-md-4">.col-md-4</div>

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

</div>

<div class="row">

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

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

</div>

<div class="row">

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

</div>

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

<div class="row">

  <div class="col-xs-6 col-sm-4">

  </div>

  <div class="col-xs-6 col-sm-4">

  </div>

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

  </div>

</div>

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

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

 

<div class="row">

  <div class="col-sm-9">

    Level 1: .col-sm-9

    <div class="row">

      <div class="col-xs-8 col-sm-6">

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

      </div>

      <div class="col-xs-4 col-sm-6">

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

      </div>

    </div>

  </div>

</div>

Вирівнювання колонок

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

 

<div class="row">

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

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

</div>

Стилі вмісту

Заголовки

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

 

<h1>h1. Bootstrap heading</h1>

<h2>h2. Bootstrap heading</h2>

<h3>h3. Bootstrap heading</h3>

<h4>h4. Bootstrap heading</h4>

<h5>h5. Bootstrap heading</h5>

<h6>h6. Bootstrap heading</h6>

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

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

<h2>h2. Bootstrap heading <small>Secondary text</small></h2>

<h3>h3. Bootstrap heading <small>Secondary text</small></h3>

<h4>h4. Bootstrap heading <small>Secondary text</small></h4>

<h5>h5. Bootstrap heading <small>Secondary text</small></h5>

<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

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

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

<p>...</p>

Акцент в основному тексті

Створіть виділений абзац шляхом додання .lead.

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

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

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

Для видвленяя основних елементів тексту в абзаці можна використати тег <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>.

This line of text will render as underlined

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

Для виділення тексту можна використовувати і теги доступні в HTML по замовчуванню.

Малий текст

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

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

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

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

Жирний шрифт

Для виділення тексту жирним нарисом потрібно:

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Курсив

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

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

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

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

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

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

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

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

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

В прикладі Ви можете побачити, яким чином змінити реєст літер тексту:

lowercased text.

Uppercased text.

Capitalized Text.

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">Capitalized text.</p>

Абревіатури

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

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

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

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

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

Адреси

Представте контактну інформацію. Захистіть форматування закінчивши всі рядки <br>.

<address>

  <strong>Twitter, Inc.</strong><br>

  1355 Market Street, Suite 900<br>

  San Francisco, CA 94103<br>

  <abbr title="Phone">P:</abbr> (123) 456-7890

</address>

 

<address>

  <strong>Full Name</strong><br>

  <a href="mailto:#">first.last@example.com</a>

</address>

Цитати

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

Цитати по замовчуванню

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

<blockquote>

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

</blockquote>

Варіанти цитати

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

Назва джерела

Додайте <footer> для вказівки джерела. Вкладіть ім'я джерела праці в <cite>.

<blockquote>

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

  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>

</blockquote>

Альтернативний вигляд

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

<blockquote class="blockquote-reverse">

  ...

</blockquote>

Списки

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

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

<ul>

  <li>...</li>

</ul>

Впорядкований

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

<ol>

  <li>...</li>

</ol>

Без стилю

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

<ul class="list-unstyled">

  <li>...</li>

</ul>

Вирівняний

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

<ul class="list-inline">

  <li>...</li>

</ul>

Визначення

Список термінів та їх визначення

<dl>

  <dt>...</dt>

  <dd>...</dd>

</dl>

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

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

<dl class="dl-horizontal">

  <dt>...</dt>

  <dd>...</dd>

</dl>

Автоматичне стиснення

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

Код

Вбудований

Помістіть код в тег <code>.

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

Ввід користувача

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

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>

To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Блок коду

Використовуйте <pre> для декількох рядків коду. Будьте пильними, і контролюйте використання знаків більше-менше.

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

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

Змінні

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

y = mx + b

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

Приклад виводу

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

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

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

Таблиці

Простий приклад

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

<table class="table">

  ...

</table>

"Зебра"

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

Сумісність із браузерами

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

<table class="table table-striped">

  ...

</table>

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

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

<table class="table table-bordered">

  ...

</table>

Підсвічування рядків

Додайте .table-hover для ввімкнення підсвічування рядка таблиці курсором миші <tbody>.

<table class="table table-hover">

  ...

</table>

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

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

<table class="table table-condensed">

  ...

</table>

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

Використовуйте контекстні класи для кольору рядка таблиці або окремих клітинок.

Клас

Опис

.active

Застосовує колір при наведенні на конкретну рядок або елемент

.success

Вказує на успішне або позитивну дію

.info

Вказує на нейтральні інформативні зміни або дії

.warning

Вказує на попередження, які можуть потребувати уваги

.danger

Вказує на небезпечне або потенційно негативну дію

<!-- В рядках --> 

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

Форми

Простий приклад

Індивідуальні форми управління автоматично отримують глобальну стилізованість. Всі текстові <input>, <textarea> та <select> елементи з <textarea> встановлені в 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-horizontal для вирівнювання підписів елемнтів форми в одну лінію із полями вводу. При цьому змінюється .form-group, він починає вести себе рядком, тому використання класу .row непотрібне.

Начало формы

 

Конец формы

<form class="form-horizontal">

  <div class="form-group">

    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">

    </div>

  </div>

  <div class="form-group">

    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <div class="checkbox">

        <label>

          <input type="checkbox"> Remember me

        </label>

      </div>

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-default">Sign in</button>

    </div>

  </div>

</form>

Неактивний стан

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

Начало формы

 

Конец формы

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

Відключення наборів полей

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

 

Конец формы

<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 class="sr-only" 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>

Кнопки

Теги кнопки

Використовуйте button клас для, <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> елементи використовуються в якості кнопки на сторінці, то потрібно додати атрибут role="button" не залежно від того, перезавантажує кномка сторінку чи ні.

Параметри

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

<!-- Стандартна кнопка --> 

<button type="button" class="btn btn-default">Default</button>

 

<button type="button" class="btn btn-primary">Primary</button>

 

<button type="button" class="btn btn-success">Success</button>

 

<button type="button" class="btn btn-info">Info</button>

 

<button type="button" class="btn btn-warning">Warning</button>

 

<button type="button" class="btn btn-danger">Danger</button>

 

<button type="button" class="btn btn-link">Link</button>

Розміри

Великі чи малі кнопки? Додайте .btn-lg, .btn-sm, або .btn-xs для зміни розмірів.

<p>

  <button type="button" class="btn btn-primary btn-lg">Large button</button>

  <button type="button" class="btn btn-default btn-lg">Large button</button>

</p>

<p>

  <button type="button" class="btn btn-primary">Default button</button>

  <button type="button" class="btn btn-default">Default button</button>

</p>

<p>

  <button type="button" class="btn btn-primary btn-sm">Small button</button>

  <button type="button" class="btn btn-default btn-sm">Small button</button>

</p>

<p>

  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>

  <button type="button" class="btn btn-default btn-xs">Extra small button</button>

</p>

Створити кнопку яка охопить весь розмір блоку можна за допомогою класу .btn-block.

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

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

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

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

Натиснуті кнопки

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

Неактивний стан

Створіть неактивні кнопки, із застосуванням прозорості 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>

Зображення

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

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

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

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

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

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

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

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

// Класи 

.pull-left {

  float: left !important;

}

.pull-right {

  float: right !important;

}

Не використовувати в Navbars

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

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

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

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

// Клас 

.center-block {

  display: block;

  margin-left: auto;

  margin-right: auto;

}

Відображення та приховування вмісту

Щоб приховати або відобразити елемент (в тому числі, для програм читання з екрану) використовуйте класи .show і .hidden. Ці класи використовують! Important, щоб уникнути специфічних конфліктів.

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

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

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

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

// Класи 

.show {

  display: block !important;

}

.hidden {

  display: none !important;

}

.invisible {

  visibility: hidden;

}

Адаптивні помічники

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

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

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

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

 

Досить малий пристрій, телефон (<768px)

Малі пристрої, планшети (≥768px)

Середні пристрої, настільні ПК (≥992px)

Великі пристрої, настільні ПК (≥1200px)

.visible-xs-*

Visible

Hidden

Hidden

Hidden

.visible-sm-*

Hidden

Visible

Hidden

Hidden

.visible-md-*

Hidden

Hidden

Visible

Hidden

.visible-lg-*

Hidden

Hidden

Hidden

Visible

.hidden-xs

Hidden

Visible

Visible

Visible

.hidden-sm

Visible

Hidden

Visible

Visible

.hidden-md

Visible

Visible

Hidden

Visible

.hidden-lg

Visible

Visible

Visible

Hidden

Також доступні класи і для відображення трьох видів блоків. Класи та властивість 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 також присутні, але будуть вилучені в подальшому. Вони еквівалентні класам .visible-*-block, за виключенням випадків коли використовуються <table> зв’язані елементи.

Класи друку

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

.Клас

Браузер

Друк

.visible-print-block
.visible-print-inline
.visible-print-inline-block

Hidden

Visible

.hidden-print

Visible

Hidden

Клас .visible-print також присутній, але буде вилучений в подальшому. Він еквівалентний .visible-print-block.