消息框需要js引入:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
1、消息框
<script>
//初始化推送消息框,必需要写这一步
$(function () {
$('.toast').toast('show');
});
</script>
<div class="bg-danger">
<div class="toast" data-autohide="false"><!-- data-autohide="false":不让自动隐藏 -->
<div class="toast-header">
<!-- class="toast-header";data-dismiss="toast";class="toast-body" -->
<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 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>
2、位置
<!--
1、消息框不用栅格系统,可出现在网页任意的地方
2、justify-content-center:居中对齐
-->
<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-选项
<!--
data-autohide="true" data-animation="true" data-delay="5000"
data-delay="5000":用这个属性的时候,一定把自动关闭设为true
-->
<div class="toast mt-5" data-autohide="true" data-animation="true" data-delay="5000">
<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 () {
$('#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('消息框已经隐藏了');
});
</script>