前端工程师
前端入门如同写字，如果你不知道从哪开始，那就选择前端（含Vue3.x，React17,TS）
大家在平时浏览网页的时候，会发现一些警示框带有关闭按钮，用户一点击关闭按钮就能自动关闭显示的警示框（也就是让警示框隐藏不显示）。在Bootstrap框架中的警示框也具有这样的功能。
使用方法：
只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤：
1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。
2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。
3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。
具体使用如下：
<div class="alert alert-success alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">×</button> 恭喜您操作成功！ </div>
运行效果如下：
原理分析：
在样式上，需要在基本警示框“alert”的基础上添加“alert-dismissable”样式，这样就可以实现带关闭功能的警示框。
/*bootstrap.css文件第4447行～第4455行*/
.alert-dismissable {
padding-right: 35px;
}
.alert-dismissable .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
我来试试：在右侧代码任务部分补充代码，为警告框添加“关闭按钮”
效果图如下：
参考代码如下：
<div class="alert alert-info" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
请修改相应信息</div>
<div class="alert alert-success" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
谢谢，操作成功！</div>
<div class="alert alert-warning" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
您已操作失败两次，还有最后一次机会</div>
<div class="alert alert-danger" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
对不起，您刚才的操作失败</div>
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报