用的是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. SD卡的控制方法（指令集和控制时序）

    1.SD卡的命令格式: SD卡的指令由6字节(Byte)组成,如下: Byte1:0 1 x x x x x x(命令号,由指令标志定义,如CMD39为100111即16进制0x27,那么完整的CMD ...

  2. PAT (Advanced Level) 1074. Reversing Linked List (25)

    简单题. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...

  3. XML简单的增改删操作

    XML文件的简单增改删,每一个都可以单独拿出来使用. 新创建XML文件,<?xmlversion="1.0"encoding="utf-8"?> & ...

  4. Zencart 500错误查找和解决方法

    有时在一些虚拟主机下(如HostMonster,BlueHost),Zencart网站会莫名奇妙输出空白页面,查看HTTP头,其实可以看到是500错误.至于500错误的出现原因,一般是由于服务器脚本或 ...

  5. ural1028 Stars

    Stars Time limit: 0.25 secondMemory limit: 64 MB Astronomers often examine star maps where stars are ...

  6. Android学习笔记之Intent(2)

    打开网页 package com.jiahemeikang.helloandroid; import java.io.File; import com.jiahemikang.service.Echo ...

  7. jquery.proxy的四种使用场景及疑问

    作者:zccst 其实只有两种使用方式,只不过每一种又细分是否传参. 先给一段HTML,后面会用来测试: <p><button id="test">Test ...

  8. maven bundle

    今天引入了几个bundle到pom,尽然说missing,我还以为是nexus组织下载.把type=bundle去掉可以下载,后来同事给了我这个连接https://issues.apache.org/ ...

  9. Unity3d之协程自实现测试

    using UnityEngine; using System.Collections; public class TestStartCoroutine : MonoBehaviour { IEnum ...

  10. (简单) LightOJ 1074 Extended Traffic，SPFA+负环。

    Description Dhaka city is getting crowded and noisy day by day. Certain roads always remain blocked ...