Bootstrap 4 Form Inputs
Поддерживаемые элементы управления формы
Bootstrap поддерживает следующие элементы управления формы:
- input
- textarea
- checkbox
- radio
- select
Загрузочный вход
Bootstrap поддерживает все типы входных данных HTML5: текст, пароль, DateTime, DateTime-Local, дату, месяц, время, неделю, номер, адрес электронной почты, URL, поиск, тел и цвет.
Примечание: Входы не будут полностью стилизованы, если их тип не объявлен должным образом!
В следующем примере содержится два входных элемента; один из type="text" и один из type="password". Как мы уже упоминали в главе формы, мы используем .form-control класс для стиля входов с полной шириной и надлежащего заполнения, и т.д.:
Пример
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Загрузочное текстовое
В следующем примере содержится текстовое произносится:
Пример
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Флажки Bootstrap
Флажки используются, если требуется, чтобы пользователь мог выбрать любое количество параметров из списка предустановленных параметров.
В следующем примере содержатся три флажка. Последний параметр отключен:
Пример
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Пример объяснено
Используйте элемент-оболочку, class="form-check" чтобы обеспечить правильные поля для меток и флажков.
Добавьте .form-check-label класс к элементам меток, а также .form-check-input к правильному стилю флажков внутри .form-check контейнера.
Встроенные флажки
Используйте .form-check-inline класс, если вы хотите, чтобы флажки отображались в одной строке:
Пример
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Загрузочные переключатели
Переключатели используются, если вы хотите ограничить пользователя только одним выбором из списка предустановленных параметров.
Следующий пример содержит три переключателя. Последний параметр отключен:
Пример
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Как и в случае с флажками, используйте .form-check-inline класс, если вы хотите, чтобы переключатели отображались на одной строке:
Пример
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Список выбора Bootstrap
Списки выбора используются, если требуется разрешить пользователю выбирать из нескольких параметров.
В следующем примере содержится раскрывающийся список (выберите список):
Пример
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
Размер элемента управления формы
Изменение размера элемента управления Form с помощью .form-control-sm или .form-control-lg:
Пример
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Элемент управления формы с обычным текстом
Используйте, .form-control-plaintext Если вы хотите, чтобы стиль поле ввода как обычный текст:
Пример
<input type="text" class="form-control-plaintext">
Файл управления формой и диапазон
Добавьте .form-control-range класс или в input type"range" .form-control-file input type"file" стиль элемента управления диапазона или поля файла с полной шириной:
Пример
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">