东方时讯网
跟大家讲解下有关一招搞定bootstrap警告框，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说一招搞定bootstrap警告框，小编也收集到了有关一招搞定bootstrap警告框的相关资料，希望大家看到了会喜欢。
警告框可以通过灵活的提供一些预定义信息，为用户反馈一些内容和提示。今天我们来介绍bootstrap警告框，有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。警告框
将文本和一个可选择的按钮放在一起，就是一个警告框，使用警告框必须设置.alert，还有其他的类可供选择。目前提供了成功、消息、警告或危险。
<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>可关闭警告框
在警告框中加入.alert-dismissible 类和一个关闭按钮，则成为一个可以关闭的警告框。为了保证该操作可行，需要给 <button> 元素添加 data-dismiss="alert" 属性。
<div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>警告!</strong> 本次操作有风险，是否继续？ </div>警告中的链接
.alert-link 可以为链接设置与当前警告框相同的颜色。
<div class="alert alert-success" role="alert"> <a href="#" class="alert-link">成功</a> </div> <div class="alert alert-info" role="alert"> <a href="#" class="alert-link">你有一条新消息</a> </div> <div class="alert alert-warning" role="alert"> <a href="#" class="alert-link">警告！！！</a> </div> <div class="alert alert-danger" role="alert"> <a href="#" class="alert-link">本次操作危险，是否继续？</a> </div>此次就不演示了，演示了图片也看不出，还是自己亲身实践比较好。
推荐学习：Bootstrap视频教程
以上就是一招搞定bootstrap警告框的详细内容，更多请关注php中文网其它相关文章！
来源：php中文网