Bootstrap 警告框组件 + 退出按钮样式 实现一个可退出的警告框
程序员文章站
2022-05-31 13:29:32
...
Bootstrap 实现可退出的警告框
通过bootstrap的警告框组件和退出按钮的样式就可以实现一个简单的可退出警告框；
先来看看退出按钮样式的实现：
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>上面的代码就可以实现一个 灰色的 X 型退出按钮，当然这只是一个样式，没有任何的作用，
需要结合警告框来实现具体的退出功能；
我们再来看看警告框的实现：
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>上面就实现了四种不同的警告框，主要是颜色的变化，其它部分都一样；
好了，我们知道了警告框的实现和退出按钮的实现，现在将两者结合起来就可以了
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<link rel="stylesheet" href="bootstrap.css">
<title>Bootstrap 101 Template</title>
<style>
p{font-size:50px;}
.alert-warning-width{margin:0 auto;width:300px;}
</style>
</head>
<body>
<div class="alert alert-warning alert-dismissible alert-warning-width" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
警告，请不要挑战底线！
</div>
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>我们上面的代码就实现了一个简单的可退出的警告框，
注意：我们需要在按钮的 button 中添加 ：代码中红色部分
data-dismiss="alert"alert-dismissible上面的alert-warning-width是本人私自添加的样式，可有可无，只是为了好看一点；
最后的效果：
下一篇： ajax修改弹出框数据