Bootstrap 4 Пользовательские формы
Bootstrap 4 Пользовательские формы
Bootstrap 4 поставляется с настраиваемыми элементами формы, которые предназначены для замены стандартных элементов браузера:
Пользовательский диапазон:
Диапазон по умолчанию:
Пользовательский флажок
Чтобы создать собственный флажок, оберните элемент-контейнер, например <div>, классом флажка .custom-controlи .custom-checkboxвокруг него. Затем добавьте .custom-control-inputк входу type="checkbox".
Совет: Если вы используете метки для сопроводительного текста, добавьте к .custom-control-labelнему класс. Обратите внимание, что значение атрибута for должно соответствовать идентификатору флажка:
Пример
<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck"
name="example1">
<label class="custom-control-label" for="customCheck">Check this custom
checkbox</label>
</div>
</form>
Пользовательский переключатель
Чтобы создать собственный «тумблер», оберните элемент-контейнер, например <div>, классом флажка .custom-controlи .custom-switchвокруг него. Затем добавьте .custom-control-inputкласс к флажку:
Пример
<form>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>
</form>
Пользовательские радиокнопки
Чтобы создать пользовательскую кнопку-переключатель, оберните элемент-контейнер, например <div>, классом кнопки-переключателя .custom-controlи вокруг нее. .custom-radioЗатем добавьте .custom-control-inputко входу type="radio".
Совет: Если вы используете метки для сопроводительного текста, добавьте к .custom-control-labelнему класс. Обратите внимание, что значение атрибута for должно соответствовать идентификатору радио:
Пример
<form>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio"
name="example1" value="customEx">
<label
class="custom-control-label" for="customRadio">Custom radio</label>
</div>
</form>
Встроенные настраиваемые элементы управления формы
Если вы хотите, чтобы настраиваемые элементы управления формы располагались рядом (встроенными), добавьте .custom-control-inlineв оболочку/контейнер:
Пример
<form>
<div class="custom-control custom-radio
custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio"
name="example" value="customEx">
<label
class="custom-control-label" for="customRadio">Custom radio
1</label>
</div>
<div class="custom-control custom-radio
custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio2"
name="example" value="customEx">
<label
class="custom-control-label" for="customRadio2">Custom radio
2</label>
</div>
</form>
Пользовательское меню выбора
Чтобы создать пользовательское меню выбора, добавьте .custom-selectкласс к элементу <select>:
Пример
<form>
<select name="cars" class="custom-select">
<option selected>Custom Select Menu</option>
<option
value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Пользовательский выбор размера меню
Используйте .custom-select-smкласс для создания небольшого меню выбора и .custom-select-lgкласс для большого:
Пример
<form>
<!-- Small -->
<select name="cars" class="custom-select-sm">
<option selected>Small Custom Select Menu</option>
<option
value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<!-- Large -->
<select name="cars" class="custom-select-lg">
<option selected>Large Custom Select Menu</option>
<option
value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Пользовательский диапазон
Чтобы создать собственное меню диапазона, добавьте .custom-rangeкласс к входу с type="<range>":
Пример
<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>
Пользовательская загрузка файлов
Чтобы создать пользовательскую загрузку файла, оберните элемент контейнера с классом .custom-fileвокруг ввода с помощью type="file". Затем добавьте .custom-file-inputк нему .
Совет: Если вы используете метки для сопроводительного текста, добавьте к .custom-file-labelнему класс. Обратите внимание, что значение атрибута for должно соответствовать идентификатору флажка:
Обратите внимание, что вам также необходимо включить некоторый код jQuery, если вы хотите, чтобы имя файла отображалось при выборе определенного файла:
Пример
<form>
<div class="custom-file">
<input
type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
<script>
// Add the following code if
you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName =
$(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>