示例 1 : 警告框
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<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>
示例 2 : 可关闭的警告框
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<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>
警告提示
</div>
示例 3 : 警告框中的链接
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="alert alert-success" role="alert">
<span>大减价!!!</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-info" role="alert">
<span>大减价!!!</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-warning" role="alert">
<span>大减价!!!</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-danger" role="alert">
<span>大减价!!!</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>