Bootstrap 4 biểu mẫu tùy chỉnh
Bootstrap 4 biểu mẫu tùy chỉnh
Bootstrap 4 đi kèm với các thành phần biểu mẫu tùy chỉnh nhằm 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 phần tử vùng chứa, như <div>, với lớp .custom-control và .custom-checkbox xung quanh hộp kiểm. Sau đó thêm .custom-control-input vào đầu vào bằng loại = "hộp kiểm".
Mẹo: Nếu bạn sử dụng nhãn cho văn bản đi kèm, hãy thêm lớp .custom-control-label 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:
Ví 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> Hãy tự mình thử »Công tắc tùy chỉnh
Để tạo "công tắc chuyển đổi" tùy chỉnh, hãy bọc phần tử vùng chứa, như <div>, bằng một lớp .custom-control và .custom-switch xung quanh hộp kiểm. Sau đó thêm lớp .custom-control-input vào hộp kiểm:
Ví 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> Hãy tự mình thử »Nút radio tùy chỉnh
Để tạo nút radio tùy chỉnh, hãy bọc phần tử vùng chứa, như <div>, bằng lớp .custom-control và .custom-radio xung quanh nút radio. Sau đó thêm .custom-control-input vào đầu vào bằng 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 lớp .custom-control-label 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:
Ví 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> Hãy tự mình thử »Điều khiển 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 tuyến), hãy thêm .custom-control-inline vào trình bao bọc/vùng chứa:
Ví 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> Hãy tự mình thử » Menu chọn tùy chỉnh
Để tạo menu chọn tùy chỉnh, hãy thêm lớp .custom-select vào phần tử <select>:
Ví 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> Hãy tự mình thử »Kích thước menu chọn tùy chỉnh
Sử dụng lớp .custom-select-sm để tạo một menu chọn nhỏ và lớp .custom-select-lg cho một menu lớn:
Ví dụ
<form>
<!-- Small -->
<select name="cars" class="custom-select 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 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> Hãy tự mình thử »Phạm vi tùy chỉnh
Để tạo menu phạm vi tùy chỉnh, hãy thêm lớp .custom-range vào đầu vào có loại="<range>":
Ví dụ
<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form> Hãy tự mình thử »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-file xung quanh đầu vào có loại="file". Sau đó thêm .custom-file-input và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 lớp .custom-file-label 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 tệp xuất hiện khi bạn chọn một tệp cụ thể:
Ví 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ãy tự mình thử »