Bootstrap JS Toasts
Các lớp CSS bánh mì nướng
Thành phần Bánh mì nướng giống như một hộp cảnh báo chỉ được 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.).
Để có hướng dẫn về Bánh mì nướng, hãy đọc Hướng dẫn sử dụng bánh mì nướng Bootstrap của chúng tôi .
| Class | Description | Example |
|---|---|---|
.toast |
Creates the toast | |
.toast-header |
Creates the toast header | |
.toast-body |
Creates the toast body |
Kích hoạt Qua JavaScript
Toasts phải được khởi tạo bằng jQuery: chọn phần tử được chỉ định và gọi toast()phương thức.
Thí dụ
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Tùy chọn bánh mì nướng
Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-animation="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when showing and hiding the toast.
|
|
| autohide | boolean | true | Specifies whether to hide the toast by default | |
| delay | number | 500 | Specifies the number of milliseconds it will take to hide the toast once it is shown. |
Phương pháp bánh mì nướng
Bảng sau liệt kê tất cả các phương pháp nướng bánh mì có sẵn.
| Method | Description | Try it |
|---|---|---|
| .toast(options) | Activates the toast with an option. See options above for valid values | |
| .toast("show") | Shows the toast | |
| .toast("hide") | Hides the toast | |
| .toast("dispose") | Hides and destroys the toast |
Sự kiện bánh mì nướng
Bảng sau liệt kê tất cả các sự kiện bánh mì nướng có sẵn.
| Event | Description | Try it |
|---|---|---|
| show.bs.toast | Occurs when the toast is about to be shown | |
| shown.bs.toast | Occurs when the toast is fully shown (after CSS transitions have completed) | |
| hide.bs.toast | Occurs when the toast is about to be hidden | |
| hidden.bs.toast | Occurs when the toast is fully hidden (after CSS transitions have completed) |