用的是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. apache RewriteCond RewriteRule

    http://www.rockbb.com/blog/?p=319 http://www.cnblogs.com/scgw/archive/2011/12/10/2283029.html 我的理解:当 ...

  2. UITabBar 蓝色

    效果图1: 第一种解决办法(有局限性): 但是,但是!!!!!虽然不用写代码看起来好方便,在iOS9和8上貌似都没问题.然后我默默地 拿出了自己的小4,发现还似蓝色... 第二种解决办法:(彻底): ...

  3. cc2530操作任务系统初始化分析

    操作系统任务初始化void osalInitTasks( void ){ uint8 taskID = 0; // 分配内存,返回指向缓冲区的指针 tasksEvents = (uint16 *)os ...

  4. HDU 2846 Repository（字典树）

    字典树较为复杂的应用,我们在建立字典树的过程中需要把所有的前缀都加进去,还需要加一个id,判断它原先是属于哪个串的.有人说是AC自动机的简化,但是AC自动机我还没有做过. #include<io ...

  5. PAT (Advanced Level) 1051. Pop Sequence (25)

    简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...

  6. HDU 5569 matrix

    简单DP /* *********************************************** Author :Zhou Zhentao Email :774388357@qq.com ...

  7. C# devExpress BandedGridView属性 备忘

    BandedGridView属性备忘 StringBuilder sb = new StringBuilder(); DevExpress.XtraGrid.Views.BandedGrid.Band ...

  8. Client与Server

    监听套接字,通讯套接字,初始化网卡,多线程.想查自己的IP,ipconfig 服务端 #include "stdafx.h" #include <WinSock2.h> ...

  9. 二部图(二分图判定--dfs)

    题目链接:二部图 二部图 时间限制:1000 ms  |  内存限制:65535 KB 难度:1 描述 二 部图又叫二分图,我们不是求它的二分图最大匹配,也不是完美匹配,也不是多重匹配,而是证明一个图 ...

  10. Coloring Trees

    Coloring Trees time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...