Загрузочные формы
Настройки Bootstrap по умолчанию
Элементы управления формы автоматически получают некоторые глобальные стили с помощью Bootstrap:
Все текстовые элементы <input>, <textarea>и
<select>с классом .form-controlимеют ширину 100%.
Макеты формы Bootstrap
Bootstrap предоставляет три типа макетов форм:
- Вертикальная форма (по умолчанию)
- Горизонтальная форма
- Встроенная форма
Стандартные правила для всех трех макетов форм:
- Оберните этикетки и элементы управления формой
<div class="form-group">(необходимо для оптимального расстояния) - Добавить класс
.form-controlко всем текстовым элементам<input>,<textarea>и<select>
Вертикальная форма Bootstrap (по умолчанию)
В следующем примере создается вертикальная форма с двумя полями ввода, одним флажком и кнопкой отправки:
Пример
<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
Во встроенной форме все элементы встроены, выровнены по левому краю, а метки расположены рядом.
Примечание. Это относится только к формам в окнах просмотра шириной не менее 768 пикселей!
Дополнительное правило для встроенной формы:
- Добавить класс
.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>
Bootstrap Горизонтальная форма
Горизонтальная форма означает, что метки выровнены рядом с полем ввода (горизонтально) на больших и средних экранах. На маленьких экранах (767px и ниже) он преобразуется в вертикальный вид (метки размещаются поверх каждого ввода).
Дополнительные правила для горизонтальной формы:
- Добавить класс
.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>