用的是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. 安卓EditText按钮

    main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and ...

  2. Microsoft Web Test Recorder在录制时没有显示

    在进行web test录制时,IE启动后,在左侧可能没有显示Microsoft Web Test Recorder,这很有可能是因为IE加载项中,该项被禁止了,按照如下操作可解决此问题: 1. 打开I ...

  3. Codeforces Round #367 (Div. 2)D. Vasiliy's Multiset (字典树)

    D. Vasiliy's Multiset time limit per test 4 seconds memory limit per test 256 megabytes input standa ...

  4. js 增删改查

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  5. extJS4.2.0 Json数据解析,嵌套及非嵌套（二）

    Ext.data.reader.Reader Readers通常用于翻译数据,使其被加载为 Model 实例或Store, 该数据一般是一个AJAX请求的响应数据. 一般情况下不需要直接创建一个Rea ...

  6. Ubuntu iptables 设置

    在ubuntu中由于不存在 /etc/init.d/iptales文件,所以无法使用service等命令来启动iptables,需要用modprobe命令. 启动iptables modprobe i ...

  7. [转]hibernate三种状态详解

    本文来自 http://blog.sina.com.cn/u/2924525911 hibernate 三种状态详解 (2013-04-15 21:24:23) 转载▼   分类: hibernate ...

  8. 实战3--项目开始--准备:::资源分类, 日志系统, 写BaseDao

     项目资源分类: 1.   package: base, dao, dao.impl, domain, service, service.impl, util, view.action 2.   co ...

  9. static DEVICE_ATTR(val, S_IRUGO | S_IWUSR, hello_val_show, hello_val_store); 的作用

    在 老罗的android例程里面有 static DEVICE_ATTR(val, S_IRUGO | S_IWUSR, hello_val_show, hello_val_store); /*读取设 ...

  10. mysql的数据类型int、bigint、smallint 和 tinyint取值范围

    使用整数数据的精确数字数据类型.   bigint   从 -2^63 (-9223372036854775808) 到 2^63-1 (9223372036854775807) 的整型数据(所有数字 ...