Bootstrap3写的红色警告框样式组件
用的是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>
Bootstrap3写的红色警告框样式组件的更多相关文章
- 利用vue写一个复选框的组件
HTML <multicheck :source=tlist :busValue='objInfo.tt' @getTt="getTtInfo"></multic ...
- 第二百四十六节，Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...
- BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版
如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...
- bootstrap的警告框
.alert 基础警告框 .alert-danger 红色警告框 .alert-dismissable 修饰警告框 alert-dismiss="alert" 触发警告框 // ...
- 第二百四十节，Bootstrap巨幕页头缩略图和警告框组件
Bootstrap巨幕页头缩略图和警告框组件 学习要点: 1.巨幕组件 2.页头组件 3.缩略图组件 4.警告框组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:巨幕组件.页头组件.缩 ...
- Bootstrap入门（二十一）组件15：警告框
Bootstrap入门(二十一)组件15:警告框 通过这些简单.灵活的进度条,为当前工作流程或动作提供实时反馈. 进度条组件使用了 CSS3 的 transition 和 animation 属性来完 ...
- Bootstrap入门（二十）组件14：警告框
Bootstrap入门(二十)组件14:警告框 警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息,提示.通知或者警示,可以迅速吸引注意力. 1.情景警告框 2.可关闭的警告框 3. ...
- Bootstrap 巨幕页头缩略图和警告框组件
一．巨幕组件 //在固定的范围内,有圆角 <div class="container"> <div class="jumbotron"> ...
- iOS开发之自己封装的提示框（警告框）样式BHAlertView
最近需要使用到提示框(警告框)进行信息的展示和提醒,所以进行了一个类的封装,想用Swift调用此OC文件,但是发现有些困难,所以暂时先把OC代码进行展示,随后再好好研究一下在Swift中的使用. 对于 ...
随机推荐
- (转)收集：Hibernate中常见问题 No row with the given identifier exists问题的原因及解决
Hibernate中No row with the given identifier exists问题的原因及解决 产生此问题的原因: 有两张表,table1和table2.产生此问题的原因就是tab ...
- 2016沈阳网络赛 QSC and Master
QSC and Master Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) ...
- 安卓EditText按钮
main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and ...
- BodyContent揭秘及定制复杂的JSP标签
BodyContent揭秘及定制复杂的JSP标签 标签: jspintegerwrapperclass设计模式 2010-08-30 11:30 4555人阅读 评论(0) 收藏 举报 分类: HT ...
- android缓存之Lrucache 和LinkedHashMap
两者的区别 网上有很多人使用软引用加载图片的多 ,但是现在已经不再推荐使用这种方式了,(1)因为从 Android 2.3 (API Level 9)开始,垃圾回收器会更倾向于回收持有软引用或弱引用的 ...
- Total Highway Distance
Total Highway Distance 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Little Hi and Little Ho are playing a ...
- 2016"百度之星" - 资格赛（Astar Round1） Problem B
规律题,斐波那契数列,数据有毒,0的时候输出换行.会爆longlong,写个大数模板或者Java搞. import java.io.BufferedInputStream; import java.m ...
- 17.4.3 使用MulticastSocket实现多点广播（4）
17.4.3 使用MulticastSocket实现多点广播(4) 通过UserInfo类的封装,所有客户端只需要维护该UserInfo类的列表,程序就可以实现广播.发送私聊信息等功能.本程序底层通 ...
- Java的JDBC事务详解
Java的JDBC事务详解 分类: Hibernate 2010-06-02 10:04 12298人阅读 评论(9) ...
- 一个很好玩的命令：stty
stty命令修改终端命令行的相关设置.语法stty(选项)(参数)选项-a:以容易阅读的方式打印当前的所有配置:-g:以stty可读方式打印当前的所有配置.参数终端设置:指定终端命令行的设置选项.实例 ...