开启全新通知体验：Toast —— Bootstrap与jQuery的完美结合
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Toast 通知示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<button id="myToastBtn" class="btn btn-primary" style="margin: 100px;">显示Toast</button>
<div id="myToastContent" style="display: none;">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">刚刚</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
这是一个Toast通知示例。
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#myToastBtn').click(function(){
var toast = $('#myToastContent').find('.toast').clone();
toast.toast({
delay: 5000
});
toast.appendTo('#myToastContent');
toast.toast('show');
});
});
</script>
</body>
</html>这个代码示例展示了如何使用Bootstrap和jQuery创建一个Toast通知。当用户点击按钮时，会触发一个事件，该事件会克隆一个Toast模板，并将其显示给用户。通过设置合适的CSS样式和JavaScript行为，我们可以创建一个美观且易于使用的Toast通知系统。
评论已关闭