您的位置：首页 > Web前端 > BootStrap

Bootstrap3写的红色警告框样式组件

2016-04-12 17:13 381 查看
用的是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="width: 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航