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ỉ 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 lớp .toast
và thêm .toast-header
và .toast-body
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 ý: Toast phải được khởi tạo bằng jQuery: chọn phần tử được chỉ định và gọi phương thức toast()
.
Đoạn mã sau sẽ hiển thị tất cả "bánh mì nướng" trong tài liệu:
Ví dụ
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Hãy tự mình thử »Hiển thị và ẩn bánh mì nướng
Bánh mì nướng được ẩn theo mặc định. Sử dụng thuộc tính data-autohide="false"
để hiển thị nó theo mặc định. Để đóng nó, hãy sử dụng phần tử <button> và thêm data-dismiss="toast"
:
Ví 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>
Hãy tự mình thử » Bạn có để ý các lớp mr-auto
, ml-2
và mb-1
không? Chúng được sử dụng để thêm lề cụ thể. Bạn sẽ tìm hiểu thêm về chúng trong Chương Tiện ích Bootstrap 4 .
Tham khảo bánh mì nướng Bootstrap hoàn chỉnh
Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn, phương thức và sự kiện bánh mì nướng, hãy truy cập Tài liệu tham khảo bánh mì nướng JS Bootstrap của chúng tôi.