Chúc mừng Bootstrap 5
nâng cốc chúc mừng
Thành phần bánh mì nướng giống như một hộp cảnh báo chỉ hiển thị trong vài giây khi có điều gì đó xảy ra (tức là khi người dùng nhấp vào nút, gửi biểu mẫu, v.v.).
Một số văn bản bên trong thân bánh mì nướng
Cách tạo bánh mì nướng
Để tạo bánh mì nướng, hãy sử dụng lớp .toast
và thêm .toast-header
và .toast-body
bên trong nó.
Lưu ý: Thông báo chúc mừng được ẩn theo mặc định. Sử dụng lớp .show
nếu bạn muốn hiển thị nó. Để đóng nó, hãy sử dụng phần tử <button> và thêm data-bs-dismiss="toast"
:
<div class="toast show">
<div class="toast-header">
Toast Header
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Hãy tự mình thử »Mở bánh mì nướng
Để hiển thị bánh mì nướng chỉ bằng một cú nhấp chuột, bạn phải khởi tạo nó bằng JavaScript: chọn phần tử được chỉ định và gọi phương thức toast()
.
Đoạn mã sau sẽ hiển thị tất cả "nâng ly" trong tài liệu khi bạn nhấp vào nút:
Ví dụ
<script>
document.getElementById("toastbtn").onclick =
function() {
var toastElList =
[].slice.call(document.querySelectorAll('.toast'))
var toastList =
toastElList.map(function(toastEl) {
return new
bootstrap.Toast(toastEl)
})
toastList.forEach(toast =>
toast.show())
}
</script>
Hãy tự mình thử »