用的是BT3的类和fa的图标
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<link type="text/css" rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="framework/bootstrap-3.0.0/css/responsive-nav.css">
<link type="text/css" rel="stylesheet" href="framework/font-awesome-4.3.0/css/font-awesome.min.css">
<script type="text/javascript" src="framework/vendor/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="framework/bootstrap-3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="framework/bootstrap-3.0.0/js/responsive-nav.js"></script>
<script type="text/javascript" src="framework/vendor/html5shiv.js"></script>
<script type="text/javascript" src="framework/vendor/respond.min.js"></script>
<title>navbar-inverse导航条</title>
<style type="text/css">
.list-group-item:first-child{border-top-right-radius:5px;border-top-left-radius:5px;}
.list-group-item:last-child{border-bottom-right-radius:5px;border-bottom-left-radius:5px;}
.hander{cursor: pointer}
.white{color:white;}
.red{color: red;}
.bgred{background: red;}
.borred{border: 1px solid red;}
.circle{border-radius: 50%;}
.dis-ib{display: inline-block;}
</style>
</head>
<body>
<div class="container">
<!--列表组件之警告框-->
<ul class="list-group col-xs-6 col-xs-offset-3">
<li class="list-group-item text-center borred">
<i class="fa fa-exclamation bgred circle dis-ib white" style=" 16px;height: 16px;line-height:18px;margin-right: 12px;"></i>
<a href="#" class="red">用户名或密码输入错误</a>
<span class="fa fa-remove pull-right hander" onclick="this.parentNode.style.display='none'"></span>
</li>
</ul>
</div>
</body>
</html>