<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：可取消的警告</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding:20px;">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
&times;
</button>
成功，很好地进行了提交。
</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
&times;
</button>
信息，这是一个很重要的信息。
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
&times;
</button>
警告，请不要提交。
</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
&times;
</button>
错误，请重新修改代码。
</div>
</div>
</body>
</html>

Bootstrap历练实例：可取消的警告的更多相关文章

  1. Bootstrap历练实例：警告框(Alert)插件事件

    事件 下表列出了警告框(Alert)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 close.bs.alert 当调用 close 实例方法时立即触发该事件. $('#myal ...

  2. Bootstrap历练实例：警告框(Alert)插件的方法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. Bootstrap历练实例：带链接的警告

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. Bootstrap历练实例：警告样式按钮

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  5. Bootstrap 历练实例 - 折叠（Collapse）插件事件

    事件 下表列出了折叠(Collapse)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.collapse 在调用 show 方法后触发该事件. $('#ident ...

  6. Bootstrap 历练实例 - 折叠（Collapse）插件方法

    方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $(' ...

  7. Bootstrap历练实例：验证状态

    验证状态 Bootstrap 包含了错误.警告和成功消息的验证样式.只需要对父元素简单地添加适当的 class(.has-warning. .has-error 或 .has-success)即可使用 ...

  8. Bootstrap历练实例：轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. 社交系统ThinkSNS+在研发过程中，如何做到 Laravel 配置可以网站后台配置

    什么是ThinkSNS+ ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案. 本文分享下利用 Laravel 的 Bootstrapp ...

  2. [LOJ3054] 「HNOI2019」鱼

    [LOJ3054] 「HNOI2019」鱼 链接 链接 题解 首先想 \(O(n^3)\) 的暴力,不难发现枚举 \(A\) 和 \(D\) 后, \((B,C)\) 和 \((E,F)\) 两组点互 ...

  3. Linux systemd 常用命令

    系统管理 systemctl 显示系统状态: $ systemctl status 立即激活单元: # systemctl start [单元] 立即停止单元: # systemctl stop [单 ...

  4. B. DZY Loves Modification

    B. DZY Loves Modification time limit per test 2 seconds memory limit per test 256 megabytes input st ...

  5. nuxt实践

    利用手脚架搭起来的服务端渲染实例目录结构.nuxtassets 未编译的静态资源如 LESS.SASS 或 JavaScriptcomponents 用于组织应用的 Vue.js 组件middlewa ...

  6. linux 环境下备份oracle 数据库

    登陆linux后,进入oracle的安装目录下,找到bin那个目录,进入bin目录ls -l 看这些命令的所有者: su - oracle这时会进入这个用户的主目录/home/oracle,此时,可以 ...

  7. Appium基础一：Appium概念

    1.Appium介绍: Appium是一款开源跨平台(IOS和Android平台)支持多种开发语言(java.python等)进行测试Native/Web/Hybrid的Android/iOS App ...

  8. zblog忘记后台密码怎么办 官方解决方案

    刚装的zblog还没开始研究,结果发现密码弄错了进不去后台,也是醉了 为节省时间,直接用官方方案,就是一个无密码进后台的文件.下载后把文件上传至网站根目录,然后直接访问后台修改密码 zblog密码找回 ...

  9. .Net平台互操作技术：01. 主要问题

    在.Net平台进行程序设计时,经常遇到基于Native C++,已经开发出很多类库,而现在需要用C#语言调用Native C++类库.这种情况在金融公司的量化投资部门经常发生.原因是,金融业务系统的对 ...

  10. JDK8下的HashMap有什么特别之处？

    一.前言 上篇认真的分析了在JDK7下的HashMap, 如果还没看过的或者忘记了的可以先去回顾下,这样可以更好的了解JDK8下的HashMap基于JDK7做了什么改动.分析JDK8下的HashMap ...