Bootstrap 5 thông báo

Toast (tosti)

Thành phần Toast tương tự như hộp cảnh báo, khi xảy ra một số sự kiện (ví dụ khi người dùng nhấn nút, gửi biểu mẫu...), nó chỉ hiển thị trong vài giây.

Cách tạo Toast

Nếu bạn muốn tạo Toast, hãy sử dụng .toast Loại, và thêm .toast-header và .toast-body。

Lưu ý:Mặc định, toast là ẩn. Nếu bạn muốn hiển thị nó, hãy sử dụng .show Loại. Nếu bạn muố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">
    Tiêu đề của Toast
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Văn bản trong phần chính của Toast.
  </div>
</div>

Thử ngay

Mở Toast

Nếu bạn muốn hiển thị Toast bằng cách nhấn nút, bạn phải khởi tạo nó bằng JavaScript: hãy chọn phần tử được chỉ định và gọi toast() Phương pháp.

Khi bạn nhấn nút, mã sau sẽ hiển thị tất cả toast trong tài liệu:

Mô hình

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

Thử ngay