Bánh mì nướng Bootstrap 4
Bánh mì nướng Bootstrap 4
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ách tạo bánh mì nướng
Để tạo bánh mì nướng, hãy sử dụng .toastlớp và thêm a .toast-headervà a
.toast-bodyvào bên trong nó:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Lưu ý: 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.
Đoạn mã sau sẽ hiển thị tất cả "chúc mừng" trong tài liệu:
Thí dụ
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Hiển thị và Ẩn một bánh mì nướng
Bánh mì nướng được ẩn theo mặc định. Sử dụng data-autohide="false"
thuộc tính để hiển thị nó theo mặc định. Để đóng nó, hãy sử dụng một phần tử <button> và thêm data-dismiss="toast":
Thí dụ
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">Toast Header</strong>
<small class="text-muted">5 mins ago</small>
<button
type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
Some text
inside the toast body
</div>
</div>
Chú ý mr-auto, ml-2và mb-1các lớp học? Chúng được sử dụng để thêm lợi nhuận cụ thể. Bạn sẽ tìm hiểu thêm về chúng trong Chương Tiện ích Bootstrap 4 .
Toàn bộ tài liệu tham khảo về bánh mì nướng Bootstrap
Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn, phương pháp và sự kiện bánh mì nướng, hãy truy cập Tài liệu tham khảo về bánh mì nướng Bootstrap JS của chúng tôi .