用的是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. 【第k小素数 】 打表问题

    Prime Number TimeLimit: 1 Second MemoryLimit: 32 Megabyte Totalsubmit: 399 Accepted: 88 Description ...

  2. mybatis与spring整合（基于配置文件）

    本文主要介绍了如何将mybatis和spring整合在一起使用,本人使用的是mybatis3.05 + spring3.1.0M2 ,使用dbcp作为数据库连接池. 1.编写数据访问接口(UserDa ...

  3. 重点block

    //  main.m //  block探索 // //  Created by 殷婷婷 on 15-6-6. //  Copyright (c) 2015年 lanou. All rights re ...

  4. HDU 1887 Weird Numbers（负数的进制转化）

    题目要求有两种情况,第一种from情况,正常输出即可,很简单.第二种是to情况,给一个数字,输出负进制R的原码,这个有点小麻烦...解决方法如下; 首先,把这个数n按正常方式展开,形式如下: .... ...

  5. 要你的祝福.lrc

    要你的祝福(电影<我是路人甲>插曲 试听版) - 李潇潇 午夜的温度慢慢起舞 穿梭的人潮有些荒芜 开始欢呼 开始麻木 谁被谁在安抚 落单的幸福变得模糊 孤单的城市独自起舞 也许满足 也许糊 ...

  6. Android中通过pid获取app包名

    String callerPackage = getAppNameByPID(getContext(), Binder.getCallingPid()); private String getAppN ...

  7. OleDB连接字符串很基础却很重要

    --Oracle<add name="HISConnectionString" connectionString=" Server=127.0.0.1;Provid ...

  8. 由获取子元素的方法find和children所获

    html代码如下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  9. 黑科技--位集--bitset

    自从上次网赛发现这么个东西之后,深深地感受到了bitset的强大,0.0. 正常的bool占用1字节空间,bitset可以把这个缩到1bit,空间上8倍优化.正常用起来可能会跟位运算状态压缩类似,但是 ...

  10. DNS服务器搭建（主、从、缓）

    主dns服务器搭建 在本机上搭建一个管理hngd.com域名的域名服务器1. 确保安装好以下bind域名服务器 [root@主人 ~]# rpm -qa |grep ^bindbind-chroot- ...