<div class="toast" data-autohide="false"><div class="toast-header"><strong class="mr-auto">Bootstrap</strong><small>11 mins ago</small><button class="close ml-2 mb-1" data-dismiss="toast"><span>×</span></button></div><div class="toast-body">
Hello, world! This is a toast message.</div></div>
2.位置
<div class="d-flex mt-5 bg-dark p-5 justify-content-center"><div class="toast" data-autohide="false"><div class="toast-header"><strong class="mr-auto">Bootstrap</strong><small>11 mins ago</small><button class="close ml-2 mb-1" data-dismiss="toast"><span>×</span></button></div><div class="toast-body">
Hello, world! This is a toast message.</div></div></div>
3.data选项
<div class="toast mt-5" data-autohide="true" data-animation="true" data-delay="5000">//data-autohide是否自动消失,data-delay配合data-autohide<div class="toast-header"><strong class="mr-auto">data-选项</strong><small>11 mins ago</small><button class="close ml-2 mb-1" data-dismiss="toast"><span>×</span></button></div><div class="toast-body">
Hello, world! This is a toast message.</div></div>
4.方法与事件
<div class="toast mt-5" data-autohide="false" id="myToast"><div class="toast-header"><strong class="mr-auto">方法与事件</strong><small>11 mins ago</small><button class="close ml-2 mb-1" data-dismiss="toast"><span>×</span></button></div><div class="toast-body">
Hello, world! This is a toast message.</div></div><script>//初始化推送消息框,必需要写这一步$(function(){$('.toast').toast('show');});//方法// $(function () {// $('#myToast').toast('show');// setTimeout(function(){// $('#myToast').toast('hide');// },3000);// });//事件$('#myToast').on('show.bs.toast',function(){
console.log('消息框要显示了');});$('#myToast').on('shown.bs.toast',function(){
console.log('消息框已经显示了');});$('#myToast').on('hide.bs.toast',function(){
console.log('消息框要隐藏了');});$('#myToast').on('hidden.bs.toast',function(){
console.log('消息框已经隐藏了');});