Форми, webreference

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

Давайте розглянемо типову форму для входу на сайт і на її прикладі розберемо, як працює Boostrap для форм. У прикладі 1 показано створення базової форми поки без додавання додаткових класів.

Приклад 1. Форма для входу на сайт

Форма виглядає нудно (рис. 1), оскільки будь-яке оформлення ще не включено.

Форми, webreference

Мал. 1. Вид вихідної форми

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

з класом form-group. Крім того змінимо чекбокс з текстом, додавши їх всередину
з класом checkbox і поставимо інший вид кнопки. У прикладі 2 показані зміни форми.

Приклад 2. Застосування класів

В результаті форма виглядає інакше (рис. 2).

Форми, webreference

Мал. 2. Форма форми

однорядкова форма

Щоб зробити форму компактніше, до елементу

досить додати клас form-inline. Елементи форми після цього витягнуться в один рядок (рис. 3). Також з коду слід прибрати
і .

Форми, webreference

Мал. 3. однорядковими форма

У прикладі 3 показано створення такої форми.

Приклад 3. однорядковими форма

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

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

Такий вид форми часто зустрічається на сайтах, коли поле і мітка до нього розташовуються на одному рядку (рис. 4).

Форми, webreference

Мал. 4. Форма горизонтальної форми

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

  • до додати клас form-horizontal;
  • до
  • обернути
  • використовувати модульну сітку.

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

додамо клас col-sm-2 безпосередньо до