Bootstrap CSS формы справка
Настройки по умолчанию Bootstrap
Отдельные элементы управления формой автоматически получают некоторый глобальный стиль с помощью Bootstrap.
Все текстовые < input >, < текстовое и < SELECT > элементы с классом = "форма-элемент управления" устанавливаются в ширину: 100%; по умолчанию.
Стандартные правила для всех трех макетов форм:
- Перенос меток и элементов управления формы в
<div class="form-group">(требуется для оптимального интервала) - Добавить класс
.form-controlко всем текстовым<input>,<textarea>и<select>элементам
В следующем примере создается простая форма начальной загрузки с двумя полями ввода, одним флажком и кнопкой Submit:
Пример формы Bootstrap
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Классы форм
| Класса | Описание | |
|---|---|---|
| .form-inline | Делает < form > Выравнивание по левому краю с элементами управления inline-block (это относится только к формам в видовых экранах, которые по крайней мере 768px в ширину) | |
| .form-horizontal | Выравнивание меток и групп элементов управления формы в горизонтальном макете | |
| .form-control | Используется на входных, текстовое и выбор элементов, чтобы охватить всю ширину страницы и сделать их отзывчивыми | |
| .form-control-feedback | Класс проверки формы | |
| .form-control-static | Добавление простого текста рядом с меткой формы в горизонтальной форме | |
| .form-group | Контейнер для ввода и метки формы |
Классы ввода
| Class | Description | |
|---|---|---|
| .input-group | Контейнер для улучшения ввода, добавив значок, текст или кнопку спереди или сзади, как "текст справки" | |
| .input-group-lg | Большая группа ввода | |
| .input-group-sm | Малая группа ввода | |
| .input-group-addon | Вместе с классом. Input-Group этот класс дает возможность добавить значок или текст справки рядом с полем ввода | |
| .input-group-btn | Вместе с классом. Input-Group этот класс прикрепляет кнопку рядом с входными данными. Часто используется в качестве панели поиска | |
| .input-lg | Большое поле ввода | |
| .input-sm | Небольшое поле ввода |
