Bootstrap 4 Biểu mẫu tùy chỉnh

Bootstrap 4 đi kèm với các phần tử biểu mẫu tùy chỉnh, có nghĩa là để thay thế các giá trị mặc định của trình duyệt:

Phạm vi tùy chỉnh:

Phạm vi mặc định:

Hộp kiểm tùy chỉnh

Để tạo hộp kiểm tùy chỉnh, hãy bọc một phần tử vùng chứa, như <div>, bằng một lớp .custom-controlvà .custom-checkboxxung quanh hộp kiểm. Sau đó, thêm .custom-control-inputvào đầu vào với type = "checkbox".

Mẹo: Nếu bạn sử dụng nhãn cho văn bản đi kèm, hãy thêm .custom-control-labellớp vào đó. Lưu ý rằng giá trị của thuộc tính for phải khớp với id của hộp kiểm:

Thí dụ

<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>

Công tắc tùy chỉnh

Để tạo một "công tắc bật tắt" tùy chỉnh, hãy bọc một phần tử vùng chứa, chẳng hạn như <div>, với một lớp .custom-controlvà .custom-switchxung quanh một hộp kiểm. Sau đó, thêm .custom-control-inputlớp vào hộp kiểm:

Thí dụ

<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>

Các nút Radio tùy chỉnh

Để tạo một nút radio tùy chỉnh, hãy bọc một phần tử vùng chứa, chẳng hạn như <div>, với một lớp .custom-controlvà .custom-radioxung quanh nút radio. Sau đó, thêm .custom-control-inputvào đầu vào với type = "radio".

Mẹo: Nếu bạn sử dụng nhãn cho văn bản đi kèm, hãy thêm .custom-control-labellớp vào đó. Lưu ý rằng giá trị của thuộc tính for phải khớp với id của radio:

Thí dụ

<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>

Kiểm soát biểu mẫu tùy chỉnh nội tuyến

Nếu bạn muốn các điều khiển biểu mẫu tùy chỉnh nằm cạnh nhau (nội dòng), hãy thêm .custom-control-inlinevào trình bao bọc / vùng chứa:

Thí dụ

<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>

Menu lựa chọn tùy chỉnh

Để tạo menu chọn tùy chỉnh, hãy thêm .custom-selectlớp vào phần tử <select>:

Thí dụ

<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>

Kích thước menu lựa chọn tùy chỉnh

Sử dụng .custom-select-smlớp để tạo một menu chọn nhỏ và .custom-select-lglớp cho một menu lớn:

Thí dụ

<form>

<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>


<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>

Phạm vi tùy chỉnh

Để tạo menu phạm vi tùy chỉnh, hãy thêm .custom-rangelớp vào đầu vào có kiểu = "<range>":

Thí dụ

<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>

Tải lên tệp tùy chỉnh

Để tạo tệp tải lên tùy chỉnh, hãy bọc phần tử vùng chứa bằng một lớp .custom-filexung quanh đầu vào với type = "file". Sau đó, thêm .custom-file-inputvào nó.

Mẹo: Nếu bạn sử dụng nhãn cho văn bản đi kèm, hãy thêm .custom-file-labellớp vào đó. Lưu ý rằng giá trị của thuộc tính for phải khớp với id của hộp kiểm:

Lưu ý rằng bạn cũng phải bao gồm một số mã jQuery nếu bạn muốn tên của tệp xuất hiện khi bạn chọn một tệp cụ thể:

Thí dụ

<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>

Hướng dẫn Bootstrap 4

Bootstrap 4 Grid

Bootstrap 4 Khác

Bootstrap 4 Ref

Bootstrap 4 Biểu mẫu tùy chỉnh