Пользовательские формы Bootstrap4

Bootstrap4 позволяет настраивать некоторые стили форм, чтобы заменить стили браузера по умолчанию.

Пользовательский флажок

Чтобы настроить флажок, можно задать<div>в качестве родительского элемента с классом.custom-controlи.custom-checkbox, поместите флажок как дочерний элемент внутрь<div>, затем установите для флажкаtype="checkbox", с классом.custom-control-input。

Для текста флажка используйте тегlabel, а метка использует класс.custom-control-label,labelofforзначение атрибута должно совпадать с id флажка.

Пример Bootstrap4

<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">Пользовательский флажок</label> </div> </form>

Попробуйте сами »

Пользовательская радиокнопка

Чтобы настроить радиокнопку, можно задать<div>как родительский элемент, с классом.custom-controlи.custom-radio, поместите радиокнопку как дочерний элемент внутрь<div>, затем задайте радиокнопкеtype="radio", с классом.custom-control-input。

Для текста радиокнопки используйте тегlabel, а элемент label использует класс.custom-control-label,labelofforзначение атрибута должно совпадать сid радиокнопки。

Пример Bootstrap4

<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">Пользовательская радиокнопка</label> </div> </form>

Попробуйте сами »

Пользовательские элементы управления, отображаемые в одной строке

Мы можем использовать класс.custom-control-inlineна внешнем элементе, чтобы обернуть пользовательские элементы управления формы, так чтобы пользовательские элементы управления формы отображались в одной строке:

Пример Bootstrap4

<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">Пользовательская радиокнопка 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">Пользовательская радиокнопка 2</label> </div> </form>

Попробуйте сами »

Пользовательское меню выбора

Чтобы создать пользовательское меню выбора, вы можете добавить<select>класс к элементу.custom-select:

Пример Bootstrap4

<form> <select name="cars" class="custom-select-sm"> <option selected>Пользовательское меню выбора</option> <option value="Google">Google</option> <option value="Example">Example</option> <option value="Taobao">Taobao</option> </select> </form>

Попробуйте сами »

Если мы хотим задать размер пользовательского меню выбора, мы можем использовать.custom-select-sm、.custom-select-lgчтобы задать их размер:

Пример Bootstrap4

<form>  <select name="cars" class="custom-select-sm"> <option selected>Меньшее настраиваемое меню выбора</option> <option value="Google">Google</option> <option value="Example">Example</option> <option value="Taobao">Taobao</option> </select>  <select name="cars" class="custom-select-lg"> <option selected>Большее настраиваемое меню выбора</option> <option value="Google">Google</option> <option value="Example">Example</option> <option value="Taobao">Taobao</option> </select> </form>

Попробуйте сами »

Настраиваемый ползунок

Мы можем добавитьinput— этоtype="range"класс в input элемента.custom-rangetype, чтобы задать настраиваемый ползунок:

Пример Bootstrap4

<form> <label for="customRange">Пользовательский элемент управления ползунком</label> <input type="range" class="custom-range" id="customRange" name="points1"> </form>

Попробуйте сами »

Пользовательский элемент управления загрузкой файлов

Мы можем добавить.custom-fileкласс к родительскому элементу, затем установитьinputвtype="file"и добавьте.custom-file-input:

Для текста элемента управления загрузкой используйтеlabelкак тег, а метка использует.custom-file-labelкласс,labelзначение атрибутаforдолжно совпадать сid。

Пример Bootstrap4

<form> <div class="custom-file"> <input type="file" class="custom-file-input" id="customFile"> <label class="custom-file-label" for="customFile">Выберите файл</label> </div> </form>

Попробуйте сами »

Другие расширения