用的是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写的红色警告框样式组件的更多相关文章

  1. 利用vue写一个复选框的组件

    HTML <multicheck :source=tlist :busValue='objInfo.tt' @getTt="getTtInfo"></multic ...

  2. 第二百四十六节，Bootstrap弹出框和警告框插件

    Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...

  3. BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版

    如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...

  4. bootstrap的警告框

    .alert 基础警告框 .alert-danger  红色警告框 .alert-dismissable  修饰警告框 alert-dismiss="alert" 触发警告框 // ...

  5. 第二百四十节，Bootstrap巨幕页头缩略图和警告框组件

    Bootstrap巨幕页头缩略图和警告框组件 学习要点: 1.巨幕组件 2.页头组件 3.缩略图组件 4.警告框组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:巨幕组件.页头组件.缩 ...

  6. Bootstrap入门（二十一）组件15：警告框

    Bootstrap入门(二十一)组件15:警告框 通过这些简单.灵活的进度条,为当前工作流程或动作提供实时反馈. 进度条组件使用了 CSS3 的 transition 和 animation 属性来完 ...

  7. Bootstrap入门（二十）组件14：警告框

    Bootstrap入门(二十)组件14:警告框 警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息,提示.通知或者警示,可以迅速吸引注意力. 1.情景警告框 2.可关闭的警告框 3. ...

  8. Bootstrap 巨幕页头缩略图和警告框组件

    一．巨幕组件 //在固定的范围内,有圆角 <div class="container"> <div class="jumbotron"> ...

  9. iOS开发之自己封装的提示框（警告框）样式BHAlertView

    最近需要使用到提示框(警告框)进行信息的展示和提醒,所以进行了一个类的封装,想用Swift调用此OC文件,但是发现有些困难,所以暂时先把OC代码进行展示,随后再好好研究一下在Swift中的使用. 对于 ...

随机推荐

  1. 关于java.lang.reflect.InvocationTargetException(jar 包缺少或者冲突)的错误

    我在合肥那边运行了的是湖北石首市的项目没有错 可是回武汉之后 运行这个项目 点击这里的时候 就报错java.lang.reflect.InvocationTargetException   不是数据库 ...

  2. Vacations

    Vacations Vasya has n days of vacations! So he decided to improve his IT skills and do sport. Vasya ...

  3. backBarButtonItem无效

    控制器A push-> 控制器B, 我设置了B的backBarButtonItem为“返回”,发现无效... 原因: 应该在控制器A中设置backBarButtonItem,这样在push B之 ...

  4. sql server 日期转换函数 convert()

    --内容来自:http://hi.baidu.com/muqingz/item/8fb7b3ca8a485b0cac092f7b Select CONVERT(varchar(100), GETDAT ...

  5. HDU 5171 GTY's birthday gift 矩阵快速幂

    GTY's birthday gift Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Othe ...

  6. ZjDroid工具介绍及脱壳详细示例

    前提条件: 1.Root手机一部 2.需要通过Xposed installer(http://dl.xposed.info/latest.apk)安装Xposed Framework; 一.ZjDro ...

  7. B进制加法(洛谷1604)

    分析:码农题,照这模拟就行,高精度的B进制,注意字符串反转的技巧. #include <iostream> #include <cstdio> #include <cst ...

  8. JQuery UI 封装了一些常用模板

    1.css 他已经封装了一些css样式,如果不喜欢,可以直接修改. 2.js 他已经封装了对应的js.

  9. Java内存回收 - 落日之心的日志 - 网易博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  10. 用css制作一个三角形箭头

    剑走偏锋——用css制作一个三角形箭头   通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...