<link rel="stylesheet" type="text/css" href="../dist/css/bootstrap.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
function show(){
document.getElementById("show").style.display="";
}
</script>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="false">
×
</button>
成功！很好地完成了提交。
</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
信息！请注意这个信息。
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
警告！请不要提交。
<a href="http://www.baidu.com">百度</a>
</div>
<div class="alert alert-danger alert-dismissable" id="show" style="display: none;">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
错误！请进行一些更改。
</div>
<button onclick="show()">显示提示框</button>
注意事项：
1、要引入jq和boostrap.js
2、alert-dismissable 设置的是button里面×的样式
3、button 必须设自定义属性data-dismiss="alert"
4、默认情况下，警告框隐藏，触发事件时才显示，请看show方法
5、还可以添加超链接
