<!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. 洛谷P1556 幸福的路

    P1556 幸福的路 题目描述 每天,John都要为了农场里N(1≤N≤10)头牛的健康和幸福四处奔波. 每头牛的位置可以描述为一个二维坐标,John从坐标原点(0,0)出发.为了使路径更有趣,Joh ...

  2. IT兄弟连 JavaWeb教程 使用AJAX发送POST请求并获取响应

    POST请求用于向服务器发送应该被保存的数据,因此POST请求天然比GET请求多需要一份需要被保存的数据.那么这些数据应该放在何处呢?毕竟,我们的open()方法接收的三个参数都没有合适的位置. 答案 ...

  3. appium运行遇到的坑01

    ..... File "build\bdist.win32\egg\appium\webdriver\errorhandler.py", line 29, in check_res ...

  4. 微服务监控神器Prometheus的安装部署

    本文涉及:如何在k8s下搭建Prometheus+grafana的监控环境 基本概念 Prometheus提供了容器和云原生领域数据搜集.存储.处理.可视化和告警一套完整的解决方案,最初时是由Soun ...

  5. C++文件操作方法小结

    - 获取文件句柄 - fopen, fclose fopen(filename, opentype): 按照opentype的方式打开指定文件,打开失败返回NULL,否则返回文件句柄. 打开类型的属性 ...

  6. GYM 101572A（单调队列优化dp）

    要点 较好的思路解析 \(dp[i]\)为到达\(i\)花费的最短时间,\(dis[i]-dis[j]<=lim1\)的情况其实可以省略,因为就相当于没买咖啡,绝对不优于在那之前的某店买了咖啡并 ...

  7. java中实现定时任务 task 或quartz

    转载大神的 https://www.cnblogs.com/hafiz/p/6159106.html https://www.cnblogs.com/luchangyou/p/6856725.html ...

  8. 什么是微服务架构，.netCore微服务选型

    什么是微服务架构,.netCore微服务选型 https://www.cnblogs.com/uglyman/p/9182485.html 开发工具:VS2017 .Net Core 2.1 什么是微 ...

  9. Core中使用Razor视图引擎渲染视图为字符串 阅读目录

    Core中使用Razor视图引擎渲染视图为字符串 } <!DOCTYPE html> <html> <head> <title>Render view ...

  10. notepad++添加到运行

    1. 点击开始,输入regedit,点击回车2.在注册表中找到 HKEY_CLASSES_ROOT 下面的 Applications3.修改注册表 1).在Applications下面找到对应的程序名 ...