Bài 26: Toast trong Bootstrap 5
Toast cũng là một thành phần thú vị, giống như thông báo trên web, ứng dụng. Dưới đây là cách tạo toast trong Bootstrap 5.
Toast trên web là gì?
Toast là thành phần giống như một box cảnh báo nhưng chỉ hiện một vài giây khi điều gì đó xảy ra. Ví dụ: Khi người dùng click vào một nút bấm, gửi một biểu mẫu…
Cách tạo toast trong Bootstrap 5
Để tạo toast, dùng class .toast
cộng thêm .toast-header
và .toast-body
vào bên trong nó.
Lưu ý: Toast mặc định bị ẩn. Dùng class .show
nếu bạn muốn hiển thị nó. Để đóng nó, 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>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Ví dụ về toast trên Quantrimang.com</h3>
<p>Toast giống như một box thông báo nhanh, chỉ hiện trong vài giây khi tác vụ nào đó xảy ra.</p>
<p>Ví dụ này dùng .show để mặc định luôn hiện toast. Đóng nó bằng cách click vào dấu x trong header toast.</p>
<div class="toast show">
<div class="toast-header">
<strong class="me-auto">QuanTriMang.com</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
<p>Kênh thông tin công nghệ hàng đầu tại Việt Nam</p>
</div>
</div>
</div>
</body>
</html>
Mở một toast
Để hiện cảnh báo nhanh dạng toast bằng một click vào nút bấm, bạn phải khởi chạy nó với JavaScript: chọn phần tử đã chỉ định và gọi phương pháp toast().
Code sau sẽ hiện tất cả toast trong tài liệu khi bạn click vào một nút bấm:
<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>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Ví dụ về toast</h3>
<p>Ví dụ này dùng nút bấm để hiện toast.</p>
<button type="button" class="btn btn-primary" id="toastbtn">Hiện Toast</button>
<div class="toast">
<div class="toast-header">
<strong class="me-auto">Quantrimang.com</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
<p>Chào mừng bạn tới QuanTriMang.com</p>
</div>
</div>
</div>
<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>
</body>
</html>
Trên đây là những điều cần biết về cách tạo toast trong Bootstrap 5. Nó khá giống tooltip hay box thông báo nhưng chỉ hiển thị trong vài giây. Hi vọng bài học Bootstrap này hữu ích với các bạn.
Bạn nên đọc
-
Bài 7: Ảnh trong Bootstrap 5
-
Bài 4: Typography trong Bootstrap 5
-
Bài 25: Popover trong Bootstrap 5
-
Bài 3: Hệ thống lưới Grid System trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 24: Tooltip trong Bootstrap 5
-
Bài 10: Button trong Bootstrap 5
-
Bài 21: Navbar trong Bootstrap 5
-
Bài 22: Carousel trong Bootstrap 5
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Code Tiếu Ngạo Gamota mới nhất đổi vàng khóa, đàn hương
Hôm qua -
Hướng dẫn ẩn Fanpage Facebook đã thích
Hôm qua -
Cách thay đổi DNS Server trên Windows 11
Hôm qua -
Cách download Windows 10, tải file ISO Windows 10 từ Microsoft
Hôm qua 20 -
Code 3Q Legend mới nhất và cách nhập code
Hôm qua -
Xóa tận gốc các file "cứng đầu" nhất trên Windows
Hôm qua -
Cách khắc phục lỗi ghép nối Bluetooth “Try Connecting Your Device” trong Windows 10/11
Hôm qua -
Code Hầu Ca Đi Đâu Đấy mới nhất và cách nhập code
Hôm qua -
Microsoft ra mắt Windows 11 IoT Enterprise LTSC 2024 với khả năng hỗ trợ thiết bị rộng hơn và nhiều thay đổi lớn
Hôm qua -
6 cách tra cứu điểm thi vào lớp 10 Hà Nội 2025
Hôm qua