Trong hướng dẫn này, bạn sẽ học cách tạo các button bật tắt bằng Bootstrap.
Trong phần trước, bạn đã tìm hiểu về Bootstrap button cũng như cách tạo button group và thanh công cụ. Với Bootstrap, bạn có thể làm được nhiều hơn nữa với các button như kiểm soát trạng thái của các button, làm cho checkbox và radio button hoạt động giống như các button bật tắt, v.v. Trong phần sau chúng ta sẽ thảo luận chi tiết về chúng.
Bạn có thể kích hoạt chuyển đổi (tức là thay đổi trạng thái bình thường của button thành trạng thái bật và tắt) trên một button đơn giản bằng cách thêm thuộc tính data-bs-toggle="button"
.
Nếu bạn muốn một button được bật trước, bạn phải thêm lớp .active
theo cách thủ công.
<button type="button" class="btn btn-outline-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-outline-primary active" data-bs-toggle="button" autocomplete="off">Active toggle button</button>
<button type="button" class="btn btn-outline-primary" data-bs-toggle="button" autocomplete="off" disabled>Disabled toggle button</button>
Button bật tắt khi nhấp vào sẽ trông giống như sau:
Lưu ý: Trình duyệt Mozilla Firefox duy trì trạng thái button trên các lần tải trang, để ngăn chặn hành vi này, bạn có thể chỉ cần đặt thuộc tính autocomplete="off"
trên form chứa các button hoặc trực tiếp cho input hoặc phần tử button.
Bạn cũng có thể kết hợp các checkbox để tạo kiểu checkbox bật tắt trên button group. Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:
<div class="btn-group">
<input type="checkbox" class="btn-check" name="options" id="check1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="check1">Checkbox 1</label>
<input type="checkbox" class="btn-check" name="options" id="check2" autocomplete="off">
<label class="btn btn-outline-primary" for="check2">Checkbox 2</label>
<input type="checkbox" class="btn-check" name="options" id="check3" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="check3">Checkbox 3</label>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Lưu ý: Không sử dụng lớp.active
để chọn trước checkbox hoặc radio button trong button group, vì nó chỉ thay đổi hình thức trực quan để làm cho chúng giống như đã được bật. Để thực sự bật trước chúng, bạn sẽ cần phải tự áp dụng thuộc tínhchecked
trên phần tử input.
Tương tự, bạn có thể tạo kiểu radio button bật / tắt trên button group, như sau:
<div class="btn-group">
<input type="radio" class="btn-check" name="options" id="radio1" autocomplete="off">
<label class="btn btn-outline-primary" for="radio1">Radio 1</label>
<input type="radio" class="btn-check" name="options" id="radio2" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="radio2">Radio 2</label>
<input type="radio" class="btn-check" name="options" id="radio3" autocomplete="off">
<label class="btn btn-outline-primary" for="radio3">Radio 3</label>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Đây là các phương thức tiêu chuẩn của bootstrap button bật tắt:
Phương thức này chuyển đổi trạng thái bật tắt của button. Nó thay đổi hình thức của button và làm cho nó trông giống như đã được kích hoạt. Bạn cũng có thể bật tính năng tự động bật / tắt một button bằng cách sử dụng thuộc tính data-bs-toggle="button"
này. Hãy xem ví dụ sau:
<script>
$(document).ready(function(){
$(".btn").click(function(){
$(this).button("toggle");
});
});
</script>
Phương thức này hủy button của một phần tử (tức là loại bỏ dữ liệu được lưu trữ trên phần tử DOM).
<script>
$(document).ready(function(){
$("#disposeBtn").click(function(){
var myButton = bootstrap.Button.getInstance($("#myButton")[0]);
console.log(myButton);
// {_element: button#myButton.btn.btn-outline-primary.active}
myButton.dispose();
console.log(myButton);
// {_element: null}
});
});
</script>
Đây là một phương thức tĩnh cho phép bạn lấy instance của button được liên kết với một phần tử DOM.
<script>
$(document).ready(function(){
$("#getBtn").click(function(){
var myButton = bootstrap.Button.getInstance($("#myButton")[0]);
console.log(myButton);
// {_element: button#myButton.btn.btn-outline-primary.active}
});
});
</script>
Đây là một phương thức tĩnh cho phép bạn lấy instance của button được liên kết với một phần tử DOM hoặc tạo một instance mới trong trường hợp nút không được khởi tạo.
<script>
$(document).ready(function(){
$("#getBtn").click(function(){
var myButton = bootstrap.Button.getOrCreateInstance($("#myButton")[0]);
console.log(myButton);
});
});
</script>
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.