Користувацькі форми в Bootstrap 4

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>