Bootstrap Формы
Настройки по умолчанию Bootstrap
Элементы управления формы автоматически получают некоторый глобальный стиль с помощью Bootstrap:
Все текстовые <input> , <textarea> и <select> элементы с классом .form-control имеют ширину 100%.
Макеты форм начальной загрузки
Bootstrap предоставляет три типа макетов форм:
- Вертикальная форма (по умолчанию)
- Горизонтальная форма
- Встроенная форма
Стандартные правила для всех трех макетов форм:
- Перенос меток и элементов управления формы в
<div class="form-group">(требуется для оптимального интервала) - Добавить класс
.form-controlко всем текстовым<input>,<textarea>и<select>элементам
Вертикальная форма Bootstrap (по умолчанию)
В следующем примере создается вертикальная форма с двумя полями ввода, одним флажком и кнопкой Submit:
Пример
<form action="/action_page.php">
<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>
Bootstrap Встроенная форма
В встроенной форме все элементы являются встроенными, выровненными по левому краю, а метки — рядом.
Примечание: это относится только к формам в видовых экранах, которые по крайней мере 768px в ширину!
Дополнительное правило для встроенной формы:
- Добавить класс
.form-inlineк<form>элементу
В следующем примере создается встроенная форма с двумя полями ввода, один флажок и одна кнопка отправки:
Пример
<form class="form-inline" action="/action_page.php">
<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>
Совет: Если вы не включили метку для каждого входа, читатели экрана будут иметь проблемы с вашими формами.
Можно скрыть метки для всех устройств, за исключением программ чтения с экрана, с помощью .sr-only класса:
Пример
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" 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>
Загрузочная горизонтальная форма
Горизонтальная форма означает, что метки выровнены рядом с полем ввода (горизонтально) на больших и средних экранах. На маленьких экранах (767пкс и ниже) он преобразуется в вертикальную форму (метки помещаются поверх каждого входа).
Дополнительные правила для горизонтальной формы:
- Добавить класс
.form-horizontalк<form>элементу - Добавить класс
.control-labelко всем<label>элементам
Совет: Используйте стандартные классы сетки Bootstrap для выравнивания меток и групп элементов управления формы в горизонтальном макете.
В следующем примере создается горизонтальная форма с двумя полями ввода, один флажок и одна кнопка отправки.
Пример
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter 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">Submit</button>
</div>
</div>
</form>
