Bootstrap 4 Forms - формы
Параметры по умолчанию Bootstrap 4
Элементы управления формы автоматически получают некоторый глобальный стиль с помощью Bootstrap:
Все текстовые <input>, <textarea> и <select> элементы с классом .form-control имеют ширину 100%.
Bootstrap 4 макеты форм
Bootstrap предоставляет два типа макетов форм:
- Форма с накоплением (полная ширина)
- Встроенная форма
Bootstrap 4 сложенная форма
В следующем примере создается сложенная форма с двумя полями ввода, одним флажком и кнопкой Submit.
Добавьте элемент-оболочку .form-group, вокруг каждого элемента управления формы, чтобы обеспечить правильные поля:
Пример
<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="form-group form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Встроенная форма Bootstrap
Во встроенной форме все элементы являются встроенными и выровненными по левому краю.
Примечание: это относится только к формам в видовых экранах, которые по крайней мере 576пкс в ширину. На экранах меньше, чем 576пкс, он будет стек горизонтально.
Дополнительное правило для встроенной формы:
- Добавить класс
.form-inlineк<form>элементу
В следующем примере создается встроенная форма с двумя полями ввода, один флажок и одна кнопка отправки:
Пример
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<div class="form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Встроенная форма с утилитами
Встроенная форма выше чувствует себя "сжатой", и будет выглядеть гораздо лучше с интервалом утилиты Bootstrap. В следующем примере добавляется правое поле ( .mr-sm-2 ) для каждого входа на всех устройствах (Small и up). А нижний класс Margin ( .mb-2 ) используется для стиля поля ввода при разрыве (переход от горизонтального к вертикальному из-за недостаточного пространства/ширины):
Пример
<form class="form-inline" action="/action_page.php">
<label for="email"
class="mr-sm-2">Email address:</label>
<input type="email" class="form-control
mb-2 mr-sm-2" id="email">
<label for="pwd"
class="mr-sm-2">Password:</label>
<input type="password" class="form-control
mb-2 mr-sm-2" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary
mb-2">Submit</button>
</form>
Вы узнаете больше о интервалах и других "вспомогательных" классах в нашем Bootstrap 4 Раздел "утилиты".