脚本宝典收集整理的这篇文章主要介绍了一招搞定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">&times;</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警告框的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的一招搞定bootstrap警告框全部内容,希望文章能够帮你解决一招搞定bootstrap警告框所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。