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.
Thành phần Bootstrap toast mới được giới thiệu trong Bootstrap 4. Chúng là các thông báo nhẹ tương tự như thông báo đẩy được trình duyệt web hiển thị trên màn hình máy tính. Chúng được xây dựng bằng flexbox, vì vậy bạn có thể dễ dàng căn chỉnh và định vị chúng trên một trang web.
Ngoài ra, Bootstrap toast là tùy chọn vì lý do hiệu suất, vì vậy bạn phải tự khởi tạo chúng bằng phương thức toast()
. Ngoài ra, Bootstrap toast sẽ tự động ẩn sau 5000 mili giây (5 giây), nếu bạn không chỉ định tùy chọn autohide: false
. Bây giờ chúng ta hãy xem làm thế nào để tạo thông báo với Bootstrap toast.
Mã cho Bootstrap toast khá đơn giản. Ví dụ sau đây sẽ chỉ cho bạn cách tạo thành phần toast với tiêu đề, nội dung và nút đóng.
<div class="toast" id="myToast">
<div class="toast-header">
<strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
<small>10 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
</div>
</div>
Toast có thể được kích hoạt thông qua JavaScript - chỉ cần gọi phương thức toast()
của Bootstrap với bộ chọn CSS id
hoặc class
của phần tử đích trong mã JavaScript của bạn.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myToast").toast("show");
});
});
</script>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn có thể sử dụng các lớp tiện ích màu và nền để tạo Bootstrap toast với các cách phối màu khác nhau.
Ví dụ sau đây sẽ tạo ra một Bootstrap toast với nền màu xanh lam và văn bản màu trắng.
<div class="toast bg-primary text-white fade show">
<div class="toast-header bg-primary text-white">
<strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
<small>10 mins ago</small>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
It's been a long time since you visited us. We've something special for you. <a href="#" class="text-white">Click here!</a>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn có thể xếp nhiều Bootstrap toast theo chiều dọc bằng cách chỉ cần bọc chúng trong toast container, điều này sẽ thêm một số khoảng cách theo chiều dọc. Hãy xem ví dụ sau:
<div class="toast-container">
<div class="toast fade show">
<div class="toast-header">
<strong class="me-auto"><i class="bi-globe"></i> Hello, world!</strong>
<small>just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
This is a basic toast message.
</div>
</div>
<div class="toast fade show">
<div class="toast-header">
<strong class="me-auto"><i class="bi-globe"></i> Hello, world!</strong>
<small>5 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
See? This is another toast message.
</div>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn có thể đặt Bootstrap toast ở bất kỳ đâu trên trang web của mình bằng cách sử dụng định vị CSS tùy chỉnh. Tuy nhiên, các vị trí như phía trên bên phải, phía dưới bên phải hoặc phía trên ở giữa được khuyến nghị cho các thông báo.
Ngoài ra, nếu bạn chỉ muốn hiển thị một Bootstrap toast tại một thời điểm, hãy đặt css định vị nội tuyến (tức là trực tiếp trên phần tử .toast
). Hãy thử một ví dụ và xem nó hoạt động như thế nào:
<div class="toast-container" style="position: absolute; top: 10px; right: 10px;">
<div class="toast fade show">
<div class="toast-header">
<strong class="me-auto"><i class="bi-globe"></i> Hello, world!</strong>
<small>just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
This is a basic toast message.
</div>
</div>
<div class="toast fade show">
<div class="toast-header">
<strong class="me-auto"><i class="bi-globe"></i> Hello, world!</strong>
<small>5 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
See? This is another toast message.
</div>
</div>
</div>
Kết quả của ví dụ trên sẽ giống như sau:
Có một số tùy chọn nhất định có thể được truyền cho phương thức toast()
của Bootstrap để tùy chỉnh chức năng của Bootstrap toast. Các tùy chọn có thể được truyền qua các thuộc tính data hoặc JavaScript.
Để đặt các tùy chọn cho Bootstrap toast thông qua các thuộc tính data, chỉ cần thêm tên tùy chọn vào data-bs-
, chẳng hạn như data-bs-autohide="false"
, data-bs-delay="3000"
, v.v.
Tên | Kiểu | Mặc định | Mô tả |
---|---|---|---|
animation | boolean | true | Áp dụng chuyển đổi mờ dần CSS cho toast. |
autohide | boolean | true | Tự động ẩn toast. |
delay | number | 5000 | Trì hoãn ẩn toast (mili giây). |
Thuộc tính data cung cấp một cách dễ dàng để thiết lập các tùy chọn cho Bootstrap toast, tuy nhiên JavaScript là cách thích hợp hơn vì nó ngăn bạn khỏi công việc lặp đi lặp lại. Xem các ví dụ về truyền các tùy chọn trong phần phương thức bên dưới để biết cách đặt tùy chọn cho Bootstrap toast bằng JavaScript.
Trong ví dụ sau, chúng tôi đã đặt tùy chọn autohide
thành false
sử dụng thuộc tính data (dòng số 1) ngăn Bootstrap toast tự động đóng.
<div class="toast" id="myToast" data-bs-autohide="false">
<div class="toast-header">
<strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
<small>10 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
</div>
</div>
Đây là các phương thức chuẩn của Bootstrap toast:
Bạn có thể truyền các tùy chọn vào Bootstrap toast bằng cách sử dụng đối tượng options
.
Mã ví dụ sau sẽ ngăn Bootstrap toast tự động đóng lại.
<script>
$(document).ready(function(){
$("#myToast").toast({
autohide: false
});
});
</script>
Đoạn mã ví dụ sau sẽ tăng thời gian tự động ẩn của Bootstrap toast lên 10 giây.
<script>
$(document).ready(function(){
$("#myToast").toast({
delay: 10000
});
});
</script>
Phương thức này được sử dụng để hiển thị Bootstrap toast.
<script>
$(document).ready(function(){
$(#myBtn").click(function(){
$("#myToast").toast("show");
});
});
</script>
Phương thức này được sử dụng để ẩn Bootstrap toast. Bạn phải gọi phương thức này theo cách thủ công nếu bạn đặt autohide
thành false
.
<script>
$(document).ready(function(){
$(#myBtn").click(function(){
$("#myToast").toast("hide");
});
});
</script>
Phương thức này ẩn Bootstrap toast của một phần tử. Bootstrap toast sẽ vẫn còn trên DOM nhưng sẽ không hiển thị nữa.
<script>
$(document).ready(function(){
$(#myBtn").click(function(){
$("#myToast").toast("dispose");
});
});
</script>
Đây là một phương thức tĩnh cho phép bạn lấy instance của Bootstrap toast được liên kết với một phần tử DOM.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
var myToast = bootstrap.Toast.getInstance($("#myToast")[0]);
console.log(myToast);
// {_element: div#myToast.toast.fade.show, _config: {…}, _timeout: null, _hasMouseInteraction: false, _hasKeyboardInteraction: false}
});
});
</script>
Đây là một phương thức tĩnh cho phép bạn lấy instance của Bootstrap toast đượ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 Bootstrap toast không được khởi tạo.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
var myToast = bootstrap.Toast.getOrCreateInstance($("#myToast")[0]);
console.log(myToast);
// {_element: div#myToast.toast.fade.show, _config: {…}, _timeout: null, _hasMouseInteraction: false, _hasKeyboardInteraction: false}
});
});
</script>
Mẹo: Các phương thức tĩnh không thể được gọi trên instance của lớp (tức là các đối tượng). Chúng được gọi trực tiếp từ lớp. Từ khóa static
được sử dụng để định nghĩa một phương thức tĩnh cho một lớp.
Lớp toast của Bootstrap bao gồm một số sự kiện để kết nối vào chức năng phương thức.
Sự kiện | Mô tả |
---|---|
show.bs.toast | Sự kiện này kích hoạt ngay lập tức khi phương thức show được gọi. |
shown.bs.toast | Sự kiện này được kích hoạt khi Bootstrap toast đã được hiển thị cho người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi bị kích hoạt. |
hide.bs.toast | Sự kiện này được kích hoạt ngay lập tức khi phương thức hide được gọi. |
hidden.bs.toast | Sự kiện này được kích hoạt khi Bootstrap toast đã hoàn thành bị ẩn khỏi người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi bị kích hoạt. |
Ví dụ sau sẽ hiển thị một thông báo cảnh báo cho người dùng khi quá trình chuyển đổi Bootstrap toast mờ dần đã hoàn tất. Chúng ta hãy dùng thử và xem nó hoạt động như thế nào:
<script>
$(document).ready(function(){
$("#myToast").on("hidden.bs.toast", function(){
alert("Toast component has been completely closed.");
});
});
</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 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.
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.