Trong hướng dẫn này, bạn sẽ học cách tạo các điều khiển biểu mẫu (form) tùy chỉnh với Bootstrap.
Bootstrap cho phép bạn tùy chỉnh các điều khiển biểu mẫu mặc định của trình duyệt để tạo các bố cục biểu mẫu trang nhã hơn. Giờ đây, bạn có thể tạo các checkbox, radio button, file input, select dropdown, range input, ... tùy chỉnh và hoàn toàn tương thích với nhiều trình duyệt.
Trong các phần sau, bạn sẽ thấy cách tạo từng phần tử biểu mẫu tùy chỉnh đó.
Để tạo các checkbox (hộp kiểm) tùy chỉnh, hãy bao bọc mỗi hộp kiểm <input>
và phần tử <label>
tương ứng của chúng trong một phần tử <div>
và áp dụng các lớp như được hiển thị trong ví dụ sau:
<div class="form-check">
<input type="checkbox" class="form-check-input" name="customCheck" id="customCheck1">
<label class="form-check-label" for="customCheck1">Custom checkbox</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="customCheck" id="customCheck2" checked>
<label class="form-check-label" for="customCheck2">Another custom checkbox</label>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Tương tự, bạn có thể tạo các nút radio tùy chỉnh bằng Bootstrap như sau:
<div class="form-check">
<input type="radio" class="form-check-input" name="customRadio" id="customRadio1">
<label class="form-check-label" for="customRadio1">Custom radio</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="customRadio" id="customRadio2" checked>
<label class="form-check-label" for="customRadio2">Another custom radio</label>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn cũng có thể đặt các hộp kiểm tùy chỉnh này và các nút radio trong cùng một hàng bằng cách chỉ cần thêm lớp .form-check-inline
vào phần tử .form-check
.
Ví dụ sau sẽ hiển thị các hộp kiểm trong cùng một hàng.
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" name="customCheck" id="customCheck1">
<label class="form-check-label" for="customCheck1">Custom checkbox</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" name="customCheck" id="customCheck2" checked>
<label class="form-check-label" for="customCheck2">Another custom checkbox</label>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Tương tự, bạn có thể đặt các nút radio vào cùng một hàng, như được hiển thị trong ví dụ sau:
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="customRadio" id="customRadio1">
<label class="form-check-label" for="customRadio1">Custom radio</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="customRadio" id="customRadio2" checked>
<label class="form-check-label" for="customRadio2">Another custom radio</label>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Hộp kiểm và nút radio tùy chỉnh cũng có thể bị vô hiệu hóa. Chỉ cần thêm thuộc tính boolean disabled
vào phần tử <input>
, như được hiển thị trong ví dụ sau:
<div class="form-check">
<input type="checkbox" class="form-check-input" id="customCheck" disabled>
<label class="form-check-label" for="customCheck">Disabled custom checkbox</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="customRadio" disabled>
<label class="form-check-label" for="customRadio">Disabled custom radio</label>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Công tắc tương tự như hộp kiểm tùy chỉnh — sự khác biệt duy nhất là — nó sử dụng lớp .form-switch
để hiển thị một công tắc bật tắt. Công tắc cũng hỗ trợ thuộc tính disabled
.
Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="switchDefault">
<label class="form-check-label" for="switchDefault">Default switch checkbox</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="switchChecked" checked>
<label class="form-check-label" for="switchChecked">Checked switch checkbox</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="switchDisabled" disabled>
<label class="form-check-label" for="switchDisabled">Disabled switch checkbox</label>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn cũng có thể tùy chỉnh các menu thả xuống được chọn bằng cách chỉ cần thêm lớp .form-select
vào phần tử <select>
. Tuy nhiên, kiểu tùy chỉnh này chỉ giới hạn ở giao diện ban đầu của phần tử <select>
và không thể sửa đổi các phần tử <option>
do các giới hạn của trình duyệt.
<select class="form-select">
<option selected>Custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn cũng có thể thêm thuộc tính disabled
trên một select
tùy chỉnh để làm cho nó xuất hiện màu xám và xóa các sự kiện con trỏ, như được hiển thị trong ví dụ sau:
<select class="form-select" disabled>
<option selected>Custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn cũng có thể tạo biến thể lớn và nhỏ của các select
tùy chỉnh để phù hợp với chiều cao của các input có kích thước tương tự của Bootstrap bằng cách sử dụng các lớp .form-select-lg
và .form-select-sm
trên phần tử <select>
tương ứng. Hãy xem ví dụ sau:
<select class="form-select form-select-lg">
<option selected>Large custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select mt-3">
<option selected>Default custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm mt-3">
<option selected>Small custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Kết quả của ví dụ trên sẽ giống như sau:
Select
tùy chỉnh Bootstrap cũng hỗ trợ các thuộc tính multiple
và size
như select
thông thường:
<select class="form-select" size="3" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
Để tạo input range tùy chỉnh, chỉ cần áp dụng lớp .form-range
cho phần tử <input type="range">
.
<label for="customRange">Custom range</label>
<input type="range" class="form-range" id="customRange">
Kết quả của ví dụ trên sẽ giống như sau:
Bạn cũng có thể thêm thuộc tính disabled
trên input range để làm cho nó xuất hiện màu xám và xóa các sự kiện con trỏ, như được hiển thị trong ví dụ sau:
<label for="customRange">Disabled range</label>
<input type="range" class="form-range" id="customRange" disabled>
Kết quả của ví dụ trên sẽ giống như sau:
Theo mặc định, input range có các giá trị ngầm định cho tối thiểu và tối đa - 0 và 100, tương ứng. Tuy nhiên, bạn có thể chỉ định các giá trị mới cho những giá trị sử dụng thuộc tính min
và max
.
Ngoài ra, theo mặc định, input range "gắn" vào các giá trị số nguyên. Để thay đổi điều này, bạn có thể chỉ định một giá trị step
. Trong ví dụ sau, chúng tôi đã tăng gấp đôi số bước bằng cách sử dụng step="0.5"
.
<label for="customRange">Custom range</label>
<input type="range" class="form-range" min="0" max="10" step="0.5" id="customRange">
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.