Пользовательские формы
Bootstrap 4 представляет пользовательские формы — это полностью настраиваемые элементы формы, которые заменяют элементы формы в браузере по умолчанию. Идея создания пользовательских форм заключается в том, что они допускают дополнительную настройку и кроссбраузерность.
Bootstrap 4 использует CSS, чтобы скрыть оригинальный элемент формы (через opacity). Затем он использует CSS для создания нового элемента формы.
Флажки и переключатели
Флажки
При использовании флажков вставьте их в элемент <div> с применением классов .custom-control и .custom-checkbox. Также используйте .custom-control-input для фактического элемента <input> и .custom-control-label для элемента <label>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1">Ботинки</label> </div>
Переключатели
Пользовательские переключатели настраиваются аналогично флажкам. Единственное отличие состоит в том, что вам нужно использовать .custom-radio вместо .custom-input для элемента <label>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="custom-control custom-radio"> <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio1">Ботинки</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio2">Туфли</label> </div>
Строчные элементы форм
Пользовательские флажки и переключатели по умолчанию располагаются друг под другом. Чтобы отобразить их в одну строку, добавьте родительский класс .custom-control-inline.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input"> <label class="custom-control-label" for="customRadioInline1">Ботинки</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input"> <label class="custom-control-label" for="customRadioInline2">Туфли</label> </div>
Элемент <select>
Чтобы создать пользовательский элемент управления <select>, добавьте класс .custom-select к элементу <select>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <select class="custom-select"> <option selected>Выберите</option> <option value="1">Ботинки</option> <option value="2">Туфли</option> <option value="3">Ноги</option> </select>
Загрузка файла
Чтобы создать пользовательский элемент формы «загрузить файл», вставьте элемент <input> внутрь <div>, к которому применяется класс .custom-file. Используйте .custom-control-input для фактического элемента <input>, а также используйте элемент <label> с классом .custom-file-label.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="custom-file"> <input type="file" class="custom-file-input" id="customFile"> <label class="custom-file-label" for="customFile">Выберите файл</label> </div>
См. также
- <input>
- <label>
- <select>
- Аккордеон меню
- Вкладки на CSS
- Выпадающее меню
- Выравнивание элементов форм
- Загрузка файлов
- Использование :checked
- Кнопки
- Кнопки
- Отправка данных формы
- Переключатели
- Переключатели
- Подсказка в поле формы
- Поле для ввода пароля
- Поле для пароля
- Поле со списком
- Поле со списком
- Построение форм
- Скрытое поле
- Стилизация переключателей
- Стилизация флажков
- Сумасшедшие формы
- Текстовое поле
- Текстовое поле
- Флажки
- Флажки
- Формы в Bootstrap 4
- Формы в HTML
- Элемент label