<!—<div class="alert alert-* alert-dismissible">
<span data-dismiss="alert" class="close">X</span>
</div>-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title></title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>信息提示框</h1>
<!--提示框可以使用.alert类,后面加上.alert-success/info/primary/warning.... 设置情景效果-->
<!-- alert-dismissible 提示警告框组件为可关闭的-->
<!—alert为 提示警告框组件-->
<div class="alert alert-warning alert-dismissible w-50">
<!-- close类设置x的样式,设置按钮可关闭-->
<!--data-dismiss="alert"点击该元素,让目标消失-->
<span data-dismiss="alert" class="close">X</span>
警告信息框1
</div>
<div class="alert alert-danger alert-dismissible w-50">
<span data-dismiss="alert" class="close">X</span>
警告信息框2
</div>
<div class="alert alert-info alert-dismissible w-50">
<span data-dismiss="alert" class="close">X</span>
警告信息框3
</div>
<div class="alert alert-dark alert-dismissible w-50">
<span data-dismiss="alert" class="close">X</span>
警告信息框4
</div>
</div>
<br/><br/><br/><br/><br/><br/>
</body>
</html>